Custom context in EJ2 JavaScript Sidebar control

28 Jan 202511 minutes to read

The Sidebar has a flexible option that allows it to be initialized and targeted to any HTML element alongside the main content of a web page.

By default, the Sidebar targets the body element. Using the target property, you can set the target element to initialize the Sidebar inside any HTML element apart from the body element.

If required, zIndex can be set when the Sidebar acts as an overlay type.

In the following sample, the Sidebar is rendered in context to a div container element that has the CSS class e-main-content.

index.js
index.html
styles.css
ej.base.enableRipple(true);
//Sidebar initialization
var defaultSidebar = new ej.navigations.Sidebar({
    width: "280px",
    type: "Push",
    target: '.maincontent'
});
defaultSidebar.appendTo('#default-sidebar');
//end of Sidebar initialization

//toggle button initialization
var togglebtn = new ej.buttons.Button({ iconCss: 'e-icons e-menu', isToggle: true, content: 'Open' }, '#toggle');

// Close the Sidebar on clicking the close button
document.getElementById('close').onclick = function () {
    defaultSidebar.hide();
    document.getElementById('toggle').classList.remove('e-active');
    togglebtn.content = 'Open'
};

//Click the toggle button to expand/collapse the Sidebar.
document.getElementById('toggle').onclick = function () {
    if (document.getElementById('toggle').classList.contains('e-active')) {
        togglebtn.content = 'Close';
        defaultSidebar.show();
    } else {
        togglebtn.content = 'Open';
        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-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="title"> Sidebar content</div>
            <div id="list"></div>
            <div class="sub-title">
                Click the button to close the Sidebar.
            </div>
            <div class="center-align">
                <button id="close" class="e-btn close-btn">Close Sidebar</button>
            </div>
        </aside>
        <!-- end of Sidebar element -->
        <!-- main content declaration -->

        <div id="head">
            <button id="toggle" class="e-btn e-info"></button>
        </div>
        <div class="maincontent" style="height:325px;border:1px solid gray">
            <div>
                <div class="title"> Main content</div>
                <div class="sub-title"> content goes here.</div>
            </div>
        </div>
        <!--end of main content -->
    </div>

    <script>
        var ele = document.getElementById('container');
        if (ele) {
            ele.style.visibility = "visible";
        }   
    </script>
    <script src="index.js" type="text/javascript"></script>
    <style>
        .header {
            width: 100%;
            height: 40px;
            font-size: 20px;
            line-height: 40px;
            font-weight: 500;
            background: #eee;
            display: inline-block;
        }

        .center-align {
            text-align: center;
            padding: 20px;
        }

        .e-menu:before {
            font-size: 16px;
        }

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

        #head {
            border: 1px solid #424242;
            border-bottom-color: transparent;
            background: #00897B;
        }

        #toggle,
        #toggle:hover,
        #toggle:focus {
            /* csslint allow: adjoining-classes*/
            background: #00695C;
            box-shadow: none;
            border-radius: 0;
            height: 39px;
            width: 100px;
        }

        #close,
        #close:hover,
        #close:active,
        #close:focus {
            /* csslint allow: adjoining-classes*/
            background: #fafafa;
            color: black
        }

        .sub-title {
            text-align: center;
            font-size: 16px;
            padding: 10px;
            display: flex;
            justify-content: center;
        }

        .radiobutton {
            display: inline-block;
            padding: 10px;
        }

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

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

        #default-sidebar {
            background-color: #26A69A;
            color: #ffffff;
        }

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

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

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