Responsive Layout of Dashboard with Sidebar

[Muhammad Tassadaque Zia]

Dear Team,

I am trying to make use dashboard layout with sidebar. but dashboard is not responsive and slide away. Demo project is attached. 

[Muhammad Tassadaque Zia]

Attacment

Attachment: DashboardwithSideBar_5ba9c0a1.zip

[Sowmiya Padmanaban]

Hi Muhammad,  

 

We have checked your checked your reported problem using your attached sample, that Sidebar closes when dragging the DashboardLayout panels. Your reported problem might have occurred due to the enable gestures functionality in the Sidebar component. By default, when enableGestures will be in enabled state, and we click and dragging the elements of main content of the Sidebar, it will trigger the close event of the Sidebar. This functionality can be disabled in the Sidebar by setting enableGestures property as false.  

 

Refer the below KB for enableGestures property. 

 

https://www.syncfusion.com/kb/10491/how-to-disable-expand-or-collapse-on-swiping-in-the-sidebar-container 

 

Your reported issue will resolve by setting enableGestures as false. Refer the below code snippet. 

 

<ejs-sidebar id="sidebar-treeview" width="240px" target=".main-content" created="onCreate" enableGestures="false"> 

        <e-content-template> 

        </e-content-template> 

    </ejs-sidebar> 

 

Refer the modified sample link: 

https://www.syncfusion.com/downloads/support/directtrac/general/ze/demo-838498343.zip 

 

Refer the below links to know more about the Sidebar component. 

 

UG Documentation – https://ej2.syncfusion.com/aspnetcore/documentation/sidebar/getting-started/ 

 

Demo link – https://ej2.syncfusion.com/aspnetcore/Sidebar/DefaultFunctionalities#/material 

 

API reference – https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Navigations.Sidebar.html#Syncfusion_EJ2_Navigations_Sidebar_ShowBackdrop 

 

Please let us know, if you need any further assistance on this. 

 

 

Regards,  

Sowmiya.P 

[Muhammad Tassadaque Zia]

let me explain my issue again. My issue is with dashboard layout it is not fitting the screen if sidebar is open. It is similar to the issue explain here in below link for angular

https://www.syncfusion.com/forums/150293/dashboard-layout-resize-while-parent-div-resizeresponsive

[Sowmiya Padmanaban]

Hi Muhammad , 

 

We have checked with your query on EJ2 Dashboard Layout component. For your information, Dashboard Layout will render based on the dimensions (height and width) of its parent element   

 

Also, the height and width will be calculated and applied to each panels of Dashboard Layout component based on the parent element’s dimension. 

 

When you expand the Sidebar component, the Sidebar pushes its main content and shrinks the main container’s elements which has default height and width (100%), and scrollbar will be added for the content which has static height and width. Therefore, the Dashboard Layout does not fit into screen dimension. 

 

To overcome this problem, you need to update the width of the parent element of Dashboard Layout component, whenever the Sidebar is expanded/collapsed. 

 

Refer the below code snippet to set the width of the parent element using open and change event of Sidebar component. 

 

  <ejs-sidebar id="sidebar-treeview" width="240px" target=".main-content" created="onCreate" open="open" change="change" enableGestures="false"> 

        <e-content-template> 

        </e-content-template> 

    </ejs-sidebar>   

 function open() { 

                var dashboard = document.getElementById("dashboard_layout").ej2_instances[0]; 

                var parentElement= document.getElementById("evolayoutdiv"); 

                // 290 px is the width of the sidebar element. 

                parentElement.style.width = "calc(100% - 240px)"; 

                dashboard.refresh(); 

            } 

 

            function change(args) { 

                if (args.element.classList.contains("e-close")) { 

                    var dashboard = document.getElementById("dashboard_layout").ej2_instances[0]; 

                    var parentElement = document.getElementById("evolayoutdiv"); 

                    parentElement.style.width = "100%"; 

                    dashboard.refresh(); 

                } 

            } 

 

 

