Search results

Context

By default, Sidebar initializes context to the body element. Using the target property, set context element to initialize Sidebar inside any HTML element apart from the body element.

razor
context.cs
@{Html.EJS().Sidebar("default-sidebar").Type(Syncfusion.EJ2.Navigations.SidebarType.Push).Width("280px").Target(".maincontent").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 id="head">
      @Html.EJS().Button("toggle").Content("Open").IsToggle(true).CssClass("e-info").IconCss("e-icons burg-icon").Render()
    </div>
    <div class="maincontent" style="height:335px;border:1px solid gray">
        <div>
            <div class="title">Main content</div>
            <div class="sub-title"> content goes here.</div>
        </div>
    </div>

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

        document.getElementById('toggle').onclick = function () {
            var defaultSidebar = document.getElementById("default-sidebar").ej2_instances[0];
            var togglebtn = document.getElementById("toggle").ej2_instances[0];
            if (document.getElementById('toggle').classList.contains('e-active')) {
                togglebtn.content = 'Close';
                defaultSidebar.show();
            } else {
                togglebtn.content = 'Open';
                defaultSidebar.hide();
            }
        }
        // Close the sidebar
        document.getElementById('close').onclick = function () {
            var defaultSidebar = document.getElementById("default-sidebar").ej2_instances[0];         
            var togglebtn = document.getElementById("toggle").ej2_instances[0];
            defaultSidebar.hide();
            document.getElementById('toggle').classList.remove('e-active');
            togglebtn.content = 'Open'
        }

    });
</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;
    }

    .burg-icon:before {
        content: '\e7f6';
        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;
    }

    #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: #26A69A;
        color: #ffffff;
    }

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

    .content-section { /* csslint allow: adjoining-classes */
        padding: 30px 10px 10px 20px;
    }

    .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 context()
        {
            return View();
        }
    }
}