We have changed our pricing. Flexmonster Software License Agreement was also updated (list of changes)

How to differentiate between expanded second row and first original one in customizeCell

Answered
Nikita asked on December 12, 2024

We need to format cell text to have there specific things and not what flexmonster shows by default, and so we have `customizeCell` function:

    customizecellfunction: function (cell, data, rawdata) {
        var me = this;
        var valcol = data.type == "value" && data.label != "" && !scil.Utils.isNullOrEmpty(data.recordId);
        if ((!data.isGrandTotal && !data.isTotalColumn && valcol)
            || (!data.isGrandTotal && data.isTotalColumn && valcol && data.measure.aggregation == "count")) {
            ...
}
... },

The problem is that it disrupts correct default Flexmonster behavior which is erasing the data from the first row when its expanded and added only to the 2nd row (see the attached screenshot). We just need a way to distinguish between the first row when its not expanded and when it is expanded, and in the latter case erasing the data in the original row (default flexmonster behavior). 

pivot.report.slice.rows = [{ uniqueName: "EntityID" }, { uniqueName: "structureimage" }]

data.expanded is always false. We can check also data.level which will be 0 and 1 for two rows when a row is expanded, but then in the original state the level will be just 0 for all rows and so we would erase all data in the table if we try using it. 

Attachments:
expanded_issue_1.png

7 answers

Public
Maksym Diachenko Maksym Diachenko Flexmonster December 17, 2024

Hello, Nikita!

Thank you for writing to us.

From the provided context, it seems that you have disabled row subtotals with the showTotals option, and want to prevent the customizeCell injecting data in that cell after it is expanded. To identify such cases, you can utilize the specifics of how customizeCell processes the cleared subtotal row - in such cases, the data.label parameter is equal to an empty string (""). By combining this with changing the number formatting for empty values, you can clearly identify the expanded row from other rows, including ones with empty cells.

We have prepared an example that illustrates this approach for distinguishing empty subtotal rows: https://jsfiddle.net/flexmonster/75pte9qj/

As for the data.expanded property being false, please note that the property is only working for header cells. As a result, it can not be applied to this case when the processing of value cells is needed.

Please let us know if this solution works for you.

Best Regards,
Maksym

Public
Maksym Diachenko Maksym Diachenko Flexmonster January 8, 2025

Hello, Nikita!

Hope you are doing well.
We wonder if you tried using the provided approach to distinguish the empty rows after expands.
Looking forward to hearing your feedback.

Best Regards,
Maksym

Public
Nikita January 8, 2025

Hi Maksym,

It is not about disabled subtotals row but about the disrupted default Flexmonster behavior when by default when the row is expanded and two rows are now present instead of 1 initial row, the first row is erased and the 2nd one only is shown (and that is the correct behavior). Now, after implementing customizeCell function, both rows have identical data which we want to avoid. So, we can't use specifying number formatting to distinguish expanded 1st and 2nd rows case vs unexpanded single row since the data can be not just numbers but anything really.

Public
Nikita January 8, 2025

The full function is like that:

    customizecellfunction: function (cell, data, rawdata) {
        var me = this;
        var valcol = data.type == "value" && data.label != "" && !scil.Utils.isNullOrEmpty(data.recordId);
        if ((!data.isGrandTotal && !data.isTotalColumn && valcol)
            || (!data.isGrandTotal && data.isTotalColumn && valcol && data.measure.aggregation == "count")) {
            var fieldname = data.hierarchy.uniqueName;
            var allvals = rawdata.filter(item => Array.isArray(data.recordId) ? data.recordId.includes(item.resultid) : data.recordId == item.resultdid);
            var strtoappend = allvals.reduce((acc, curr) => {
                if (scil.Utils.isNullOrEmpty(curr[fieldname]))
                    return acc;
                else if (scil.Utils.isNullOrEmpty(acc))
                    return curr[fieldname]
                else {
                    var curval = curr[fieldname];
                    if (acc.toString().includes(curval) && (fieldname.includes("reg-") || fieldname.includes("calculator-") || fieldname.includes("custom-")))
                        return acc;
                    else
                        return acc + ";" + curval;
                }
            }, "");
            if (!scil.Utils.isNullOrEmpty(strtoappend)) {
                if (fieldname.includes("reg-") || fieldname.includes("calculator-") || fieldname.includes("custom-"))
                    cell.text = strtoappend;
                else
                    cell.text = data.label + " (" + strtoappend + ")";
            }
        }

        if (valcol && !data.isGrandTotalRow && data.rows && data.rows.length > 0 && me.highlightedCompounds.includes(data.rows[0].caption)) {
            if (!me.styleTag)
                me.styleTag = document.createElement('style');
            style = "div.fm-cell[data-r='" + data.rowIndex + "']:not(.fm-empty) ";
            style += "{ background-color: #B2DBBF !important; }";
            me.styleTag.innerHTML += style;
        }

        if (!(data.hierarchy && data.hierarchy.uniqueName == "structureimage") || data.measure) return;
        if (data && data.type == "header" && data.label != "") {
            cell.addClass("fm-custom-cell");
            cell.text = me.getStructureImgHtml(data.label);
        }
    },
Public
Nikita January 8, 2025

I tried adding the line at the very top of the customizeCell function:

if (data.label === "") return;

And then adding also formatting like you do in the JSFiddle but it didn't change anything: 

    formats: [
      {
        name: "",
        nullValue: " ",
      },
    ],
Public
Nikita January 8, 2025

It looks like the only thing that was necessary is to add the following lines:

                            options: {
                                grid: {
                                    showTotals: "off",
                                },
                            },

Others were not necessary. Thank you! Its fixed now.

Public
Maksym Diachenko Maksym Diachenko Flexmonster January 9, 2025

Hello, Nikita!

Thank you for your reply.
Though many details from our response were unnecessary, we are glad to hear that it contributed to the solution and setting showTotals to "off" helped you.

Best Regards,
Maksym

Please login or Register to Submit Answer