How To

Initialize the Sidebar with ListView

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

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

  • Add the HTML div tag with its id attribute as default in your index.html file to initialize the Sidebar.
razor
sidebar.cs
@{Html.EJS().Sidebar("default-sidebar").Type(Syncfusion.EJ2.Navigations.SidebarType.Over).Width("100%").ContentTemplate(@<div>
        <div class="title1"> Menu </div>
        <div class="closebtn">
            @Html.EJS().Button("close").CssClass("e-btn close-btn").IconCss("e-icons close-icon").Render();
        </div>
        <div id="listcontainer">
            @Html.EJS().ListView("list").DataSource((IEnumerable<object>)ViewBag.dataSource).Render()
        </div>
        <div class="sub-title">
            * ListView component is placed inside the sidebar content area.
        </div>
    </div>).Render();}
<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">
        @Html.EJS().Button("toggle").Content("Toggle Sidebar").IsToggle(true).CssClass("e-info").Render()
    </div>
</div>

<script type="text/javascript">
    document.addEventListener('DOMContentLoaded', function () {

        document.getElementById('toggle').onclick = function () {
            var defaultSidebar = document.getElementById("default-sidebar").ej2_instances[0];
            defaultSidebar.toggle();
        }
        // Close the sidebar
        document.getElementById('close').onclick = function () {
            var defaultSidebar = document.getElementById("default-sidebar").ej2_instances[0];
            defaultSidebar.hide();
        }
    });
</script>
<style>
    #container {
        visibility: hidden;
    }

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

    .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%;
    }

    .close-icon::before {
        content: '\e945';
    }

    .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.close-icon { /* 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;
    }

    #wrapper {
        display: block;
    }

    .sb-content-tab .center {
        display: block;
    }

    .sb-content-tab #wrapper {
        display: none;
    }

    .right {
        float: right;
    }

    body {
        margin: 0;
    }

    .close-btn:hover {
        color: #fafafa;
    }

    .content-section { /* csslint allow: adjoining-classes */
        padding: 30px 10px 10px 20px;
    }
</style>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;

namespace EJ2CoreSampleBrowser.Controllers
{
    public partial class SidebarController : Controller
    {
        public IActionResult sidebar()
        {
            List<object> data = new List<object>();
            data.Add(new { text = "Home", id = "list-01" });
            data.Add(new { text = "Offers", id = "list-02" });
            data.Add(new { text = "Support", id = "list-03" });
            data.Add(new { text = "Logout", id = "list-04" });
            ViewBag.dataSource = data;
            return View();
        }
    }
}

Open and close the Sidebar

Opening and closing the Sidebar can be achieved with built-in public methods.

  • show(): Method to open the Sidebar.
  • hide(): Method to close the Sidebar.
  • toggle(): Method to toggle the open/close state of the Sidebar.

In the following sample, toggle method has been used to show or hide the Sidebar on button click.

razor
open.cs
@{Html.EJS().Sidebar("default-sidebar").ShowBackdrop(false).ContentTemplate(@<div>
            <div class="title"> Sidebar content</div>
            <div class="sub-title">
                Click the button to close the Sidebar.
            </div>
            <div class="center-align">
                @Html.EJS().Button("close").Content("CloseSidebar").Render()
            </div>
     </div>).Render();
     }
    <div>
        <div class="title">Main content</div>
        <div class="sub-title"> Click the button to open/close the Sidebar.</div>
        <div style="padding:20px" class="center-align">
          @Html.EJS().Button("toggle").Content("Toggle Sidebar").CssClass("e-info").Render()
        </div>
    </div>

<script type="text/javascript">
    document.addEventListener('DOMContentLoaded', function () {

        document.getElementById('toggle').onclick = function () {
            var defaultSidebar = document.getElementById("default-sidebar").ej2_instances[0];
            defaultSidebar.toggle();
        }
        // Close the sidebar
        document.getElementById('close').onclick = function () {
            var defaultSidebar = document.getElementById("default-sidebar").ej2_instances[0];
            defaultSidebar.hide();
        }
    });
</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;
    }

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

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

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

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

    #wrapper {
        display: block;
    }

    .sb-content-tab .center { /* csslint allow: adjoining-classes*/
        display: block;
    }

    .sb-content-tab #wrapper { /* csslint allow: adjoining-classes*/
        display: none;
    }

    .right {
        float: right;
    }

    body {
        margin: 0;
    }

    #default-sidebar {
        background-color: rgb(25, 118, 210);
        color: #ffffff;
    }

    .book .ej2-sample-frame { /* csslint allow: adjoining-classes */
        padding: 0;
    }
</style>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;

namespace EJ2CoreSampleBrowser.Controllers
{
    public partial class SidebarController : Controller
    {
        public IActionResult open()
        {
            return View();
        }
    }
}