Hi team,
i am using two columns to calculate diff and storing it as a new diff column.
Problem here is i am using customizeCell to style my cells based on some values or highlighting its background.
As calculated measure doesnt exist in dataset as rule , i am unable to get it in customizecell . How can i get it in customize to style the same way other cells are styled.
below is my code
[
{
uniqueName: "diffNP",
formula: "sum('parameters_theoNP') - sum('parameters_actualNP')",
caption: "diffNP",
format: 'total'
},
{
uniqueName: "diffNPAbs",
formula: "ABS(sum('parameters_theoNP') - sum('parameters_actualNP'))",
caption: "diffNPAbs",
format: 'total'
}]
Hello,
Thank you for contacting us.
By default, calculated values are treated as any other values in the customizeCell function. Could you please provide us with more details on how you style the cells in the customizeCell function? It would greatly assist us in continuing our investigation.
Looking forward to hearing from you.
Kind regards,
Nadia
This is my customizeCellFunction , also can help me in optimizing it
customizeCellFunctionCallback(cell: CellBuilder, data: any): void {
try {
cell.attr["title"] = data.label;
if(data.hierarchy.uniqueName == 'parameters_manualActivity') {
cell[`${data.rowIndex}${this.totalManualActivityIndex}`] = data.label
}
const totalManualActivityPortfolios = cell[`${data.rowIndex}${this.totalManualActivityIndex}`] || 0;
// Add hierarchy-based highlight logic - check if this row should be highlighted
const currentHierarchyPath = this.buildHierarchyPath(data);
const isHighlightedRow = this.highlightedHierarchy !== '' &&
currentHierarchyPath === this.highlightedHierarchy;
if (data.columnIndex > 1 && data.hierarchy.uniqueName != "parameters_monitor") {
// Apply CSS classes instead of inline styles
if (!isNaN(Number(totalManualActivityPortfolios)) && Number(totalManualActivityPortfolios) >= 1) {
// Apply green background class for rows with manual activity
cell.addClass('cell-manual-activity');
if (isHighlightedRow) {
cell.addClass('cell-highlighted-manual-activity');
}
}
else {
// Apply alternating row color classes for zebra striping
if (data.rowIndex % 2 === 0) {
// Even rows - light gray
cell.addClass('cell-row-even');
} else {
// Odd rows - slightly darker
cell.addClass('cell-row-odd');
}
// Add highlight class if this row is selected
if (isHighlightedRow) {
cell.addClass('cell-highlighted');
}
}
} else if (isHighlightedRow) {
// Apply highlighting even for first columns if the row is selected
cell.addClass('cell-highlighted');
}
if (data.measure && data.type != 'header' &&
data.measure.uniqueName == "parameters_manualActivity"
) {
if (typeof data.value == 'number' && data.rows) {
delete data.value;
let summary: string = '';
data.rows.forEach((r: any) => {
if (summary) {
summary = summary + '>' + r.caption;
} else {
summary = r.caption;
}
})
data.value = summary;
}
// onchange="window.positionViewComponent?.handleCheckboxChange();"
const customizeCellValid = this.strategyAccessValidator(cell, data);
cell.text = !customizeCellValid ? '' : `
<label class="custom-checkbox-container" onclick="event.stopPropagation();" onmouseenter="window.positionViewComponent?.handleMouseEnter('${data.value}')"
onmouseleave="window.positionViewComponent?.handleMouseMovement('${data.value}')">
<input type="checkbox"
onclick="event.stopPropagation(); window.positionViewComponent?.handleCheckboxChange('${data.value}', ${data.rowIndex}, event);"
name="fm-checkbox"
value="${data.value}-Strategy"
${this.tableControl.checkedFields[data.value + '-Strategy'] ? 'checked' : ''}>
<span class="checkmark" onclick="event.stopPropagation();"></span>
</label>;
// Apply CSS class instead of inline z-index
cell.addClass('cell-checkbox-container');
}
if (
data &&
data.hierarchy &&
data.hierarchy.uniqueName == "parameters_initialized" &&
data.type === 'value'
) {
let totalPortfolios = 0;
if (Array.isArray(data.recordId)) {
totalPortfolios = data.recordId.length;
}
const val = data.value >= 1 ? data.value : 0;
const initializedPercentage = (val / totalPortfolios) * 100;
const roundedInitializedPercentage = Math.floor(initializedPercentage);
// Use CSS class with CSS custom properties for dynamic width
cell.text = <div class="progress-bar" style="--progress-width: ${initializedPercentage}%">${roundedInitializedPercentage}% (${val}/${totalPortfolios})</div>`;
}
// Apply row highlighting to ALL cells in the highlighted row (universal highlighting)
if (isHighlightedRow) {
// Always add highlighting class for any cell in the highlighted row
cell.addClass('cell-highlighted');
}
} catch (error) {
console.log('Something went wrong while customizing cell', error)
}
}
Hello,
Thank you for sharing the details.
We suppose that the highlighting logic is based on the raw data that you load into Flexmonster. However, calculated measures are only available within the pivot, after Flexmonster has processed the dataset. Therefore, we recommend considering switching the highlighting logic based on data in the pivot.
To highlight the specific data, you can use one of the following approaches:
customizeCell function:customizeCell function:Please let us know if it works for you.
Kind regards,
Nadia