CODEWITHSUNDEEP
kendo-uikendo-gridsharepoint-2013office365
Duffp
Duffp

Reputation: 5978

Kendo UI Grid with Sharepoint Online List as Data Source

I am having a hard time hooking up SharePoint Online list as a dataSource for a Kendo UI Grid. Has anyone been able to do this and be able to provide a code sample? Below is what I have been trying. 

$("#grid").kendoGrid({
        dataSource: {
            type: "odata",
            transport: {
                read: "https://anysharepointonlinesite.com/_api/web/lists/GetByTitle('ListName')/items",                                
                dataType: "json"
            },
            schema: {
                model: {
                    fields: {
                        ID: { type: "number" },
                        Title: { type: "string" }
                    }
                }
            },
            pageSize: 20
        },
        columns: [{
                field:"ID",
                filterable: false
            },
            {
                field: "Title",
                title: "Title"
            }
        ]
    });
});

The issue that I am having is that no data is being returned.

Upvotes: 0

Views: 2629

Answers (1)

Rich Ross
Rich Ross

Reputation: 800

I've gotten the Kendo UI controls to work in an Office 365 (SharePoint Online) site. I have a blog post on this here, but I describe the important parts here.

I connected a Map control to some list data. The control was displayed on the SharePoint site. I created an object to make the REST call and save the results to a property on the object as a kendo.data.Datasource. 

$().ready(function () {
var restUrl = "/{site location}/_api/web/lists/GetByTitle('Locations')/items";
$.getJSON(restUrl, {
    format: 'json'
}).done(function (data) {
    $.each(data.value, function (i, item) {
        item.location = [];
        item.location.push(parseFloat(item.LocationLat));
        item.location.push(parseFloat(item.LocationLong));
    })

    locationMap.mapData = new kendo.data.DataSource({ data: data.value });
    locationMap.mapData.read();
    createMap();
});

In my createMap function, I set the datasource property of the control to the property defined above.

dataSource: locationMap.mapData,

Yes, this is a map control, but I have done this same method with other controls, like the scheduler control. I've been using Telerik for some time and their controls tend to behave the same way in wiring up the data.

Upvotes: 1

Related Questions