12.0p ListGrid summary css and calculation issue

[Blama]

Hi Isomorphic,

please see this sample (v12.0p_2020-04-10). When you show and the quantity and price columns you'll see the changes to the total column.
As this is not an editorFormula, I think it's expected to change when displayed columns change.
But it does not change in the expected way. I'd expect:

• For one column of quantity/price: It's value or 0
• For no quantity/price column: empty cell

Also I'd expect the Total-column Grid-summary never to change the text color and the Total-column itself never to change it's font.



Best regards
Blama

[Isomorphic]

This sample uses recordSummaryFunction to calculate a summary column by multiplying values from the record together. However, it's using recordSummaryFunction in it's implicit mode, where it just multiples any visible numeric columns together. So, no framework bug, but this sample should be modified to either make the relevant fields canHide:false or set includeInRecordSummary on the fields. We'll also change the docs so this is clearer.

We'll check on the CSS - probably the summary column/row styles do not have sufficient variations declared to cover the banding in Tahoe.

[Blama]

Hi Isomorphic,

I got that. But if you just hide one of the number column, the total does not change - in this easy mode I'd expect it to be the value of the remaining column.

Best regards
Blama

[Isomorphic]

We've applied a change to address the css issue and it will be available as of tomorrow's builds.

Regards
Isomorphic Software

[Isomorphic]

The problem of the summary field not updating when columns are removed has been fixed back to SC 11.1p. That will be in the nightly builds dated 2020-04-17 and beyond.

[Blama]

Hi Isomorphic,

I can see that the calculation issue is fixed in all cases in v12.0p_2020-04-17.
The css issue is still there though:

1. The background in the total column is either totally gray or totally white - no stripes, no zebra (also try with alternateRecordStyles: false)
2. The gridSummary row does still change text color when hiding columns.

Best regards
Blama

[Blama]

Hi Isomorphic,

I thought something else is wrong and created a testcase for it - turns out it was my mistake with property names, so it fixed the usage. But perhaps this will help you with the CSS issues anyway. See the extended sample below.

Best regards
Blama

isc.ListGrid.create({
    ID: "companyList",
    width:"100%", height:"100%",
    autoFetchData:true,
    dataSource:orderItemLocalDS,
    showAllRecords:true,
    groupByField:"category", groupStartOpen:"all",
    canEdit:true,

    showGridSummary:true,
    showGroupSummary:true,
    fields:[
        {name:"orderID", includeInRecordSummary:false, summaryFunction:"count"},
        {name:"itemDescription"},
        {name:"category", showGridSummary:true, 
            getGridSummary:function (records, summaryField) {
                var seenCategories = {};
                for (var i = 0; i < records.length; i++) {
                    seenCategories[records[i].category] = true;
                }
                var totalCategories = isc.getKeys(seenCategories).length;
                return totalCategories + " Categories";

            }
        },
        {name:"shipDate", showGroupSummary:true, showGridSummary:false, summaryFunction:"max"},

        {name:"quantity", showGroupSummary:false, showGridSummary:false, canHide:false},
        {name:"unitPrice", showGroupSummary:false, showGridSummary:false, canHide:false,
         formatCellValue:function (value) {
             if (isc.isA.Number(value)) {
                return value.toCurrencyString("$");
             }
             return value;
         }
        },
        {name:"total", title:"Total", type:"summary", canHide:false,
         recordSummaryFunction:"multiplier", summaryFunction:"sum",
         showGridSummary:true, showGroupSummary:true,
         align:"right",
         formatCellValue:function (value) {
             if (isc.isA.Number(value)) {
                return isc.NumberUtil.format(value, "$#,##0.00");
             }
             return value;
         }
        }
    ]
});

isc.Button.create({
    ID: "alternateRecordStylesTrue",
    width: 200,
    title: "alternateRecordStyles: true",
    click: "companyList.setProperty('alternateRecordStyles', true)"
});

isc.Button.create({
    ID: "alternateRecordStylesFalse",
    width: 200,
    title: "alternateRecordStyles: false",
    click: "companyList.setProperty('alternateRecordStyles', false)"
});

isc.Button.create({
    ID: "alternateRecordFrequency1",
    width: 200,
    title: "alternateRecordFrequency: 1",
    click: "companyList.setProperty('alternateRecordFrequency', 1)"
});

isc.Button.create({
    ID: "alternateRecordFrequency2",
    width: 200,
    title: "alternateRecordFrequency: 2",
    click: "companyList.setProperty('alternateRecordFrequency', 2)"
});

isc.Button.create({
    ID: "alternateFieldStylesTrue",
    width: 200,
    title: "alternateFieldStyles: true",
    click: "companyList.setProperty('alternateFieldStyles', true)"
});

isc.Button.create({
    ID: "alternateFieldStylesFalse",
    width: 200,
    title: "alternateFieldStyles: false",
    click: "companyList.setProperty('alternateFieldStyles', false)"
});

isc.Button.create({
    ID: "alternateFieldFrequency1",
    width: 200,
    title: "alternateFieldFrequency : 1",
    click: "companyList.setProperty('alternateFieldFrequency', 1)"
});

isc.Button.create({
    ID: "alternateFieldFrequency2",
    width: 200,
    title: "alternateFieldFrequency: 2",
    click: "companyList.setProperty('alternateFieldFrequency', 2)"
});

isc.Button.create({
    ID: "ungroup",
    width: 200,
    title: "ungroup()",
    click: "companyList.ungroup()"
});

isc.Button.create({
    ID: "groupByCategory",
    width: 200,
    title: "groupBy('category')",
    click: "companyList.groupBy('category')"
});


isc.Button.create({
    ID: "invalidateCache",
    width: 200,
    title: "invalidateCache()",
    click: "companyList.invalidateCache()"
});

isc.HLayout.create({
    ID: "buttonsLayoutRecordStyle",
    members: [alternateRecordStylesFalse, alternateRecordFrequency1, alternateFieldStylesFalse, alternateFieldFrequency1, ungroup],
    membersMargin: 10,
    width: "100%"
});

isc.HLayout.create({
    ID: "buttonsLayoutFieldStyle",
    members: [alternateRecordStylesTrue, alternateRecordFrequency2, alternateFieldStylesTrue, alternateFieldFrequency2, groupByCategory, invalidateCache],
    membersMargin: 10,
    width: "100%"
});

isc.VLayout.create({
    members: [companyList, buttonsLayoutRecordStyle, buttonsLayoutFieldStyle],
    membersMargin: 10,
    width: "80%",
    height: "100%"
});

[Isomorphic]

We made some additional changes to address the styling issues and they will be available as of tomorrow's builds (Apr 21).

Regards
Isomorphic software

[Blama]

Hi Isomorphic,

I can see this is fixed in v12.0p_2020-04-23 / v12.1p_2020-04-23.

Best regards
Blama