Quantcast
Channel: Telerik Forums RSS
Viewing all articles
Browse latest Browse all 78072

Kendo UI in SharePoint Application Pages

$
0
0

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 :

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

 

The code itself :

$(document).ready(function() {
    varappWebUrl = _spPageContextInfo.webAbsoluteUrl;
    varlistToDisplay = "<%= GetListToDisplay() %>";
    vardataSource = newkendo.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) {
                returndata.d && data.d.results ? data.d.results : [data.d];
            },
            errors: function(response) {
                returnresponse.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


Viewing all articles
Browse latest Browse all 78072

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>