asked on June 27, 2023
Hello,
I am using the Pivot Grid in a Blazor WASM application and want to customize the toolbar where I want to remove some of the toolbar buttons. I saw your javascript sample where you can override the ToolbarCreated event for such cases but I am unable to hook up this event in Blazor WASM. It doesn't seem like it's supported. I also noticed there are few other events that are not supported, e.g. customizeCell. Is that correct? If so, is there is a workaround in Blazor WASM for handling such events?
Thank you,
Rushi
⋅ June 27, 2023
Hello, Rushi!
Thank you for your question.
Kindly note that it is possible to access the Flexmonster component from JavaScript using the JavaScriptHandler property. This allows using methods and events that are not available in the Blazor wrapper out of the box.
The following guide describes in detail how to customize the Toolbar using JavaScriptHandler: https://www.flexmonster.com/doc/access-features-via-js-blazor/.
Hope you will find our answer helpful.
Please let us know if you have any further questions.
Kind regards,
Solomiia
⋅ June 27, 2023
Hi Solomiia,
I tried your suggested approach and while the code calls the handler but doesn't seem to connect the actual event to my code. Maybe, I am missing something.
Here's what I did:
My .razor code:
<FlexmonsterComponent @ref="FlexPivot" Report="@report"
Toolbar="true"
LicenseKey="[KEY]"
Width="100%"
Height="750px"
JavaScriptHandler="PivotHandler">
</FlexmonsterComponent>
My JavaScript code:
window.PivotHandler = (flexmonsterObject) => {
//flexmonsterObject.on("beforetoolbarcreated", reconfigureToolbar);
console.log("Inside Handler");
flexmonsterObject.onbeforetoolbarcreated = function (toolbar) {
console.log("Inside event");
reconfigureToolbar(toolbar);
}
}
async function reconfigureToolbar(toolbar) {
let tabs = toolbar.getTabs();
toolbar.getTabs = function () {
tabs = tabs.filter(tab => tab.id != "fm-tab-connect");
tabs = tabs.filter(tab => tab.id != "fm-tab-open");
tabs = tabs.filter(tab => tab.id != "fm-tab-save");
tabs = tabs.filter(tab => tab.id != "fm-tab-fullscreen");
}
}
When I check my console output, I see "Inside Handler" but I don't see "Inside event" logged. I also tried the commented line as well but no success.
Thank you,
Rushi
⋅ June 27, 2023
Hi Solomiia,
The code is working fine now. It may have been a cached version of JS. I will do some more testing and get back to you if I see any issues.
I really appreciate your quick response.
Thanks,
Rushi
⋅ June 28, 2023
Hello, Rushi!
Thank you for your feedback.
We are glad to hear that everything works fine now.
Feel free to contact us in case of any other questions.
Kind regards,
Solomiia