Different layouts in EJ2 TypeScript Splitter control

8 May 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">
                        &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>
            <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.

See Also