Despite the COVID-19 outbreak, our team continues operating at full speed. We are always here to support and answer all your questions.

Feel free to reach out by filling this quick form.

Fill the form
Get Free Trial

How to add Toolbar programatically

Answered
Bilguun asked on April 2, 2020

Hello dear flex team
I need add toolbar something like 
new Flexmonster({
container: “#pivot-container”,
componentFolder: “https://cdn.flexmonster.com/”,
width: “100%”,
height: 550,
customizeCell: customizeCell,
toolbar: itemIsToolbarHidden == true ? true : false
})
 
or 
 
var pivot = new Flexmonster({
container: “#pivot-container”,
componentFolder: “https://cdn.flexmonster.com/”,
width: “100%”,
height: 550,
customizeCell: customizeCell,
toolbar: false
})
 
pivot.toolbar = {}
how to do that?

4 answers

Public
Vera Didenko Flexmonster April 2, 2020

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

Public
Bilguun April 3, 2020

Thank you Vera i have another question in my case we are generate multiple pivot tables and
adjustToolbarVisibility function can have parameters? 
I need something like this

function visibility(pivot, guid, isHiddenMenu){
if (!itemIsToolbarHidden) {
$(`#${guid} #fm-toolbar-wrapper`).css({
display: "block"
});
pivot.refresh();
}
}

Public
Vera Didenko Flexmonster April 3, 2020

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

Public
Bilguun April 3, 2020

Ohhh that would be nice, exactly what i want it Thank you Vera.

Please login or Register to Submit Answer