Search results

Getting Started

This section briefly explains about how to include a simple Sidebar in your ASP.NET Core application. You can refer ASP.NET Core Getting Started documentation page for introduction part of the system requirements and configure the common specifications.

Starting with v16.2.0.x, if you reference Syncfusion assemblies from trial setup or from the NuGet feed, you also have to include a license key in your projects. Please refer to this link to know about registering Syncfusion license key in your ASP.NET Core application to use our components.

Adding component to the Application

  • Now open your view page to render Sidebar components.
<ejs-sidebar id="default-sidebar">
                <e-content-template>
                    <div class="title-header">
                        <div style="display:inline-block"> Sidebar </div>
                    </div>
                </e-content-template>
</ejs-sidebar>
            <div class="title default">Main content</div>
                    <div class="sub-title">
                        Place your primary content here.
            </div>

Run the application

After successful compilation of your application, simply press F5 to run the application.

The following example shows a basic Sidebar component.

tagHelper
getting-started.cs
<ejs-sidebar id="default-sidebar" closeOnDocumentClick="false">
        <e-content-template>
            <div class="title-header">
                <div style="display:inline-block"> Sidebar </div>
            </div>

        </e-content-template>
    </ejs-sidebar>
    <div>
    <div class="title default">Main content</div>
    <div class="sub-title">
        Place your primary content here.
    </div>
  </div>
<style>
    .center-align {
        text-align: center;
        padding: 20px;
    }

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

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

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

    body {
        padding-top: 0px;
        padding-bottom: 0px;
    }

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

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

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

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

        #default-sidebar .close-btn:hover {
            color: rgba(0, 0, 0, .87);
            background-color: #fafafa;
        }

    .e-sidebar .title-header #close {
        color: #fafafa;
        cursor: pointer;
        line-height: 25px;
    }

    .e-sidebar.e-left .title-header #close {
        float: right;
    }

    .e-sidebar.e-right .title-header #close {
        float: left;
    }

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

    .title.default {
        padding: 25px 15px 15px;
    }
</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 sample()
        {
            return View();
        }
    }
}

Enable backdrop

Enabling the showBackdrop in the Sidebar component will prevent the main content from user interactions. Here, the DOM elements will not get changed. It only closes the main content by covering with a black backdrop overlay and focuses the Sidebar in the screen.

tagHelper
backdrop.cs
<ejs-sidebar id="default-sidebar" showBackdrop="true" type="Push" width="280px">
        <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>
        <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">
            <ejs-button id="toggle" content="Toggle Sidebar" cssClass="e-info"></ejs-button>
        </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 backdrop()
        {
            return View();
        }
    }
}

Position

Positioning the Sidebar to the right or left of the main content can be achieved by using the positionproperty. If the position is not set, the Sidebar will expand from the left to the body element.

tagHelper
position.cs
<ejs-sidebar id="default-sidebar" closeOnDocumentClick="false" 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" isToggle="true" cssClass="e-info" iconCss="e-icons burg-icon" content="Open"></ejs-button>
</div>
<div class="maincontent" style="height:335px;border:1px solid gray">
    <div>
        <div class="title">Main content</div>
        <div class="sub-title">
            <div class="column">
                <ejs-radiobutton type="radio" id="left" checked="true" label="left" name="state" change="positionChange"></ejs-radiobutton>
            </div>
            <div class="column">
                <ejs-radiobutton type="radio" id="right" label="Right" name="state" change="positionChange"></ejs-radiobutton>
            </div>
        </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];
            defaultSidebar.hide();
            document.getElementById('toggle').classList.remove('e-active');
            var togglebtn = document.getElementById("toggle").ej2_instances[0];
            togglebtn.content = 'Open'
        }

    });

    function positionChange(args) {
        var defaultSidebar = document.getElementById("default-sidebar").ej2_instances[0];
        defaultSidebar.position = (args.event.target.id == "left") ? "Left" : "Right";
    }
</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, #container .e-btn.e-info, #container .e-btn.e-info:hover, #container .e-btn.e-info: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;
    }

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

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

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


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