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.

tagHelper
context.cs
<ejs-sidebar id="default-sidebar" type="Push" width="280px" target=".maincontent">
        <e-content-template>
            <div class="title"> Sidebar content</div>
            <div class="sub-title">
                Click the button to close the Sidebar.
            </div>
            <div class="center-align">
                <ejs-button id="close" content="Close Sidebar"></ejs-button>
            </div>
        </e-content-template>
    </ejs-sidebar>
    <div id="head">
        <ejs-button id="toggle" content="Open" isToggle="true" cssClass="e-info" iconCss="e-icons burg-icon"></ejs-button>
    </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();
        }
    }
}