Kendo UI in SharePoint Application Pages

[Kevin]

Hi All,

I'm very new to this community and started to use the trial version of Kendo UI on Friday last week. I was asked by my Head of Department to test the functionalities of Kendo UI to see if it would be interesting to buy for the developers team (me included). As the main use of it would be in SharePoint web part and application pages, I used the JS / HTML 5 version and tried to get pieces of information on the documentation and on Internet, I followed this tutorial even if it does not exactly match my needs on Code Project - Kendo UI in SharePoint Online to display the items of a list in a grid.

With the tutorial, I manage to get a working grid using the provided url for the data source. I tried to adapt the code to retrieve the items of the list I want to display in the current SharePoint Site Collection (which is on premises, not online), but now, each time the grid launches the request for the data source, it keeps prompting me for credentials despite the fact that the data is available on the same site as the page being executed. Even so, if I provided the credentials manually, it only ask again for credentials endlessly without displaying anything.

Can you help me with that ?

Maybe the best is that I show you the code I currently have :

The headers :

<link href="/_layouts/15/MyTools/styles/kendo.common-office365.min.css" type="text/css" rel="stylesheet" />
<link href="/_layouts/15/MyTools/styles/kendo.office365.min.css" type="text/css" rel="stylesheet" />
<script src="/_layouts/15/MyTools/js/jquery-2.2.1.min.js" type="text/javascript"></script>
<script src="/_layouts/15/MyTools/js/kendo.all.min.js" type="text/javascript"></script>

 

The code itself :

$(document).ready(function () {
    var appWebUrl = _spPageContextInfo.webAbsoluteUrl;
    var listToDisplay = "<%= GetListToDisplay() %>";
    var dataSource = new kendo.data.DataSource({
        schema: {
            model: {
                fields: {
                    ID: { type: "number" },
                    Title: { type: "string" },
                    Author: { type: "string" },
                    Created: { type: "date" },
                    Editor: { type: "string" },
                    Modified: { type: "date" }
                }
            },
            data: function (data) {
                return data.d && data.d.results ? data.d.results : [data.d];
            },
            errors: function (response) {
                return response.error;
            }
        },
        transport: {
            read: {
                url: appWebUrl + "/_api/lists/getbytitle('" + listToDisplay + "')/items",
                headers: {
                    "accept": "application/json; odata=verbose"
                }
            }
        },
        pageSize: 20
    });
    $("#grid").kendoGrid({
        dataSource: dataSource,
        height: 550,
        groupable: false,
        sortable: true,
        pageable: {
            refresh: true,
            pageSizes: true,
            buttonCount: 5
        },
        columns: [ {
            field: "ID",
            title: "ID"
        }, {
            field: "Title",
            title: "Title",
            width: 240
        }, {
            field: "Author",
            title: "Created By"
        }, {
            field: "Created",
            title: "Created"
        }, {
            field: "Editor",
            title: "Modified By"
        }, {
            field: "Modified",
            title: "Modified"
        }]
    });
});

 

 

 

Did I do something wrong or have I missed something while setting up the grid ?

Thank you in advance for your help,

 

Best Regards,

Kevin

[Kevin]

I found what was the issue. The web.config of the web application was corrupted. reverting back to the previous version did the trick. Now I can get data, but it says that it has no items to display despite displaying all the records. When changing the filters, it finally update the pager with the right number of items (and pages).

Do you know what I can do for that ?

Thank you in advance,

Kevin

[Stefan]

Hello Kevin,

I can assume that the issue occurs because the schema.total property of the Kendo UI DataSource is not set:

http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#configuration-schema.total

Also, I can recommend checking the following thread on our forum on a similar subject.

http://www.telerik.com/forums/am-i-doing-something-wrong-or-is-it-a-pageable-bug#1954476 

I hope this is helpful.

Regards,
Stefan
Telerik by Progress

 

 

[Kevin]

Hello Stefan,

Thank you for your answer, it did help me.

While searching, I did see that the total had to be set in order to update the pager, which I tried but I couldn't get any data anymore with the adaptations I had done meanwhile. To help me checking what was the issue, I have downloaded the extension for Chrome (Telerif Kendo UI Chrome Inspector) which told me that the common css file was missing. After that, I saw with Fiddler that the data was retrieved when forcing a read from the data source. I discovered then that a copy / paste I did from another site left a typo in the configuration, "datasource" was written instead of "dataSource" (at least, now I know that the configuration is case sensitive). Is there a tool somewhere to notify the developer when he's using unknown configuration ?

 

Here's the working code I have now.

Headers :

<link href="/_layouts/15/MyTools/styles/kendo.common.min.css" type="text/css" rel="stylesheet" />
<link href="/_layouts/15/MyTools/styles/kendo.common-office365.min.css" type="text/css" rel="stylesheet" />
<link href="/_layouts/15/MyTools/styles/kendo.office365.min.css" type="text/css" rel="stylesheet" />
<script src="/_layouts/15/MyTools/js/jquery-2.2.1.min.js" type="text/javascript"></script>
<script src="/_layouts/15/MyTools/js/kendo.all.min.js" type="text/javascript"></script>

and the javascript :

var appWebUrl = _spPageContextInfo.webAbsoluteUrl;
var listName = "MyItems";
var spDataSource;

$(document).ready(function () {
    loadDataSource(appWebUrl, listName);
    createGrid();
});

function loadDataSource(appWebUrl, listName)
{
    spDataSource = new kendo.data.DataSource(
        {
            schema: {
                model: {
                    fields: {
                        ID: { type: "number" },
                        Title: { type: "string" },
                        Created: { type: "date" },
                        Modified: { type: "date" }
                    }
                },
                data: function (data) {
                    console.log(data.d);
                    return data.d && data.d.results ? data.d.results : [data.d];
                },
                total: function (data) {
                    return data.d && data.d.results ? data.d.results.length : 0;
                }
            },
            transport: {
                read: {
                    url: appWebUrl + "/_api/lists/getbytitle('" + listName + "')/items",
                    headers: {
                        "accept": "application/json; odata=verbose"
                    }
                }
            },
            pageSize: 20
        });
}
function createGrid()
{
    if(spDataSource !== undefined){
        $("#grid").kendoGrid({
            dataSource: spDataSource,
            groupable: false,
            sortable: true,
            pageable: {
                refresh: true,
                pageSizes: true,
                buttonCount: 5
            },
            height: "auto",
            columns: [{
                field: "ID",
                title: "ID"
            }, {
                field: "Title",
                title: "Title",
                width: 240
            }, {
                field: "Created",
                title: "Created"
            }, {
                field: "Modified",
                title: "Modified"
            }]
        });
    }
}

 

Thank you for the help again,

Regards,

Kevin

[Stefan]

Hello Kevin,

Regarding the questions:

1) Telerik Kendo UI Chrome Inspector- Please ignore the mentioned error about the missing CSS file, as this is a known issue with the tool.

2) There is not a special tool that will notify the developer if the Kendo UI widget configuration is incorrect. If Visual Studio is used, I can suggest using the provided IntelliSense which Kendo UI provides for Visual Studio:

http://docs.telerik.com/kendo-ui/third-party/vs-intellisense#visual-studio-intellisense

Let me know if you need additional information on this matter.

Regards,
Stefan
Telerik by Progress

 

 

[Kevin]

Hello Stefaan,

I will have a look at the IntelliSense for Visual Studio, it looks really helpful.

Thank you very much.

Regards,

Kevin