Different layouts in EJ2 JavaScript Splitter control
23 Jun 202320 minutes to read
By using splitter control, you can create the different layouts with multiple and nested panes.
Code editor style layout
Step 1:
Create the element with two child to render the outer splitter.
<div id="VerticalSplitter">
<div id="HorizontalSplitter">
</div>
<div>
<div class="content">
<h3 class="h3">Preview of sample</h3>
<div class="splitter-image">
<img class="img1" src="https://ej2.syncfusion.com/demos/src/listview/images/albert.png" style="width: 20%;margin: 0 auto;">
</div>
</div>
</div>
</div>
let VerticalSplitObj: Splitter = new Splitter({
height: '400px',
paneSettings: [
{ size: '53%', min: '30%' },
],
orientation: 'Vertical'
});
VerticalSplitObj.appendTo('#VerticalSplitter');Step 2 :
Render the first pane of vertical splitter as a horizontal splitter.
<div id="VerticalSplitter">
<div id="HorizontalSplitter">
<div>
<div class="content">
<h3 class="h3">HTML</h3>
<div class="code-preview">
<<span>!DOCTYPE html></span>
<div><<span>html></span></div>
<div><<span>body></span></div>
<<span>div</span> id="custom-image">
<div style="margin-left: 5px"><<span>img</span>src="src/albert.png"></div>
<div><<span>div</span>></div>
<div><<span>/body></span></div>
<div><<span>/html></span></div>
</div>
</div>
</div>
<div>
<div class="content">
<h3 class="h3">CSS</h3>
<div class="code-preview">
<span>img {</span>
<div id="code-text">margin:<span>0 auto;</span></div>
<div id="code-text">display:<span>flex;</span></div>
<div id="code-text">height:<span>70px;</span></div>
<span> }</span>
</div>
</div>
</div>
<div>
<div class="content">
<h3 class="h3">JavaScript</h3>
<div class="code-preview">
<span>var</span> image = document.getElementById("custom-image");
<div>image.addEventListener("click", function() {</div>
<div style="padding-left: 20px;">// Code block for click action</div>
<span> }</span>
</div>
</div>
</div>
</div>
<div class="content">
<h3 class="h3">Preview of sample</h3>
<div class="splitter-image">
<img class="img1" src="https://ej2.syncfusion.com/demos/src/listview/images/albert.png" style="width: 20%;margin: 0 auto;">
</div>
</div>
</div>
let HorizontalSplitObj: Splitter = new Splitter({
height: '220px',
paneSettings: [
{ size: '29%', min: '23%' },
{ size: '20%', min: '15%' },
{ size: '35%', min: '35%' }
],
width: '100%'
});
HorizontalSplitObj.appendTo('#HorizontalSplitter'); .code-preview {
margin-top: 15px;
font-size: 12px;
}
.content {
padding: 12px;
}
.splitter-image {
margin: 0 auto;
display: flex;
height: 115px;
margin-top: 10px;
}
Once the above configurations has been completed, you will get the output like this
Outlook style layout
Step 1:
Create the element with three panes and place the elements within the pane to render treeview, listview and RTE.
<div id="splitter1">
<div>
<div class="content">
<div id="tree"></div>
</div>
</div>
<div>
<div class="content">
<div id="groupedList" tabindex="1"></div>
</div>
</div>
<div>
<div class="content">
<div style="width: 100%; padding: 15px;">
<table>
<tr>
<td><button class="e-btn e-flat e-outline">To...</button></td>
<td><input id="firstname" /></td>
</tr>
<tr>
<td><button class="e-btn e-flat e-outline">Cc...</button></td>
<td><input id="lastname" /></td>
</tr>
<tr>
<td><div id="subject-text">Subject</div></td>
<td><input id="subject" /></td>
</tr>
</table>
</div>
<div class="forum">
<div id="createpostholder">
<div id="defaultRTE"> </div>
<div id="buttonSection">
<button class="e-btn e-primary" id="send">Send</button>
<button class="e-btn" id="discard">Discard</button>
</div>
</div>
</div>
</div>
</div>
</div>
Step 2 :
Place the template script to render the treeview.
<script id="treeTemplate" type="text/x-template">
<div>
<div class="treeviewdiv">
<div style="float:left">
<span class="treeName">${name}</span>
</div>
${if(count)}
<div style="margin-right: 5px; float:right">
<span class="treeCount e-badge e-badge-primary">${count}</span>
</div>
${/if}
</div>
</div>
</script>Step 3 :
Render the listed controls one by one.
let splitObj1: Splitter = new Splitter({
height: '493px',
paneSettings: [
{ size: '28%', min: '27%' },
{ size: '33%', min: '23%' },
{ size: '37%', min: '30%' }
],
width: '100%'
});
splitObj1.appendTo('#splitter1');
let inputobj1: TextBox = new TextBox({
});
inputobj1.appendTo('#firstname');
let inputobj2: TextBox = new TextBox({
});
inputobj2.appendTo('#lastname');
let inputobj3: TextBox = new TextBox({
});
inputobj3.appendTo('#subject');
// Data source for TreeView component
let mailBox: { [key: string]: Object }[] = [
{ id: 1, name: 'Favorites', hasChild: true},
{ id: 2, pid: 1, name: 'Sales Reports', count: '4' },
{ id: 3, pid: 1, name: 'Sent Items'},
{ id: 4, pid: 1, name: 'Marketing Reports ', count: '6'},
{ id: 5, name: 'Andrew Fuller', hasChild: true, expanded: true },
{ id: 6, pid: 5, name: 'Inbox', selected: true , count: '20'},
{ id: 7, pid: 5, name: 'Drafts', count: '5'},
{ id: 15, pid: 5, name: 'Archive'},
{ id: 8, pid: 5, name: 'Deleted Items'},
{ id: 9, pid: 5, name: 'Sent Items'},
{ id: 10, pid: 5, name: 'Sales Reports' , count: '4'},
{ id: 11, pid: 5, name: 'Marketing Reports', count: '6' },
{ id: 12, pid: 5, name: 'Outbox'},
{ id: 13, pid: 5, name: 'Junk Email'},
{ id: 14, pid: 5, name: 'RSS Feed'},
{ id: 15, pid: 5, name: 'Trash' }
];
// Render the TreeView using template option
let treeObj: TreeView = new TreeView({
fields: { dataSource: mailBox, id: 'id', parentID: 'pid', text: 'name', hasChildren: 'hasChild' },
nodeTemplate: '#treeTemplate',
});
treeObj.appendTo('#tree');
// tslint:disable:max-line-length
//Define an array of JSON data
let dataSource: any = [
{ Name: 'Selma Tally', content: '<div><div class="status">Apology marketing email</div><div id="list-message">Hello Ananya Singleton</div>', id: '1', order: 0 },
{ Name: 'Illa Russo', content: '<div><div class="status">Annual conference</div><div id="list-message">Hi jeani Moresa</div></div>', id: '4', order: 0 },
{ Name: 'Camden Macmellon', content: '<div><div class="status">Reference request- Camden hester</div><div id="list-message">Hello Kerry Best,</div></div>', order: 0 },
{ Name: 'Garth Owen', content: '<div><div class="status">Application for job Title</div><div id="list-message">Hello Illa Russo</div></div>', id: '2', order: 0 },
{ Name: 'Ursula Patterson', content: '<div><div class="status">Programmaer Position Applicant</div><div id="list-message">Hello Kerry best,</div></div>', id: '2', order: 0 }
];
// Initialize ListView component
let listObj: ListView = new ListView({
//Set defined data to dataSource property
dataSource: dataSource,
cssClass: 'e-list-template',
//Map the appropriate columns to fields property
fields: { text: 'Name', groupBy: 'order' },
//Set customized group-header template
groupTemplate: '<div class="e-list-wrapper"><span class="e-list-item-content"></span></div>',
//Set customized list template
template: '<div class="settings e-list-wrapper e-list-multi-line e-list-avatar">' +
'<span class="e-list-item-header">${Name}</span>' +
'<span class="e-list-content">${content}</span>' +
'</div>'
});
//Render initialized ListView component
listObj.appendTo('#groupedList');
let button1: Button = new Button({ isPrimary: true });
button1.appendTo('#rteSubmit');
let button2: Button = new Button();
button2.appendTo('#rteCancel');
let defaultRTE: RichTextEditor = new RichTextEditor({ height: '262px'});
defaultRTE.appendTo('#defaultRTE'); <style>
#target {
margin: 20px auto;
max-width: 820px;
}
.e-treeview .e-list-text {
width: 100%;
}
#groupedList.e-listview .e-list-group-item {
height: 0;
}
#splitter1 .settings.e-list-wrapper.e-list-multi-line.e-list-avatar {
padding: 15px;
}
#buttonSection {
padding: 7px;
}
</style>
Once the above configurations has been completed, you will get the output like this.