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: November 16, 2018).
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.

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