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 dashboard in navigation panel to fit/adjust using JavaScript API

How to add 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:

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

Article ID: Published Date: Last Revised Date: Platform: Control:
8323 01/18/2018 01/18/2018 Dashboard Platform Dashboard SDK
Did you find this information helpful?
Add Comment
You must log in to leave a comment

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