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

Sharepoint 2013 Kendo Grid not populating in IE

2 Answers 102 Views
Grid
This is a migrated thread and some comments may be shown as answers.
KC
Top achievements
Rank 2
KC asked on 05 Aug 2014, 04:19 PM
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


2 Answers, 1 is accepted

Sort by
0
KC
Top achievements
Rank 2
answered on 05 Aug 2014, 06:02 PM
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
0
Daniel
Telerik team
answered on 07 Aug 2014, 01:18 PM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
Grid
Asked by
KC
Top achievements
Rank 2
Answers by
KC
Top achievements
Rank 2
Daniel
Telerik team
Share this question
or