How can I help you?
Split panes in EJ2 TypeScript Splitter control
5 Mar 202624 minutes to read
This section explains split pane behaviors.
Horizontal layout
By default, the Splitter renders in horizontal orientation. The Splitter container is split into panes in a horizontal flow, with a vertical separator.
import { Splitter } from '@syncfusion/ej2-layouts';
// Initialize Splitter control
let splitObject: Splitter = new Splitter({
height: '250px',
paneSettings: [
{ size: '200px' },
{ size: '200px' },
{ size: '200px' }
],
width: '600px'
});
// Render initialized Splitter
splitObject.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/32.2.3/ej2-base/styles/fluent2.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-layouts/styles/fluent2.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>Vertical layout
Set the orientation API to Vertical, splitter will render in vertical orientation.The Splitter container is split into panes in a vertical with a horizontal separator.
import { Splitter } from '@syncfusion/ej2-layouts';
// Initialize Splitter control
let splitObject: Splitter = new Splitter({
height: '305px',
paneSettings: [
{ size: '100px' },
{ size: '100px' },
{ size: '100px' }
],
width: '600px',
orientation: 'Vertical'
});
// Render initialized Splitter
splitObject.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/32.2.3/ej2-base/styles/fluent2.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-layouts/styles/fluent2.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>Multiple panes
Multiple panes can be rendered with either Horizontal or Vertical orientation.
import { Splitter } from '@syncfusion/ej2-layouts';
// Initialize Splitter control
let splitObject: Splitter = new Splitter({
height: '300px',
paneSettings: [
{ size: '150px' },
{ size: '150px' },
{ size: '150px' },
{ size: '150px' }
],
width: '600px',
});
// Render initialized Splitter
splitObject.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/32.2.3/ej2-base/styles/fluent2.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-layouts/styles/fluent2.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">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 class="content">
<h3 class="h3">Australia </h3>
Australia is a country and continent surrounded by the Indian and Pacific oceans. Its major cities – Sydney, Brisbane, Melbourne, Perth, Adelaide – are coastal. Its capital, Canberra, is inland.
</div>
</div>
</div>
</div>
</body>
</html>Separator
By default, the pane separator is rendered at 1px width/height. Customize the separator size using the separatorSize API.
For horizontal orientation, separatorSize is applied as separator width.
For vertical orientation, separatorSize is applied as separator height.
import { Splitter } from '@syncfusion/ej2-layouts';
// Initialize Splitter control
let splitObject: Splitter = new Splitter({
height: '250px',
paneSettings: [
{ size: '200px' },
{ size: '200px' },
{ size: '200px' }
],
width: '600px',
separatorSize: '5'
});
// Render initialized Splitter
splitObject.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/32.2.3/ej2-base/styles/fluent2.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-layouts/styles/fluent2.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>Nested Splitter
Splitter supports nested panes for creating complex layouts. The same <div> element can serve as a Splitter pane and as a nested Splitter.
Nested Splitter can be rendered as a direct child of a Splitter pane. In that case, set the nested Splitter to
100%width and height so it matches the parent pane’s dimensions.
import { Splitter } from '@syncfusion/ej2-layouts';
let horizontalObj: Splitter = new Splitter({
height: '316px',
paneSettings: [
{ size: '200px' },
{ size: '200px' },
{ size: '200px' }
],
width: '600px'
});
horizontalObj.appendTo('#Horizontal_splitter');
let verticalObj: Splitter = new Splitter({
height: '308px',
paneSettings: [
{ size: '150px', min: '20%' },
{ size: '100px', min: '20%' }
],
orientation: 'Vertical'
});
verticalObj.appendTo('#vertical_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/32.2.3/ej2-base/styles/fluent2.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-layouts/styles/fluent2.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="Horizontal_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 id ='vertical_splitter' class="vertical_splitter">
<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 class="content">
<h3 class="h3">Australia </h3>
Australia is a country and continent surrounded by the Indian and Pacific oceans
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>Add or remove pane
Panes can be added or removed programmatically using the addPane and removePane methods. These APIs enable dynamic modification of panes at runtime.
Add pane
Add panes dynamically by passing a paneProperties along with index to the addPane method.
import { Splitter, PanePropertiesModel } from '@syncfusion/ej2-layouts';
let splitObj: Splitter = new Splitter({
height: '200px',
paneSettings: [
{ size: '190px'},
{ size: '190px'}
],
width: '600px',
created: onSplitterCreate
});
splitObj.appendTo('#splitter');
let paneDetails : PanePropertiesModel = {
size: '190px',
content: 'New Pane',
min: '30px',
max: '250px',
}
function onSplitterCreate() {
document.getElementById('addpane').addEventListener('click', () => {
splitObj.addPane(paneDetails, 1);
})
}<!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/32.2.3/ej2-base/styles/fluent2.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-layouts/styles/fluent2.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-buttons/styles/fluent2.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'>
Pane 1
</div>
</div>
<div>
<div class='content'>
Pane 2
</div>
</div>
</div>
<button id='addpane' class="e-btn">Add Pane</button>
</div>
</body>
</html>Remove pane
Remove panes dynamically by passing the pane index to the removePane method.
import { Splitter } from '@syncfusion/ej2-layouts';
import { isNullOrUndefined } from '@syncfusion/ej2-base';
let splitObj: Splitter = new Splitter({
height: '200px',
paneSettings: [
{ size: '200px'},
{ size: '200px'},
{ size: '200px'}
],
width: '600px'
});
splitObj.appendTo('#splitter');
document.getElementById('removepane').addEventListener('click', () => {
if (!isNullOrUndefined(document.querySelector('#splitter').querySelectorAll('.e-pane-horizontal')[1]))
{
splitObj.removePane(1);
}
})<!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/32.2.3/ej2-base/styles/fluent2.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-layouts/styles/fluent2.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-buttons/styles/fluent2.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'>
Pane 1
</div>
</div>
<div>
<div class='content'>
Pane 2
</div>
</div>
<div>
<div class='content'>
Pane 3
</div>
</div>
</div>
<button id='removepane' class="e-btn">Remove Pane</button>
</div>
</body>
</html>