EJ2 JavaScript 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.

ej.base.enableRipple(true);

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

var listInstance = new ej.lists.ListView({
    //Set defined data to dataSource property
    dataSource: data
});
listInstance.appendTo('#list');

// Initialize Sidebar component
var defaultSidebar = new ej.navigations.Sidebar({
    type: "Over",
    width: '100%'
});
defaultSidebar.appendTo('#default-sidebar');

//Click to toggle the Sidebar
document.getElementById('toggle').onclick = function () {
    defaultSidebar.toggle();
};

// Close the sidebar
document.getElementById('close').onclick = function () {
    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://cdn.syncfusion.com/ej2/29.1.33/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>

    <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>


    <script>
        var ele = document.getElementById('container');
        if (ele) {
            ele.style.visibility = "visible";
        }   
    </script>
    <script src="index.js" type="text/javascript"></script>
    <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%;
}