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'>&lt;<span>!DOCTYPE html></span><div>&lt;<span>html></span></div>" +
        "<div>&lt;<span>body></span></div>&lt;<span>div</span> id='custom-image'><div style='margin-left: 5px'>&lt;<span>img</span> src='src/albert.png'></div>" +
        "<div>&lt;<span>div</span>&gt;</div><div>&lt;<span>/body></span></div><div>&lt;<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.

Different layouts

Code editor style layout

Outlook style layout

See Also