EJ2 TypeScript Sidebar control with ListView

28 Jan 202512 minutes to read

Any HTML element can be placed in the Sidebar content area. The Sidebar supports all types of HTML structures like TreeView, ListView, etc.

In the following example, the Sidebar is rendered with the ListView control in its content area.

import { Sidebar } from '@syncfusion/ej2-navigations';
import { ListView } from '@syncfusion/ej2-lists';
import { enableRipple } from '@syncfusion/ej2-base';
enableRipple(true);

// Initialize ListView component
let data: { [key: string]: Object }[] = [
    { text: 'Home', id: 'list-02' },
    { text: 'Offers', id: 'list-03' },
    { text: 'Support', id: 'list-04' },
    { text: 'Logout', id: 'list-06' }
];

let listInstance: ListView = new ListView({
    //Set defined data to dataSource property
    dataSource: data
});

//Render initialized ListView component

listInstance.appendTo('#list');

let defaultSidebar: Sidebar = new Sidebar({
    type: "Over", width: '100%'
});
defaultSidebar.appendTo('#default-sidebar');
//end of Sidebar initialization

let toggleEle: HTMLElement = document.querySelector("#toggle") as HTMLElement;
if (toggleEle) {
    // Toggle(Open/Close) the Sidebar
    toggleEle.addEventListener('click', () => {
        defaultSidebar.toggle();
    });
}

let closeEle: HTMLElement = document.querySelector("#close") as HTMLElement;
if (closeEle) {
    // Close the Sidebar
    closeEle.addEventListener('click', () => {
        defaultSidebar.hide();
    });
}
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Essential JS 2 Sidebar</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript UI Controls" />
    <meta name="author" content="Syncfusion" />
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-lists/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-navigations/styles/material.css" rel="stylesheet" />
    <link href="styles.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'>
        <!-- Sidebar element declaration -->
        <aside id="default-sidebar">
            <div class="title1">Menu</div>
            <div class="closebtn">
                <button id="close" class="e-btn close-btn">
                    <span id="innerclose" class="e-icons e-close"></span>
                </button>
            </div>
            <div id="listcontainer">
                <div id="list"></div>
            </div>
            <div class="sub-title">
                * ListView component is placed inside the Sidebar content area.
            </div>
        </aside>
        <!-- end of Sidebar element -->
        <!-- main content declaration -->
        <div>
            <div class="title2">Main content</div>
            <div class="sub-title"> Click the button to open/close the Sidebar.</div>
            <div style="padding:20px" class="center-align">
                <button id="toggle" class="e-btn e-info">Toggle Sidebar</button>
            </div>
        </div>
    </div>
    <style>
        .center-align {
            text-align: center;
            padding: 20px;
        }

        .header {
            width: 100%;
            height: 40px;
            font-size: 20px;
            line-height: 40px;
            font-weight: 500;
            background: #eee;
            display: inline-block;
        }

        .close-btn,
        .e-listview .e-list-item,
        #default-sidebar {
            background-color: rgb(20, 118, 210);
            color: #ffffff;
        }

        .close-btn {
            box-shadow: none;
        }

        .closebtn {
            top: 15px;
            line-height: 36px;
            height: 42px;
            color: black;
            position: absolute;
            right: 10px;
        }

        #listcontainer {
            width: 100%;
        }

        #list {
            margin: 0 auto;
            width: 30%;
        }

        .e-listview .e-list-item {
            text-align: center;
            font-size: 14px;
            padding: 0;
        }

        .e-btn.close-btn :hover {
            /* csslint allow: adjoining-classes*/
            box-shadow: none;
            background: transparent;
        }

        .e-icons.e-close {
            /* csslint allow: adjoining-classes*/
            line-height: 2.2;
        }

        .title1 {
            text-align: center;
            font-size: 20px;
            padding: 15px;
        }

        .title2 {
            text-align: center;
            font-size: 20px;
            padding: 15px;
        }

        .sub-title {
            text-align: center;
            font-size: 12px;
            padding: 10px;
        }

        .center {
            text-align: center;
            display: none;
            font-size: 13px;
            font-weight: 400;
            margin-top: 20px;
        }

        .col-lg-12.col-sm-12.col-md-12,
        .control-section {
            /* csslint allow: adjoining-classes*/
            padding: 0;
        }

        .close-btn:hover {
            color: #fafafa;
        }
    </style>
</body>

</html>
#container {
    visibility: hidden;
}

#loader {
    color: #008cff;
    height: 40px;
    width: 30%;
    position: absolute;
    top: 45%;
    left: 45%;
}