IE8 Issue in grid aggregate calculation

[Code Authority, Inc.]

Hi, I have just downloaded the newest Kendo UI release 2014.1.416, which fixed a problem preventing me from testing my SPA app in IE8. So, I shall start out in saying I am not sure if this issue occurred in prior Kendo UI releases or if it is new. However I encountered another issue shortly after:

The following internal Kendo UI function throws an error stating "aggr is undefined", only in IE8. Newer IE versions work perfectly. I was forced to add the "if (aggr) { ... } " check within the for loop in the excerpt shown, but after that the function appears to work fine in IE8 and all others.

Obviously, I don't want to maintain this patch of mine throughout future versions of Kendo UI. Can this either be committed to Kendo UI source, or can I get help in diagnosing the actual cause of this?

function calculateAggregate(accumulator, aggregates, item, index, length, state) {
        aggregates = aggregates || [];
        var idx,
            aggr,
            functionName,
            len = aggregates.length;

        for (idx = 0; idx < len; idx++) {
            aggr = aggregates[idx];
            if (aggr) {
                functionName = aggr.aggregate;
                var field = aggr.field;
                accumulator[field] = accumulator[field] || {};
                state[field] = state[field] || {};
                state[field][functionName] = state[field][functionName] || {};
                accumulator[field][functionName] = functions[functionName.toLowerCase()](accumulator[field][functionName], item, kendo.accessor(field), index, length, state[field][functionName]);
            }
           }
    }

[Code Authority, Inc.]

Actually, since this particular chunk is open source now, in kendo.data.js, should I just send a pull request?

[Rosen]

Hi Jason,

Could you please check that there is no extra comma at the end of your aggregates array definition? This in IE8, as you may know, will create one extra item at the end of the array which will be undefined.

Regards,
Rosen
Telerik

 

 

[Code Authority, Inc.]

Hi Rosen,

No, I don't seem to have any stray commas in that area. I am using declarative binding which has other workarounds that I implemented, which I suspect may be related. See http://www.telerik.com/forums/declarative-creation-of-grid-with-data-attribues-(footertemplate)

This is my grid definition which is failing. Apologies for the verbose footer templates, but per the workaround in the link this is what is required to make the grid bind properly via MVVM.

<div id="kgCategorySummary" style="width: 700px" data-role="grid" data-bind="source: categorySummaryDataSource" data-sortable="true" data-pageable="true" data-scrollable="false" data-bound="BJ.PricingLibrary.onDataBound" data-filterable="true"
         data-columns="
         [
            { field: 'CategoryID', hidden: true },
            { field: 'Name', template: $('#category-name-template').html(), title: 'Category', aggregates: ['count'], footerTemplate: 'Count: #= data.CategoryID ? data.CategoryID.count : 0 #' },
            { field: 'ReferenceVolume', format: '{0:C0}', title: 'Volume', aggregates: ['sum'], footerTemplate: 'Sum: #: data.ReferenceVolume ? kendo.toString(data.ReferenceVolume.sum, BJ.Data.formatStringC) : 0 #' },
            { field: 'SavingsDollars', format: '{0:C0}', title: 'Savings ($)', aggregates: ['sum'], footerTemplate: 'Sum: #: data.SavingsDollars ? kendo.toString(data.SavingsDollars.sum, BJ.Data.formatStringC) : 0 #' },
            { field: 'SavingsPercent', format: '{0:p}', title: 'Savings (%)', aggregates: ['average'],  footerTemplate: 'Average: #: data.SavingsPercent ? kendo.toString(data.SavingsDollars.sum/data.ReferenceVolume.sum, BJ.Data.formatStringP) : 0  #' },
            { field: 'CategoryID', title: ' ', width: '35px', template: $('#category-summary-icon-template').html(), filterable: false, sortable: false }
        ]">
    </div>

[Rosen]

Hello Jason,

Could you please share the code of the DataSource (categorySummaryDataSource) declaration? Also a simple test page (you could use Kendo UI Dojo) in which the issue can be observed will be appreciated.

Regards,
Rosen
Telerik

 

 

[Code Authority, Inc.]

Hi Rosen,

Please see below the function that sets up the data source involved. This function is called with data that has been loaded from the server in a different function. There is some work I have to do in order to massage this data before it is shown. The datasource read function contains logic that rolls up data from nested objects in the JSON object returned from the server, as well as observes filters that are present in the UI. The approach works for a "calculated columns" scenario where the calculation is somewhat complex.

​

01.processCategorySummaryData = function (data) {
02.                PricingLibrary.Models.categorySummaryModel.set("categorySummaryDataSource", new kendo.data.DataSource({
03.                    transport: {
04.                        read: function (options) {
05.                            var savingsOpportunityAmount = 0;
06.                            for (var i = 0; i < data.length; i++) {
07.                                //calculate reference volume
08.                                var sum = 0;
09.                                var details = data[i].CategoryDetails;
10.                                for (var j = 0; j < details.length; j++) {
11.                                    if (details[j].ReferenceVolume.replace) //sometimes it seems it thinks it is not a string?
12.                                    {
13.                                        sum += parseFloat(details[j].ReferenceVolume.replace(",", ""));
14.                                    }
15.                                    else {
16.                                        sum += details[j].ReferenceVolume;
17.                                    }
18.                                }
19.                                data[i].ReferenceVolume = sum;
20.
21.                                //calculate savings dollars
22.                                var total = 0;
23.                                for (var j = 0; j < details.length; j++) {
24.                                    // Get only the facilities selected in the filter
25.                                    var peers = PricingLibrary.filterPeers(details[j].ComparablePeers);
26.                                    if (peers && peers.length) {
27.                                        var max = null;
28.                                        for (var k = 0; k < peers.length; k++) {
29.                                            var peer = peers[k];
30.                                            var savingsDollars;
31.                                            if (peer.SavingsDollars.replace)
32.                                                savingsDollars = parseFloat(peer.SavingsDollars.replace(",", ""));
33.                                            else
34.                                                savingsDollars = peer.SavingsDollars;
35.
36.                                            if (max === null || max < savingsDollars)
37.                                                max = savingsDollars;
38.                                        }
39.                                        if (max < 0)
40.                                            max = 0;
41.                                        total += max;
42.                                    }
43.                                }
44.                                data[i].SavingsDollars = total;
45.                                savingsOpportunityAmount += total;
46.
47.                                //calculate savings percent
48.                                if (data[i].ReferenceVolume)
49.                                    data[i].SavingsPercent = data[i].SavingsDollars / data[i].ReferenceVolume;
50.                                else
51.                                    data[i].SavingsPercent = 0;
52.
53.                                //set name
54.                                for (var j = 0; j < BJ.Data.Categories.length; j++) {
55.                                    if (BJ.Data.Categories[j].value == data[i].CategoryID) {
56.                                        data[i].Name = BJ.Data.Categories[j].text;
57.                                        break;
58.                                    }
59.                                }
60.                            }
61.                            PricingLibrary.Models.leftSidebarModel.set("savingsOpportunityAmount", savingsOpportunityAmount);
62.                            options.success(data);
63.                        }
64.                    },
65.                    schema: {
66.                        model: {
67.                            fields: {
68.                                CategoryID: { type: "number" },
69.                                ReferenceVolume: { type: "number" },
70.                                SavingsDollars: { type: "number" },
71.                                SavingsPercent: { type: "number" }
72.                            }
73.                        }
74.                    },
75.                    aggregate: [
76.                        { field: "CategoryID", aggregate: "count" },
77.                        { field: "ReferenceVolume", aggregate: "sum" },
78.                        { field: "SavingsDollars", aggregate: "sum" },
79.                        { field: "SavingsPercent", aggregate: "average" },
80.                    ],
81.                    pageSize: 10,
82.                    sort: { field: "SavingsDollars", dir: "desc" }
83.                }));
84.                PricingLibrary.Models.categorySummaryModel.get("categorySummaryDataSource").read();
85.            };

[Code Authority, Inc.]

I will also see if I can isolate this issue better in a smaller test case as you have mentioned.

[Code Authority, Inc.]

Hi Rosen,

I have reduced this into a reproducible test page containing a setup similar to what I am doing in my app, but with a lot less of the surrounding noise. The same issue still occurs in IE8 with the test code. Ironically, the Kendo UI Dojo doesn't seem to work in IE8 mode, so you may need to copy it out.

http://trykendoui.telerik.com/IjeF

[Rosen]

Hello Jason,

As I have mentioned in my first reply, there is an extra comma in the aggregates definition at line 79 of the code you have pasted. Removing the comma should resolve the issue you have described.

Regards,
Rosen
Telerik