Display SharePoint List Data in Kendo UI Grid Using AngularJS

Question

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"
                        }]
                    };

            });

Answer 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.