🍉 Meet Flexmonster Pivot Table & Charts 2.9.Check out all hot features!
Get Free Trial

Looks like customizeCell doesn't work with flat mode

Answered
bernard dradeou 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 ?

7 answers

Public
Illia Yatsyshyn Illia Yatsyshyn Flexmonster 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

Public
bernard dradeou 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
 
 

Public
Illia Yatsyshyn Illia Yatsyshyn Flexmonster 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

Public
bernard dradeou 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

Public
Illia Yatsyshyn Illia Yatsyshyn Flexmonster 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

Public
Illia Yatsyshyn Illia Yatsyshyn Flexmonster 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

Public
Illia Yatsyshyn Illia Yatsyshyn Flexmonster 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

Please login or Register to Submit Answer