buildEmptyAggregatesObject throws NullReferenceException on IE8

[Marco]

I am using Kendo UI v2015.1.318, specifically the kendo.web.js.

A requirement I have is to support IE8. While my code works  on Chrome, Firefox, IE9-11, it breaks on IE8 during aggregation in a grid.

This is the datasource for the parent grid:

 

var parentSource = new kendo.data.DataSource({
    transport: {
        read: function (e) {
            readData(e, true);
        }
    },
    schema: {
        model: {
            id: "ID",
            fields: {
                Title: { type: "string" },
                Budget: { type: "number" },
                Planned: { type: "number" },
                Approved: { type: "number" }
            }
        }
    },
    aggregate: [
        { field: "Approved", aggregate: "sum" },
        { field: "Planned", aggregate: "sum" },
        { field: "Budget", aggregate: "sum" },
    ]
});

 

This is the shortened grid definition:

 

$(function () {
    $.when(
    ).then(function (data) {
        /**do some more stuff*/
    }).then(function (data) {
        $("#CostGrid")
        .kendoGrid({
            dataSource: parentSource,
            dataBound: gridDataBound,
            detailInit: loadChildGrid,
            detailExpand: expandParentRow,
            detailCollapse: collapseParentRow,
            sortable: true,
            filterable: true,
            columns: [
                { field: "Title", title: "Cost Type" },
                //{ field: "ConvRate", title: "Conv Rate" },
                { field: "Planned", title: "Planned (LCY)", aggregates: ["sum"], footerTemplate: "Total: #=sum#" },
                { field: "Budget", title: "Budget (LCY)", aggregates: ["sum"], footerTemplate: "Total: #=sum#" },
                { field: "Approved", title: "VOWD (LCY)", aggregates: ["sum"], footerTemplate: "Total: #=sum#" }
            ],
            filter: { field: "Budget", operator: "gt", value: 0 }
        });
    });
});

 

 

The point where it breaks is 

 

function buildEmptyAggregatesObject(aggregates) {
        var idx,
            length,
            aggregate = {},
            fieldsMap = {};

        if (!isEmptyObject(aggregates)) {
            if (!isArray(aggregates)){
                aggregates = [aggregates];
            }

            for (idx = 0, length = aggregates.length; idx < length; idx++) {
                aggregate[aggregates[idx].aggregate] = 0;
                fieldsMap[aggregates[idx].field] = aggregate;
            }
        }

        return fieldsMap;
}

 

 

On all browsers, except IE8 the aggregates object is an array of objects with length 3, which is correct, since I have defined 3 columns to sum up. On IE8 the length is 4, and the for-loop breaks, because aggregates[3] is undefined.

 

What causes this behaviour and how can I fix this?

[Marco]

As an addendum to get a workaround going. This error occurs in 2 places: calculateAggregate and buildEmptyaggregatesObject.

In both placces, add a null check to exit the loop:

 

for (idx = 0; idx < len; idx++) {
    aggr = aggregates[idx];
    if(typeof aggr !== 'undefined' && aggr !== void 0) {
        functionName = aggr.aggregate;
        /* ... */
    }
}

 

This solves the problem and aggregating works again on IE8

[Stefan]

Hello Marco,

I'm glad to hear that the issue is resolved and thank you for sharing it with the Kendo UI community.

In general, the Internet explorer 8 is a very specific browser which support was stopped from 2017, please have that in mind if you decide to update the Kendo UI version:

http://docs.telerik.com/kendo-ui/intro/supporting/browser-support#notes-on-web-browser-support

Regards,
Stefan
Telerik by Progress