Resizing in EJ2 TypeScript Splitter control
3 Feb 202414 minutes to read
By default, resizing will be enable for split panes. Resizing gripper element will be add to the separator to makes the resize easy.
Horizontal splitter will allows to resize in horizontal directions.
Vertical splitter will allows to resize in vertical directions.
While resizing, previous and next panes will be adjust its dimensions automatically.
Min and Max validation
Splitter allows you to set the minimum and maximum sizes for each pane. Resizing will not be occur over the minimum and maximum values.
import { Splitter } from '@syncfusion/ej2-layouts';
let splitObj: Splitter = new Splitter({
height: '200px',
paneSettings: [
{ size: '200px', min: '20%', max: '40%'},
{ size: '200px', min: '30%', max: '60%'}
{ size: '200px'}
],
width: '600px'
});
splitObj.appendTo('#splitter');
<!DOCTYPE html>
<html lang="en">
<head>
<title>Essential JS 2 Splitter </title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 Uploader Component" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/26.2.4/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/26.2.4/ej2-layouts/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/26.2.4/ej2-buttons/styles/material.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='loader'>Loading....</div>
<div id='container'>
<!--element which is going to render the splitter-->
<div id="splitter">
<div>
<div class="content">
<h3 class="h3">Grid </h3>
The ASP.NET DataGrid control, or DataTable is a feature-rich control used to display data in a tabular format.
</div>
</div>
<div>
<div class="content">
<h3 class="h3">Schedule </h3>
The ASP.NET Scheduler, a.k.a. event calendar, facilitates almost all calendar features, thus allowing users to manage their time efficiently
</div>
</div>
<div>
<div class="content">
<h3 class="h3">Chart </h3>
ASP.NET charts, a well-crafted easy-to-use charting package, is used to add beautiful charts in web and mobile applications
</div>
</div>
</div>
</div>
</body>
</html>
Prevent resizing
You can disable the resizing for the pane by setting false
to the resizable
API within paneSettings.
Splitter resizing will be enabled only when the target of the adjacent pane’s
resizable
api should also be intrue
state.
import { Splitter } from '@syncfusion/ej2-layouts';
let splitObj: Splitter = new Splitter({
height: '200px',
paneSettings: [
{ size: '200px', min: '20%', max: '40%', resizable: false},
{ size: '200px', min: '30%', max: '60%'}
{ size: '200px'}
],
width: '600px'
});
splitObj.appendTo('#splitter');
<!DOCTYPE html>
<html lang="en">
<head>
<title>Essential JS 2 Splitter </title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 Uploader Component" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/26.2.4/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/26.2.4/ej2-layouts/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/26.2.4/ej2-buttons/styles/material.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='loader'>Loading....</div>
<div id='container'>
<!--element which is going to render the splitter-->
<div id="splitter">
<div>
<div class="content">
<h3 class="h3">Grid </h3>
The ASP.NET DataGrid control, or DataTable is a feature-rich control used to display data in a tabular format.
</div>
</div>
<div>
<div class="content">
<h3 class="h3">Schedule </h3>
The ASP.NET Scheduler, a.k.a. event calendar, facilitates almost all calendar features, thus allowing users to manage their time efficiently
</div>
</div>
<div>
<div class="content">
<h3 class="h3">Chart </h3>
ASP.NET charts, a well-crafted easy-to-use charting package, is used to add beautiful charts in web and mobile applications
</div>
</div>
</div>
</div>
</body>
</html>
Refresh content on resizing
While resizing the panes, you can refresh the pane contents by using either resizeStart
, resizing
or resizeStop
events.
Customize the resize grip and cursor
You can customize the resize gripper icon and cursor in css level.
import { Splitter } from '@syncfusion/ej2-layouts';
let splitObj: Splitter = new Splitter({
height: '200px',
paneSettings: [
{ size: '200px', min: '20%', max: '40%'},
{ size: '200px', min: '30%', max: '60%'}
{ size: '200px'}
],
width: '600px'
});
splitObj.appendTo('#splitter');
<!DOCTYPE html>
<html lang="en">
<head>
<title>Essential JS 2 Splitter </title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 Uploader Component" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/26.2.4/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/26.2.4/ej2-layouts/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/26.2.4/ej2-buttons/styles/material.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<style>
.default-splitter .e-splitter .e-split-bar .e-resize-handler:before {
content: "\e934";
font-family: 'e-icons';
font-size: 11px;
transform: rotate(90deg);
}
.e-splitter .e-split-bar.e-split-bar-horizontal.e-resizable-split-bar,
.e-splitter .e-split-bar.e-split-bar-horizontal.e-resizable-split-bar::after {
cursor: e-resize;
}
</style>
<body>
<div id='loader'>Loading....</div>
<div id='container' class="container default-splitter">
<!--element which is going to render the splitter-->
<div id="splitter">
<div>
<div class="content">
<h3 class="h3">PARIS </h3>
Paris, the city of lights and love - this short guide is full of ideas for how to make the most of the romanticism...
</div>
</div>
<div>
<div class="content">
<h3 class="h3">CAMEMBERT </h3>
The village in the Orne département of Normandy where the famous French cheese is originated from.
</div>
</div>
<div>
<div class="content">
<h3 class="h3">GRENOBLE </h3>
The capital city of the French Alps and a major scientific center surrounded by many ski resorts, host of the Winter Olympics in 1968.
</div>
</div>
</div>
</div>
</body>
</html>