asked on July 6, 2023
Hello team,
We use FlexmonsterComponent in our Blazor WebAssembly application. We need to create a report with custom cell values. I've checked your demo at https://jsfiddle.net/flexmonster/60wv9rgk/, but do not see how to implement it for Blazor FlexmonsterComponent. I would expect this feature to be implemented in managed c# code rather that in pure js.
Anyway, we have a report with some values for different dates. And we need to compare values from the very first column with all the other columns, and display their relative value (see attached picture).
Can you please help me to achieve this.
Thank you.
⋅ July 7, 2023
Hello, Anton!
Thank you for reaching out to us.
Kindly note that it is possible to use customizeCell while integrating with Blazor using the JavaScriptHandler property.
You can use the customizeCell in a new JavaScript function as follows:
window.YourJavaScriptHandler = (flexmonsterObject) => {
flexmonsterObject.customizeCell = function(cell, data) {
//customize cell functionality here
};
}
And then define this function in Blazor:
<FlexmonsterComponent Report="@report"
JavaScriptHandler="YourJavaScriptHandler"/>
You are welcome to read the step-to-step guide which describes this approach: https://www.flexmonster.com/doc/access-features-via-js-blazor/.
We have also prepared a JSFiddle example showing the desired data output: https://jsfiddle.net/flexmonster/Ldtyujco/.
Here we have used the beforetoolbarcreated event to extract the values of the column with the current date. After that, we used the customizeCell() API call to add the percentage and highlighting styles.
Hope you will find our answer helpful.
Kind regards,
Solomiia
⋅ July 7, 2023
Hello Solomiia,
Thank you for a quick reply!
Actually, before asking a question here, I first tried to solve it myself, in a very similar way.
My code looks like this:
window.YourJavaScriptHandler = (pivot) => {
pivot.on("beforetoolbarcreated", customizeToolbarHandler);
pivot.on("customizeCell", customizeCell); //one way
pivot.on("beforegriddraw", getCurrentData);
pivot.customizeCell = function (cell, data) { //another way
console.log("This customizeCell is never called")
};
}
The problem is "customizeCell" event is never called.
Another issue (with your example) is that I cannot call "pivot.getData" within getCurrentData method, because I do not have "pivot" here. I have a reference for a particular "pivot" object only in JavaScriptHandler of FlexmonsterComponent. But when I register event handlers here, like
pivot.on("beforegriddraw", getCurrentData);
you do not pass "pivot" object into the handler as a parameter. One workaround can be to register pivot as global object within JavaScriptHandler,
window.YourJavaScriptHandler = (pivot) => {
//...
window.pivot = pivot;
}
but it does not seem to be a good solution, as I may have several pivots on the same page.
Please advise.
⋅ July 10, 2023
Hello, Anton!
Thank you for your swift response.
Kindly note that the customizeCell() is a function, not an event, so it should be called as other Flexmonster's API calls.
There was a slight inaccuracy in our previous snippet. The correct way is to pass the handler function inside the customizeCell() function:
pivot.customizeCell((cell, data)=> {
//customizing functionality here
});
Please note that inside the JavaScriptHandler, you can use the same syntax as in our JSFiddle samples as a reference.
Regarding your second question, "I cannot call "pivot.getData" within the getCurrentData method, because I do not have "pivot" here," the getCurrentData with a pivot reference can be passed to the beforegriddraw event handler as follows:
pivot.on("beforegriddraw", () => {
getCurrentData(pivot);
});
This way, the reference would be correct even using multiple pivots on the page.
So, the resulting code snippet looks as follows:
window.JavaScriptHandler = (pivot) => {
pivot.customizeCell ((cell, data)=> {
console.log(data.type);
});
pivot.on("beforegriddraw", () => {
getCurrentData(pivot);
});
}
function getCurrentData(pivot) {
// extracting data functionality here
}
Hope you will find our answer helpful.
Feel free to contact us if any other questions arise.
Kind regards,
Solomiia
⋅ July 12, 2023
Hello Solomiia,
Thank you a lot for an update. Everything works as expected.
Please, feel free to close the ticket.
⋅ July 13, 2023
Hello, Anton!
Thank you for your feedback.
Our team is glad to hear the suggested solution works for your case.
Feel free to reach out to us in case of any other questions.
Kind regards,
Solomiia