Binding KendGrid data using Angularjs Service/WebAPI

[Dilip]

Hi, I'm trying to bind the KendoGrid data source from Angularjs Service which is calling my WebAPI (.NetCore). I'm getting the data in JSON back from webApi and also it is getting populated correctly in my controller variable. However, kendo grid is not showing the data populated. If I use the same JSON output and hard code location variable with that data and bind it to kendo grid it shows the data.

Please help.

 

JSON from web API:

{"data":{"UsPk":"00000000-0000-0000-0000-000000000000","UsLastname":"Test","StatusCode":0,"Message":"Test"}

Angular Service:

   ///Get Users from the service
        function getUserList() {
            return $http.get('http://localhost:88/api/user/gettestuser/1')
                .then(getUserListComplete)
                .catch(getUserListFailed);

            function getUserListComplete(response) {
                console.log(response.data);
                return response;
            }

            function getUserListFailed(error) {
                logger.error(error.data);
                return error.data;
            }
        };

 

Angular Controller code:

var grid = $("#grid").kendoGrid({
            dataSource: {
                data: vm.boardData,
                dataType: "json"
            },
            editable: true,
            height: 160,
            columns: [
                { field: "usPk", title: "ID" },
                { field: "usLastname", title: "Last Name" }
            ]
        }).data("kendoGrid");

 

            function getUserList() {
            return dataService.getUserList()
                .then(function (response) {
                    angular.copy(response.data, vm.boardData);

               })

                .catch(function (showError) {
                    alert(showError);
                    vm.errorMessage = showError;
                })
                .finally(function () { vm.isBusy = false });
        }

 

//Tried polpulating JSON object and assign it to grid below way as well
                    //for (var i = 0; i <= vm.boardData.length - 1; i++) {
                    
                    //var person = {};
                    //person = {
                    //    usPk: vm.boardData.data.usPk,
                    //    usLastname: vm.boardData.data.usLastname,
                    //};
                    vm.grdDataSource = person;
                    //}

                    //vm.grdDataSource = JSON.stringify(vm.boardData.data, null, 4);
                   

[Stefan]

Hello, Dilip,

Thank you for the provided information.

I can assume that the issue occurs due to one of the following:

1) As the response is located in response.data the schema.data property of the dataSource has to be set in order to parse the response:

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

2) Another possible reason is that the vm.boardData variable is still empty and the time the Grid is populated. Please ensure that the variable is populated before initializing the Grid.

If the issue still occurs after testing both assumptions, please provide a fully runnable example and I will gladly assist further.

Regards,
Stefan
Progress Telerik