Different layouts
17 Feb 202216 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.
@{
var pane4Content = @"<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 id="target" class="control_wrapper">
<div>
<ejs-splitter id="outerSplitter" height="400px" orientation="Vertical" created="onLoad">
<e-splitter-panes>
<e-splitter-pane size="53%" min="30%"></e-splitter-pane>
<e-splitter-pane content=@pane4Content></e-splitter-pane>
</e-splitter-panes>
</ejs-splitter>
</div>
</div>Step 2 :
Render the first pane of vertical splitter as a horizontal splitter.
<script>
var HTMLContent = "<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>";
var CSSContent = "<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>";
var javaScriptContent = "<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>";
function onLoad(args) {
document.getElementById('outerSplitter').querySelector('.e-pane-vertical').setAttribute('id', 'Innersplitter');
var splitObj1 = new ej.layouts.Splitter({
height: '220px',
paneSettings: [
{ size: '29%', min: '23%', content: HTMLContent },
{ size: '20%', min: '15%', content: CSSContent },
{ size: '35%', min: '35%', content: javaScriptContent }
],
width: '100%'
});
splitObj1.appendTo('#Innersplitter');
}
</script><style>
#code-text {
margin-left: 5px;
}
.code-preview {
margin-top: 15px;
font-size: 12px;
}
#target {
margin: 20px auto;
max-width: 600px;
}
.control-section {
min-height: 370px;
margin-bottom: 15px;
margin-top: 10px;
}
.h3 {
font-size: 14px;
margin: 4px;
}
.content {
padding: 12px;
}
.splitter-image {
margin: 0 auto;
display: flex;
height: 115px;
margin-top: 10px;
}
</style>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 RichTextEditor.
@{
var paneContent = @"<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 id="target">
<div>
<ejs-splitter id="splitter1" height="493px" width="100%" created="onLoad">
<e-splitter-panes>
<e-splitter-pane size="28%" min="27%" content="<div><div class='content'><div id='tree'></div></div></div>"></e-splitter-pane>
<e-splitter-pane size="33%" min="23%" content="<div><div class='content'><div id='groupedList' tabindex='1'></div></div></div>"></e-splitter-pane>
<e-splitter-pane size="37%" min="30%" content=@paneContent></e-splitter-pane>
</e-splitter-panes>
</ejs-splitter>
</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.
<script>
var mailBox = [
{ 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' }
];
var dataSource = [
{ 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 }
];
function onLoad() {
var inputobj1 = new ej.inputs.TextBox({});
inputobj1.appendTo('#firstname');
var inputobj2 = new ej.inputs.TextBox({});
inputobj2.appendTo('#lastname');
var inputobj3 = new ej.inputs.TextBox({});
inputobj3.appendTo('#subject');
// Render the TreeView using template option
var treeObj = new ej.navigations.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
// Initialize ListView component
var listObj = new ej.lists.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');
var button1 = new ej.buttons.Button({ isPrimary: true });
button1.appendTo('#rteSubmit');
var button2 = new ej.buttons.Button();
button2.appendTo('#rteCancel');
var defaultRTE = new ej.richtexteditor.RichTextEditor({ height: '262px' });
defaultRTE.appendTo('#defaultRTE');
}
</script> <style>
#discard {
margin-left: 7px;
}
table {
width: 100%;
}
#target {
margin: 20px auto;
max-width: 820px;
}
td {
padding: 2px;
}
.control-section{
min-height: 370px;
}
.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;
}
#createpostholder {
padding-left: 3px;
padding-right: 4px;
}
</style>Once the above configurations has been completed, you will get the output like this.