asked on February 13, 2023
Hello,
I wanted to customize the appearance of Row, Column and Filter header fields inside the grid in order to apply a custom tooltip for each of them. I've tried to look up the current API and I haven't found anything suitable for this purpose.
There is a `customizeCell` function, but it can only target cells and not header itself. What are my options in order to accomplish this? Of course I've added a simple image which will explain the problem a little bi more.
Best regards
⋅ February 14, 2023
Hello, Gerd,
Thank you for reaching out to us.
It is correct that the customizeCell function does not allow changing the cells with the fields names.
However, we suggest using the workaround. It is possible to customize the tooltips on all the filter cells using localization. For example:
global: {
localization: {
"tooltips": {
"filterIcon": "Custom tooltip",
}
}
}
You are welcome to check the following JSFiddle for reference: https://jsfiddle.net/flexmonster/1w4t98zm/
We hope it helps. You are welcome to write to us in case further questions arise.
Kind regards,
Nadia
⋅ February 16, 2023
Hello Nadia,
Thank you for your input. I'm afraid the provided solution won't be sufficient for our use case, let me explain further. Essentially we want to display currently filtered values in the tooltips and in order to accomplish that we would need a context of the header we hover at (similar to how customizeCell is handling that), which your solution does not cover.
Do you have any more ideas, how we could approach our problem? I'll be fine even If it would require some hacking outside of regular grid API. If its not possible tough - I would kindly ask for such functionality in the future releases.
⋅ February 17, 2023
Hello, Gerd,
Thank you for the response and for providing the details.
Now that we understand your use case, we suggest the workaround using the aftergriddraw event and the getFilter API call. On the aftergriddraw event, you can get the DOM elements of the necessary header cells. Then you can get filters by the fields name from the textContent property of the received elements using the getFilter. Now you can change the tooltips:
flexmonster.on("ready", function() {
flexmonster.on('aftergriddraw', setTooltip);
});
function setTooltip() {
let elements = document.querySelectorAll(".fm-filter-header");
for (let el of elements) {
// get filter by filter name
let filter = flexmonster.getFilter(el.textContent);
if (filter) {
// set the tooltip
el.title = JSON.stringify(filter);
}
}
}
Feel free to check the following JSFiddle for reference: https://jsfiddle.net/flexmonster/qzx6v4m8/. You are welcome to customize it for your needs.
Please let us know if it works for you. Looking forward to hearing from you.
Kind regards,
Nadia
⋅ March 14, 2023
Hello, Gerd!
Hope you are doing well.
We are wondering if you had time to check the proposed solution.
Please let us know if it worked for you.
Best Regards,
Maksym
⋅ March 15, 2023
Hello Maksym,
Sorry for a late response, but yes, your solution was sufficient in order to accomplish what I needed, of course I had to make some specific changes here and there to meet my specific use case, but the general usage of `aftergriddraw` event and targeting the `.fm-filter-header` class was enough. Thanks a lot for a quick response.
Best regards,
⋅ March 15, 2023
Hello, Gerd!
Thank you for your reply.
We are glad to hear that the proposed solution worked for you.
Feel free to contact us if any other questions arise.
Best Regards,
Maksym