Refer the modified sample link below.  

https://www.syncfusion.com/downloads/support/directtrac/general/ze/demo278243545.zip 

 

Also, if you render EJ2 component inside the DashboardLayout panel content (Chart, Grid). In this case, you need to refresh the content component in the created event of DashboardLayout component. 

 

Please let us know, if you need any further assistance. 

 

 

Regards,  

Sowmiya.P 

[Muhammad Tassadaque Zia]

Thank you very much for the solution. but one problem arise after this functions. If I navigate to other pages of app then it give me following javascript  error as dashboard element is not found on other pages. One option is to check availability of element. but is there a way to bind event only in case of dashboard page not on other. To reproduce you can use following url on above sample attached by you

https://localhost:44302/hcm/om/2/Positions

[Shameer Ali Baig Sulaiman Ali Baig]

Hi Muhammad, 

 

We have checked your reported problem with the shared sample application. The reported issue occurs because you have used Default.cshtml file in shared folder which will be shared commonly to all the pages of this application.  

 

In that file, we have tried to get the dashboard instance (document.getElementById("dashboard_layout").ej2_instances[0]). If Dashboard Layout element available in navigated page with the same id, then we will get the Dashboard Layout’s instance. But if the navigated do not have Dashboard Layout then your reported issue will occur. 

 

To resolve that issue, we can check whether that element is available in the navigated page to avoid this error like depicted in the following code sample. 

 

[Default.cshtml] 

<link rel="stylesheet" rel='nofollow' href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> 

@{await Html.RenderPartialAsync("TopBar");} 

    <ejs-sidebar id="sidebar-treeview" width="240px" target=".main-content" created="onCreate" open="open" change="change" enableGestures="false"> 

        <e-content-template> 

            <div class="main-menu flex-fill" style="overflow-x:hidden !important; margin-top:40px"> 

                @{await Html.RenderPartialAsync("AppBar");} 

                <div> 

                    <ejs-treeview id="main-treeview" expandOn="Click" enablePersistence=true sortOrder="Ascending"> 

                        <e-treeview-fields dataSource="ViewBag.dataSource" id="nodeId" NavigateUrl="nodeURL" text="nodeText" hasChildren="hasChild"  iconCss="iconCss"></e-treeview-fields> 

                    </ejs-treeview> 

                </div> 

            </div> 

        </e-content-template> 

    </ejs-sidebar> 

    <div> 

        <script> 

            function onCreate() { 

                //var obj = document.getElementById("sidebar-treeview").ej2_instances[0]; 

                //obj.mediaQuery = window.matchMedia('(min-width: 600px)'); 

            } 

            document.addEventListener('DOMContentLoaded', function () { 

                var sidebarTreeview = document.getElementById("sidebar-treeview").ej2_instances[0]; 

                // Toggle the Sidebar 

                document.getElementById('hamburger').onclick = function () { 

                    sidebarTreeview.toggle(); 

                } 

 

            }); 

            function open() { 

                if (document.getElementById("dashboard_layout") != null) { 

                     var dashboard = document.getElementById("dashboard_layout").ej2_instances[0]; 

                var parentElement = document.getElementById("evolayoutdiv"); 

                // 290 px is the width of the sidebar element. 

                parentElement.style.width = "calc(100% - 240px)"; 

                dashboard.refresh(); 

                }                

            } 

 

            function change(args) { 

                if (args.element.classList.contains("e-close") && document.getElementById("dashboard_layout") != null) { 

                    var dashboard = document.getElementById("dashboard_layout").ej2_instances[0]; 

                    var parentElement = document.getElementById("evolayoutdiv"); 

                    parentElement.style.width = "100%"; 

                    dashboard.refresh(); 

                } 

            } 

        </script> 

    </div> 

 

 

 

Please, get back to us if you need any further assistance on this regard. 

 

Regards 

Shameer Ali Baig S.