asked on September 6, 2024
I have fontParam = 20px, // dynamic value basedon button handler.
I need to apply this fontParam to all fields in flexmonster table.
But is not applying for first column or column having filters.
Attached the image for which style is not applied for rest of data is been applied.
Possible solutions for adding class to the column header with filters.
example code, can refer this fiddle https://jsfiddle.net/flexmonster/1354qwh6/ (which country, business type, color) I need to apply font-size (should not set font value directly CSS since dynamic)
#fm-pivot-view .fm-grid-view .custom-class {
font-size: var(--sm) !important;
}
customizeCell(cell,data) => {
if(fontParam) {
cell.addClass('custom-class')
}
}
⋅ September 9, 2024
Hello, Sen!
Thank you for reaching out to us.
Please note that the customizeCell initially designed to only affect data cells, not including filters and header cells. However, you can dynamically set the font size to all grid cells with JS, as is shown in this example: https://jsfiddle.net/flexmonster/rty072d6/
Also, you should reset the font size in the aftergriddraw event handler to avoid the font size being reset to default.
We are looking forward to hearing your feedback.
Best Regards,
Maksym
⋅ September 9, 2024
Thanks for solution Maksym, In my case , i need to apply only for headers.
As in example.
Country
Color Australia Canada France Germany. Below my code
.font-size-xs {font-size: 14px}
.font-size-sm {font-size: 16px}
applyFontSize(cell: any, fontSize: any) {
const fontSizes = [
{range: [0.8, 1], label: "xs", classname: "font-size-xs"},
{range: [1, 1.125], label: "sm", classname: "font-size-sm"},
];
// Apply font size
const selectionclass= this.shadowRoot?.querySelectorAll(".fm-filters .fm-header");
if (fontSize) {
const getFont = fontSizes.find((range: any) => fontSize >= range.range[0] && fontSize <= range.range[1]);
selectionclass?.forEach((elem: any) => {
elem.classList.add(getfont?.classname);
});
cell.addClass(getfont?.classname);
}
}
calling this in
customizeCell: (cell, data) =>
applyFontSize(cell,props?.fontSize)
⋅ September 11, 2024
Hello, Sen!
Thank you for your reply.
For changing the font size for grid headers and member captions at the top, we suggest using two following selectors:
document.querySelectorAll(".fm-filters .fm-header").forEach(el =>
el.style.fontSize = size + "px"
);
document.querySelectorAll("#fm-pivot-view .fm-cols-sheet .fm-cell").forEach(el =>
el.style.fontSize = size + "px"
);
Another important detail about the implementation is that the customizeCell does not work on the filter cells; hence, the fonts should be changed independently. Additionally, you should reset the font size during the aftergriddraw event to prevent it from reverting to the default.
You are welcome to check the modified sample: https://jsfiddle.net/flexmonster/3xro16hc/
Please let us know if this solution works for you.
Best Regards,
Maksym
⋅ September 18, 2024
Hello, Sen!
Hope you are doing well.
I wanted to check if the suggested solution for changing the font size worked for you.
Please let us know if you need further assistance.
Best Regards,
Maksym
⋅ September 19, 2024
Hi Maksym, sorry for delay, You solution worked. Thanks for the support