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.
Unfortunately, activation email could not send to your email. Please try again.

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 Viewer
Did you find this information helpful?
Add Comment
You must log in to leave a comment

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.