asked on October 20, 2022
Hi,
I'm using the customizeCellFunction to change the color of the row depending of the value of a cell. It is working great when I'm using the classic view. But when I change it to the flat form, it's not working. This is the function that I'm using :
function customizeCellFunction(cell, data) {
var currentRow = data.rows[1];
if (currentRow) {
if (data.rows[1].caption == "FEND-OUT") {
cell.addClass("alter");
}
}
}
The variable currentRow is set at "undefined" when the type is at flat when I am debugging the program.
Any suggestions ?
Thank you for your response.
⋅ October 21, 2022
Hello,
Thank you for contacting us.
Kindly note that the data.rows array is expected to be empty on the flat view. We suggest using the following approach to highlight a row in the flat view if it contains a certain member: https://jsfiddle.net/flexmonster/2nv2L752/
Please let us know if it works for you. Feel free to contact us if other questions arise.
Kind regards,
Nadia
⋅ October 21, 2022
Works out great!
Thanks a lot
⋅ October 21, 2022
Hi, Laurier,
Thank you for the quick response.
We are glad to hear that the solution works for you!
As always, feel free to contact us if other questions arise.
Kind regards,
Nadia
⋅ December 2, 2022
Hi,
Regarding your fiddle, I included a css like this :
#fm-pivot-view .fm-grid-view div.fm-cell.alter {
color:#ff0000;
}
...and added this in the customizeCellFunction :
if (smoothDraw == false && data.hierarchy && data.hierarchy.uniqueName == "Country" && data.member && data.member.caption == "France") {
cell.addClass("alter");
}
When I executed the script, I can see each "France" in red for a quick second and then it reappears in black. How can I put that permanently ?
Thank so much for your help
⋅ December 5, 2022
Hello, Laurier,
Thank you for the response.
We recommend using the approach illustrated in the following JSFiddle: https://jsfiddle.net/flexmonster/gc8mbzdn/
Instead of cell.addClass("alter"); please use:
if (!styleTag) {
addStyles = true;
styleTag = document.createElement('style');
}
style = ".fm-grid-layout.fm-flat-view div.fm-cell[data-r='" + data.rowIndex + "']:not(.fm-empty) ";
style += "{ color: #ff0000 !important; }";
styleTag.innerHTML += style;
Please let us know if it works for you. Feel free to contact us if other questions arise.
Kind regards,
Nadia
⋅ December 5, 2022
Hi Nadia,
In your example, it changes the font of the entire row. How can I change the font of the cell only (that is why I used cell.addClass) ?
⋅ December 6, 2022
Hello, Laurier,
Thank you for the response.
To change the cell's font, kindly remove the smoothDraw == false condition. It should look like this:
if (data.hierarchy && data.hierarchy.uniqueName == "Country" && data.member && data.member.caption == "France") {
cell.addClass("alter");
}
You are welcome to check the following JSFiddle: https://jsfiddle.net/flexmonster/kLcvfhyq/
Please let us know if such an approach would work for your case. Looking forward to hearing from you.
Kind regards,
Nadia
⋅ December 6, 2022
Thank you so much, it worked!
⋅ December 7, 2022
Hello, Laurier,
Thank you for the confirmation.
We are glad to hear that it works for you.
Do not hesitate to contact us in case other questions arise.
Kind regards,
Nadia