How can I help you?
Es5 split panes in EJ2 JavaScript Splitter control
5 Mar 202624 minutes to read
This section explains Splitter pane behaviors.
Horizontal layout
By default, the Splitter renders in horizontal orientation. Splitter container will be splitted as panes in horizontal flow direction with vertical seperator.
// Initialize Splitter control
var splitObject = new ej.layouts.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/bootstrap5.3.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-layouts/styles/bootstrap5.3.css" rel="stylesheet">
<script src="https://cdn.syncfusion.com/ej2/32.2.3/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<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>
<script>
var ele = document.getElementById('container');
if(ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</body></html>Vertical layout
Set the orientation property to Vertical to render the Splitter in vertical orientation. Splitter container will be splitted as panes in vertical flow direction with horizontal seperator.
// Initialize Splitter control
var splitObject = new ej.layouts.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/bootstrap5.3.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-layouts/styles/bootstrap5.3.css" rel="stylesheet">
<script src="https://cdn.syncfusion.com/ej2/32.2.3/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<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>
<script>
var ele = document.getElementById('container');
if(ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</body></html>Multiple panes
Multiple panes can be rendered with either Horizontal or Vertical orientation.
// Initialize Splitter control
var splitObject = new ej.layouts.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/bootstrap5.3.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-layouts/styles/bootstrap5.3.css" rel="stylesheet">
<script src="https://cdn.syncfusion.com/ej2/32.2.3/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<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>
<script>
var ele = document.getElementById('container');
if(ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</body></html>Separator
By default, separators are 1px thick. Use the separatorSize property to customize the separator thickness.
For horizontal orientation, it will be considered as separator width.
For vertical orientation, it will be considered as separator height.
// Initialize Splitter control
var splitObject = new ej.layouts.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/bootstrap5.3.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-layouts/styles/bootstrap5.3.css" rel="stylesheet">
<script src="https://cdn.syncfusion.com/ej2/32.2.3/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<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>
<script>
var ele = document.getElementById('container');
if(ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</body></html>Nested Splitter
The Splitter supports nested panes to achieve complex layouts. A nested Splitter can be placed inside a pane using the same <div> element for the pane and the nested Splitter.
Alternatively, render the nested Splitter as a direct child of the pane. For this, nested splitter should have
100%width and height to match with the parent pane dimensions.
// Initialize Splitter control
var horizontalObj = new ej.layouts.Splitter({
height: '316px',
paneSettings: [
{ size: '200px' },
{ size: '200px' },
{ size: '200px' }
],
width: '600px'
});
// Render initialized splitter
horizontalObj.appendTo('#Horizontal_splitter');
var verticalObj = new ej.layouts.Splitter({
height: '308px',
paneSettings: [
{ size: '150px', min: '20%' },
{ size: '100px', min: '20%' }
],
orientation: 'Vertical'
});
// Render initialized splitter
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/bootstrap5.3.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-layouts/styles/bootstrap5.3.css" rel="stylesheet">
<script src="https://cdn.syncfusion.com/ej2/32.2.3/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<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>
<script>
var ele = document.getElementById('container');
if(ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</body></html>Add or remove pane
Panes can be managed programmatically using the addPane and removePane methods to add and remove the panes dynamically in the splitter.
Add pane
Use the panes dynamically in the splitter by passing paneProperties along with index to the addPane method
// Initialize Splitter control
var splitObject = new ej.layouts.Splitter({
height: '200px',
paneSettings: [
{ size: '200px' },
{ size: '200px' }
],
width: '600px',
created: onSplitterCreate
});
// Render initialized splitter
splitObject.appendTo('#splitter');
var paneDetails = {
size: '190px',
content: 'New Pane',
min: '30px',
max: '250px',
}
function onSplitterCreate() {
document.getElementById('addpane').addEventListener('click', function () {
splitObject.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/bootstrap5.3.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-layouts/styles/bootstrap5.3.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-buttons/styles/bootstrap5.3.css" rel="stylesheet">
<script src="https://cdn.syncfusion.com/ej2/32.2.3/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<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>
<script>
var ele = document.getElementById('container');
if(ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</body></html>Remove pane
Remove panes dynamically by passing the pane index to the removePane method.
// Initialize Splitter control
var splitObject = new ej.layouts.Splitter({
height: '200px',
paneSettings: [
{ size: '200px' },
{ size: '200px' },
{ size: '200px' }
],
width: '600px',
});
// Render initialized splitter
splitObject.appendTo('#splitter');
document.getElementById('removepane').addEventListener('click', function () {
splitObject.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/bootstrap5.3.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-layouts/styles/bootstrap5.3.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-buttons/styles/bootstrap5.3.css" rel="stylesheet">
<script src="https://cdn.syncfusion.com/ej2/32.2.3/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<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>
<script>
var ele = document.getElementById('container');
if(ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</body></html>