)
We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to add navigation panel into dashboard to fit/adjust using JavaScript API

Platform: Dashboard Platform |
Control: Dashboard SDK |
Published Date: January 18, 2018 |
Last Revised Date: May 7, 2019

Adding the navigation panel in dashboard to fit/adjust using JavaScript API

 

The following are the steps to add a navigation panel in the dashboard to adjust on its own when the panel get opened/hidden in the dashboard:

 

Find the code snippet in an HTML application for resizing the dashboard when the navigation bar appears.

  

 
$("body").on("click", ".shownav", function (event) {  //Event to click on the Navigation button   
                  var dashboardObj = $("#dashboard").data("ejDashboardViewer");  //create the instance of the dashboard   
        if ($("#nav-bar").css('display') == 'none') {  // check whether the navigation bar is hidden   
                  $('#dashboard').css({ 'width': '80%', 'float': 'right' }); //set the width of the dashboard   
                  $('#nav-bar').show();  // if navigation bar is hidden show the navigation bar   
                  $('#nav-bar').css({ 'width': '20%' }); //set the width of the navigation bar   
        }   
        else {   
                 $("#dashboard").css({ 'width': '100%' }); //set the width of the dashboard to 100%   
                 $('#nav-bar').hide();   // Hide the navigation bar   
        }   
        dashboardObj.resizeDashboard();  //call the resizeDashboard method using the instance of the dashboard   
    });   

  

Click here, to refer the sample for illustrating the same.

 

The following screenshot illustrates when the navigation panel has been closed/hidden in the dashboard:

 

Navigation Panel closed Dashboard

The following screenshot illustrates when the navigation panel has been opened in the dashboard:

A screenshot of a cell phone

Description generated with very high confidence

ADD COMMENT
You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon