This is a migrated thread and some comments may be shown as answers.

IE8 Issue in grid aggregate calculation

8 Answers 114 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Code Authority, Inc.
Top achievements
Rank 2
Code Authority, Inc. asked on 17 Apr 2014, 07:03 PM
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]);
            }
           }
    }

8 Answers, 1 is accepted

Sort by
0
Code Authority, Inc.
Top achievements
Rank 2
answered on 17 Apr 2014, 07:44 PM
Actually, since this particular chunk is open source now, in kendo.data.js, should I just send a pull request?
0
Rosen
Telerik team
answered on 18 Apr 2014, 10:49 AM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Code Authority, Inc.
Top achievements
Rank 2
answered on 18 Apr 2014, 05:31 PM
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>



0
Rosen
Telerik team
answered on 21 Apr 2014, 06:01 AM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Code Authority, Inc.
Top achievements
Rank 2
answered on 23 Apr 2014, 06:21 PM
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.            };
0
Code Authority, Inc.
Top achievements
Rank 2
answered on 23 Apr 2014, 06:22 PM
I will also see if I can isolate this issue better in a smaller test case as you have mentioned.
0
Code Authority, Inc.
Top achievements
Rank 2
answered on 23 Apr 2014, 08:39 PM
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


0
Rosen
Telerik team
answered on 24 Apr 2014, 05:58 AM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
Grid
Asked by
Code Authority, Inc.
Top achievements
Rank 2
Answers by
Code Authority, Inc.
Top achievements
Rank 2
Rosen
Telerik team
Share this question
or