Sharepoint 2013 Kendo Grid not populating in IE

[KC]

Greetings,

I have a Web Part project that is using a webservice as it's DAO. I am pulling it in using JSONP and ajax calls. All works well in Chrome. But in IE (any version) it hangs on loading the grid. It never populates the grid. This is my code:



var grid = $('#testGrid').kendoGrid({
        toolbar: 'Input: "Search" "NumberItems" | "Filter" "Export" "Report(Dropdown)"  "DDL(Concepts)"',
        columns: [
            { field: 'PADescription', title: "Description" },
            { field: 'PAUom', title: "PA Uom" },
            { field: 'CasesSold', title: "Usage" },
            { field: 'PreviousLaidIn', title: "Previous" },
            { title: " " },
            { field: 'DistID', title: 'Dist ID' },
            { field: 'DistDescription', title: 'Dist Description' },
            { field: 'DistUom', title: 'Dist Uom' },
            { field: 'Usage', title: 'Usage' },
            { field: 'DateModified', title: 'Modified' }
        ],
        dataSource: {
            transport: {
                read: {
                    url: url + 'getDistLaidIn?distID=5202',
                    dataType: 'jsonp'
                }
            },
        }
    }).data('kendoGrid');


Like I said, this works fine in Chrome, but IE just hangs on loading the grid.

Attached a screenshot of the bug.



V/R

Keith

[KC]

Workaround,

I still have not resolved this issue, but made a work around. Make an AJAX call to your service then store the data in an object. on the success event of the AJAX call, create the grid and make the dataSource.data = the data object you received. Unfortunately I will not be able to use the out of the box Update, Edit, Insert, and delete methods that come with the Kendo Grid.

Code:

$(function () {
        $.ajax({
            type: "GET",
            url: url + "getDistLaidIn?distID=5202",
            success: function (d) {
                console.log('Success!');
                console.log(d);
                dataSource = d;
                $('#testGrid').kendoGrid({
                    toolbar: 'Input: "Search" "NumberItems" | "Filter" "Export" "Report(Dropdown)"  "DDL(Concepts)"',
                    columns: [
                        { field: 'PADescription', title: "Description" },
                        { field: 'PAUom', title: "PA Uom" },
                        { field: 'CasesSold', title: "Usage" },
                        { field: 'PreviousLaidIn', title: "Previous" },
                        { title: " " },
                        { field: 'DistID', title: 'Dist ID' },
                        { field: 'DistDescription', title: 'Dist Description' },
                        { field: 'DistUom', title: 'Dist Uom' },
                        { field: 'Usage', title: 'Usage' },
                        { field: 'DateModified', title: 'Modified' }
                    ],
                    dataSource: {
                        data: dataSource
                        //transport: {
                        //    read: {
                        //        url: url + 'getDistLaidIn?distID=5202',
                        //        dataType: 'jsonp',
                        //        cache: false
                        //    }
                        //},
                        //error: function (e) {
                        //    alert("La operación ha fallado: \n" + e.errorThrown + ": " + e.xhr.responseText);
                        //}
                    }
                }).data('kendoGrid');
            },
            error: function (jqXHR, textStatus, errorThrown) {
                console.log("error");
                console.log(jqXHR, textStatus, errorThrown);
            },
        });
    });

V/R

Keith

[Daniel]

Hi,

I am not sure what could be causing the problem. As described in the documentation, the dataSource internally uses the ajax method so there shouldn't be a difference. Could you check if there are any JavaScript errors? If there aren't any then could you provide a runnable sample that demonstrates the issue?

Regards,
Daniel
Telerik