How to add Toolbar programatically

Hello, Bilguun,
 
Thank you for writing to us.
 
We would like to explain that the Toolbar needs to be initially enabled (toolbar:true) to be able to display it later.
 
For showing the Toolbar programmatically, we kindly recommend the following approach:

1. Set the toolbar Flexmonster property to true:

   var pivot = new Flexmonster({
      ...
      toolbar: true,
      ...
   });

2. Add CSS to hide the Toolbar by default:

   #fm-toolbar-wrapper {
     display: none;
   }

   This will provide a smoother behavior when the Toolbar is toggled at Flexmonster's initialization.

3. Add a variable (flag) to control the Toolbar's visibility:

   var itemIsToolbarHidden = true;

4. Using Flexmonster's ready event, show or leave the Toolbar hidden depending on the flag's value:

   var pivot = new Flexmonster({
      ...
      toolbar: true,
      ...
      ready: adjustToolbarVisibility
   });
   
   
   function adjustToolbarVisibil​ity(){
      if (!itemIsToolbarHidden) {
         $('#fm-toolbar-wrapper').css({
            display: "block"
         });
         pivot.refresh();
      }
   }

 
We have prepared a JSFiddle example for illustration: https://jsfiddle.net/flexmonster/f6dzsvu9/
 
In addition, a button could be added to toggle the Toolbar from the UI as well: https://jsfiddle.net/flexmonster/9c2yzthd/
 
We hope this helps.
Please let us know if this works.
 
Kind regards,
Vera

Hello, Bilguun,
 
Thank you for your response.
 
We would like to confirm that you can pass the needed parameters to your function (in our case, adjustToolbarVisibility() ).
In addition, it is possible to toggle the Toolbar visibility via the pivot instance using the reportcomplete event, for example:

var pivot1 = new Flexmonster({
  ...

  toolbar: true,
  ...
  reportcomplete: function() {
     adjustToolbarVisibility(pivot1, false);
  }
});


function adjustToolbarVisibility(pivot, isVisible) {
   pivot.toolbar.toolbarWrapper.style.display = isVisible ? "block" : "none";
}

Here is a JSFiddle example for illustration: https://jsfiddle.net/flexmonster/xm3s75b2/
 
Hope this helps.
Please let us know if everything works.
 
Kind regards,
Vera