asked on April 28, 2021
I can use the method customizeCell as long as my report is not flat. When i make my report flat then customizeCell doesn't work anymore
Why is that ?
⋅ April 28, 2021
Hello, Bernard,
Thank you for contacting us.
Could you please provide us with an example that would demonstrate this behavior?
We suggest modifying the JSFiddle template to reproduce the issue: Alternating row colors - JSFiddle - Code Playground.
Our team is looking forward to hearing from you.
Regards,
Illia
⋅ April 29, 2021
First get some data with runquery(...). It works i get data on the screen
THEN
this.pivot.flexmonster.setOptions({grid: {type: 'flat', showGrandTotals: 'off', showTotals: false}});
this.pivot.flexmonster.customizeCell((cell, data) => { if (data.rowIndex % 2 == 1) {
cell.addClass("alter1");
}
else {
cell.addClass("alter2");
}})
I have the feeling that the style is applied for a microsecond then suddenly disappears
⋅ April 29, 2021
Hello,
Thank you for the details. Still, we did not manage to reproduce it on our side.
Do you think you could modify the mentioned JSFiddle to demonstrate the issue? All you need is to apply changes to the code and press "Save" button on the Toolbar. Finally, share the updated URL so that we can analyze the behavior on our side.
Another option is to provide us with a sample object demonstrating the issue if it is more convenient for your case.
Looking forward to hearing from you.
Regards,
Illia
⋅ April 30, 2021
I don't know where to put my code
this.pivot.flexmonster.setOptions({grid: {type: ‘flat’, showGrandTotals: ‘off’, showTotals: false}});
this.pivot.flexmonster.customizeCell((cell, data) => { if (data.rowIndex % 2 == 1) {
cell.addClass(“alter1”);
}
else {
cell.addClass(“alter2”);
}})
into your sample
let pivot = new Flexmonster({
container: "pivot-container",
componentFolder: "https://cdn.flexmonster.com/",
toolbar: true,
customizeCell: customizeCellFunction,
report: {
"dataSource": {
"filename": "data/data.json"
},
options: {
grid: {
type: "flat"
}
}
}
});
function customizeCellFunction(cell, data) {
if (data.rowIndex % 2 == 1) {
cell.addClass("alter1");
} else {
cell.addClass("alter2");
}
}
I can't give you my app, it is a huge angular app with many dependencies.
I think it works when using declarative code like in your sample and doesn't work when using programmatic code like me
I am gonna try to create a small angular sample app for you
⋅ April 30, 2021
Hello, Bernard,
We have updated the JSFiddle so that it calls the customizeCell method instead of declaring a function in the constructor:
flexmonster.customizeCell((cell, data) => {
if (data.rowIndex % 2 == 1) {
cell.addClass("alter1");
} else {
cell.addClass("alter2");
}
});
Still, the issue is not reproducible. Also, we have tried the same approach in a sample Angular object. The behavior remains correct as well.
Please note that this specific function provided earlier is based on "alter1" and "alter2" classes with appropriate CSS rules:
#fm-pivot-view .fm-grid-view div.fm-cell.alter1 {
background-color: #f7f7f7 !important;
}
#fm-pivot-view .fm-grid-view div.fm-cell.alter2 {
background-color: #fcfcfc !important;
}
You may need to add these rules to your project in order to see the change.
Another approach is to customize the function itself to make changes visible. For example, try replacing cells' text with some string:
flexmonster.customizeCell((cell, data) => {
cell.text = "If you see this, customization is ";
});
Still, it would be really helpful for our research to get the mentioned Angular project where the issue can be reproduced.
We are looking forward to hearing from you.
Regards,
Illia
⋅ May 5, 2021
Hello,
We are wondering if you had some time to prepare the mentioned example.
Looking forward to hearing from you.
Regards,
Illia
⋅ May 12, 2021
Hello, Bernard,
We want to ask if the issue still persists. If so, do you think you could provide us with the mentioned example so that we could investigate it on our side?
Regards,
Illia