1. Home
  2. Forum
  3. ASP.NET MVC - EJ 2
  4. SideBar not rendering or throwing error

SideBar not rendering or throwing error

I have a sidebar that i am using the the _Layout page, but it never seems to render ... 

 <!-- sidebar element declaration-->

            <div id="sidebar-menu">
                <div class="dock-menu">
                    <!-- normal state element declaration -->
                    <div class="main-menu">

                        <p class="main-menu-header">NAVIGATION</p>
                        <div>
                            <!-- menu element declaration-->
                            <ul> @Html.EJS().Menu("main-menubar").Items(ViewBag.menuItems).Orientation(Syncfusion.EJ2.Navigations.Orientation.Vertical).Select("selected").CssClass("~/css/SideBarCSS.css")</ul>

                        </div>
                    </div>
                </div>

                <div class="action">
                    <p class="main-menu-header">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;CONTACT</p>
                    <button class="e-btn action-btn" id="action-button">GO</button>
                </div>
                <!-- end of normal state element declaration -->
            </div>
            <!-- end of sidebar element -->

<div class="main-content" id="maintext">
                <div class="content">
                    <div>

                        @RenderBody()
                        @Html.EJS().ScriptManager()
                        @RenderSection("scripts", required: false)
                    </div>
                </div>
             </div>

code 

 public ActionResult Index()
        {
            GetCredentials();
            SetupUiElements();

            List<MenuItem> menuItems = new List<MenuItem>(){
            new MenuItem
            {
                Text = "File",
                IconCss = "em-icons e-file",
                Items = new List<MenuItem>()
                {
                    new MenuItem { Text= "Open", IconCss= "em-icons e-open" },
                    new MenuItem { Text= "Save", IconCss= "em-icons e-save" },
                    new MenuItem { Separator= true },
                    new MenuItem { Text= "Exit" }
                }
            },
            new MenuItem
            {
                Text = "Edit",
                IconCss = "em-icons e-edit",
                Items = new List<MenuItem>()
                {
                    new MenuItem { Text= "Cut", IconCss= "em-icons e-cut" },
                    new MenuItem { Text= "Copy", IconCss= "em-icons e-copy" },
                    new MenuItem { Text= "Paste", IconCss= "em-icons e-paste" }
                }
            },
            new MenuItem
            {
                Text = "View",
                Items = new List<MenuItem>()
                {
                    new MenuItem {
                        Text = "Toolbars",
                        Items = new List<MenuItem>()
                        {
                            new MenuItem { Text= "Menu Bar" },
                            new MenuItem { Text= "Bookmarks Toolbar" },
                            new MenuItem { Text= "Customize" }
                        }
                    },
                    new MenuItem {
                        Text = "Zoom",
                        Items = new List<MenuItem>()
                        {
                            new MenuItem { Text= "Zoom In" },
                            new MenuItem { Text= "Zoom Out" },
                            new MenuItem { Text= "Reset" },
                        }
                    },
                    new MenuItem { Text = "Full Screen" }
                }
            },
            new MenuItem
            {
                Text = "Tools",
                Items = new List<MenuItem>()
                {
                    new MenuItem { Text= "Spelling & Grammar" },
                    new MenuItem { Text= "Customize" },
                    new MenuItem { Separator= true },
                    new MenuItem { Text= "Options" }
                }
            },
            new MenuItem { Text = "Help" }
            };

            ViewBag.menuItems = menuItems;
            return View("Main", Ud);









1 Reply 1 reply marked as answer
SP Sowmiya Padmanaban Syncfusion Team August 12, 2020 10:49 AM UTC

Hi Dingo,  
 
Greetings from Syncfusion support. 
 
We have checked your reported issue that Sidebar component is not rendered when using in Layout.cshtml page. We have added this topic in our documentation for adding the Sidebar component in Layout.cshtml page. 
 
Refer the below link. 
 
For your reference, we have prepared a sample to include the Sidebar component in Layout.cshtml page. 
 
Refer the below code snippet. 
 
            @{Html.EJS().Sidebar("sidebar-menu").Width("220px").Target(".main-content").EnableDock(true).DockSize("50px").ContentTemplate(@<div class="dock-menu"> 
            <!-- normal state element declaration --> 
            <div class="main-menu"> 
                <p class="main-menu-header">MAIN</p> 
                <div> 
                    <!-- menu element declaration--> 
                    @Html.EJS().Menu("main-menubar").Items(ViewBag.mainMenuItems).Orientation(Syncfusion.EJ2.Navigations.Orientation.Vertical).CssClass("dock-menu").Render() 
                </div> 
            </div> 
            <div class="action"> 
                <p class="main-menu-header">ACTION</p> 
                <button class="e-btn action-btn" id="action-button">+ Button</button> 
            </div> 
            <!-- end of normal state element declaration --> 
        </div>).Render();} 
            <div class="main-content" id="maintext"> 
                <div class="container body-content"> 
                    @RenderBody()  
                </div> 
            </div> 
 
 
Refer the below links to know more about the Sidebar component. 
 
 
 
 
Please let us know, if you need any further assistance. 
 
Regards, 
Sowmiya.P 


Marked as answer
Loader.
Up arrow icon