asked on March 11, 2021
Hello,
On load customizeCellFunction for over 3 times per cells that it effects.
in the below example I only want to target total cells that isn't grand total (data && data.type === 'value' && data.isTotal && !data.isGrandTotal) when the customizeCellFunction it is excited 153 times with in a short period even thouge there is only 48 total cells that is not grand total:
https://jsfiddle.net/zk0a6rdp/
Is there a way to minimize the amount of times this is called, as my bowser is unresponsive for some time when using "cell.text" with in customizeCellFunction.
Jimmy
⋅ March 12, 2021
Hello, Jimmy,
Thank you for contacting us.
We would like to explain that the customizeCell function will be executed for each rendered cell several times. It is required to adjust proper cells' dimensions and to complete rendering.
However, we want to draw your attention to the fact that this function is highly optimized and does not make the browser freeze. The reason you experience this behavior is the environment used to reproduce the issue. JSFiddle itself needs some time to load and render the dataset representation (up to 10k strings). Also, it uses a low-efficient custom console, that slows down the whole process.
We have prepared another JSFiddle that uses a remote dataset (no need to render 10k strings in the editor) and print number on the page instead of logging it to the console.
The dataset size is even bigger than the one used in your example. Moreover, all the fields are displayed and expanded.
Still, the browser does not freeze.
Please let us know if it helps.
We are looking forward to hearing from you.
Kind regards,
Illia
⋅ March 16, 2021
Hello Illia,
Our Flexmonster is displayed in an Iframe in Powerbi.
We have the following code:
this._pivot.customizeCell((cell, data) => {
if (!_.isEmpty(data) && !data.isTotal && data.type === 'value') {
const cellnumber = `${data.rowIndex}-${data.columnIndex}`;
if (_.has(this._cellState, cellnumber)) {
cell.addClass(this._cellState[cellnumber]);
}
cell.addClass('editable');
cell.text = `<input type='text' value='${data.label}' tabindex='-1' autocomplete='off' onchange='handleChange(event)'>`;
}
});
As soon as we changed it to the following the browser started with not responding:
this._pivot.customizeCell((cell, data) => {
if (!_.isEmpty(data) && !data.isTotal && data.type === 'value') {
const cellnumber = `${data.rowIndex}-${data.columnIndex}`;
if (_.has(this._cellState, cellnumber)) {
cell.addClass(this._cellState[cellnumber]);
}
cell.addClass('editable');
cell.text = `<input type='text' value='${data.label}' tabindex='-1' autocomplete='off' onchange='handleChange(event)'>`;
} else if (data.isTotal && !data.isGrandTotal) {
cell.addClass('editable');
cell.text = `<input type='text' value='${data.label}' tabindex='-1' autocomplete='off' onchange='handleChange(event)'>`;
}
});
⋅ March 16, 2021
Hello,
Thank you for your feedback.
We would like to explain that we did not manage to reproduce the problem on our side.
We have modified the JSFiddle provided earlier so that it uses your customizeCell function: https://jsfiddle.net/flexmonster/fedauxbr/.
Please modify the JSFiddle so that the issue is reproducible.
In case the issue cannot be reproduced using JSFiddle for some reason, please prepare the corresponding example in a convenient format.
Our team is looking forward to hearing from you.
Regards,
Illia