1

I am trying to display my SharePoint list data in Kendo UI Grid using AngularJS. But getting only headers, no grid data.

Please help.

Below is my code:

Html Code

<div id="example" data-ng-app="KendoDemos">

<div data-ng-controller="MyCtrl">
            <kendo-grid options="mainGridOptions"></kendo-grid>

        </div>
    </div>

**Code in App.js**

angular.module("KendoDemos", ["kendo.directives"])
                .controller("MyCtrl", function ($scope) {
                    $scope.mainGridOptions = {
                        dataSource: {
                            type: "odata",
                            transport: {
                                read: _spPageContextInfo.webAbsoluteUrl + "/_vti_bin/listdata.svc/Employees",
                                type:"json"
                            },
                            pageSize: 5,
                            serverPaging: true,
                            serverSorting: true
                        },
                        sortable: true,
                        pageable: true,
                        dataBound: function () {
                            this.expandRow(this.tbody.find("tr.k-master-row").first());
                        },
                        columns: [{
                            field: "FirstName",
                            title: "First Name",
                            width: "120px"
                        }, {
                            field: "LastName",
                            title: "Last Name",
                            width: "120px"
                        }, {
                            field: "Country",
                            width: "120px"
                        }, {
                            field: "City",
                            width: "120px"
                        }, {
                            field: "Title"
                        }]
                    };

            });
1

You have to define below mentioned code above the databound.function like shown below.

$(document).ready(function () {
                $("#grid").kendoGrid({
                    dataSource: {
                        type: "json",
                        serverPaging: true,
                        pageSize: 5,
                        transport: { read: { url:  _spPageContextInfo.webAbsoluteUrl + "/_vti_bin/listdata.svc/Employees", dataType: "json"} },
                        schema: { data: "Products", total: "TotalCount" }
                    },
                    height: 400,
                    pageable: true,
                    columns: [
                            { field: "ProductId", title: "ProductId" },
                            { field: "ProductType", title: "ProductType" },
                            { field: "Name", title: "Name" },
                            { field: "Created", title: "Created" }
                        ],
                    dataBound: function () {
                        this.expandRow(this.tbody.find("tr.k-master-row").first());
                    }
                });
            });

I am not aware about the Angular JS method but before loading the data you should mention all the columns in it that i am for sure.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.