How can I help you?
Pane content in EJ2 TypeScript Splitter control
5 Mar 202615 minutes to read
This section explains how to provide plain text, HTML markup, or other JavaScript UI controls as content for the Splitter.
HTML Markup
The Splitter is a layout-based container control. Render pane content from existing HTML markup. Converting HTML markup into splitter panes provides an easy way to add pane content dynamically.
import { Splitter } from '@syncfusion/ej2-layouts';
let splitObj: Splitter = new Splitter({
height: '200px',
paneSettings: [
{ size: '200px',
content: '<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>'
},
{ size: '200px',
content: '<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>'
},
{ size: '200px',
content: '<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>'
}
],
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/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>
<div></div>
<div></div>
</div>
</div>
</body>
</html>Also, provide pane content using inner HTML.
import { Splitter } from '@syncfusion/ej2-layouts';
let splitObj: Splitter = new Splitter({
height: '200px',
paneSettings: [
{ size: '200px' },
{ size: '200px' },
{ 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/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">
<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>JavaScript UI controls
Render any JavaScript UI controls and their native/control events inside a splitter pane.
You can refer Accordion within splitter and Listview within splitter examples.
Plain content
Add plain text as pane content using either innerHTML or content API.
import { Splitter } from '@syncfusion/ej2-layouts';
let splitObj: Splitter = new Splitter({
height: '200px',
paneSettings: [
{ size: '200px', content: 'Left pane'
},
{ size: '200px', content: 'Middle pane'
},
{ size: '200px', content: 'Right pane'
}
],
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/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>
<div></div>
<div></div>
</div>
</div>
</body>
</html>Pane content using selector
Set an HTML element as pane content using query selectors such as ID or CSS class selectors.
The following code demonstrates fetching an element from the document and loading it into a pane by its ID.
import { Splitter } from '@syncfusion/ej2-layouts';
/**
* Splitter pane content as html element using ID selector
*/
let splitObj1: Splitter = new Splitter({
height: '200px',
paneSettings: [
{ size: '25%', min: '60px', content: '#left-pane-content' },
{ size: '50%', min: '60px', content: '#middle-pane-content' },
{ size: '25%', min: '60px', content: '#last-pane-content' }
],
width: '100%',
separatorSize: 4
});
splitObj1.appendTo('#horizontal');<!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="target" class="control-section">
<!-- Splitter control target -->
<div id="horizontal"></div>
</div>
<!-- pane contents -->
<div id="left-pane-content" style="display: none;">
<div>Left pane<div id='panetext'>size: 25%</div>
<div id='panetext'>min: 60px</div>
</div>
</div>
<div id="middle-pane-content" style="display: none;">
<span>Middle pane<div id="panetext">size: 50%</div>
<div id="panetext">min: 60px</div>
</span>
</div>
<div id="last-pane-content" style="display: none;">
<span>Right pane<div id="panetext">size: 25%</div>
<div id="panetext">min: 60px</div>
</span>
</div>
</div>
</body>
</html>