This is a migrated thread and some comments may be shown as answers.

Binding KendGrid data using Angularjs Service/WebAPI

1 Answer 332 Views
This is a migrated thread and some comments may be shown as answers.
Top achievements
Rank 1
Dilip asked on 10 Oct 2017, 03:05 PM

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:


Angular Service:

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

            function getUserListComplete(response) {
                return response;

            function getUserListFailed(error) {


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


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


                .catch(function (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:,
                    //    usLastname:,
                    vm.grdDataSource = person;

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

1 Answer, 1 is accepted

Sort by
Telerik team
answered on 13 Oct 2017, 07:54 AM
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 the property of the dataSource has to be set in order to parse the response:

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.

Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Asked by
Top achievements
Rank 1
Answers by
Telerik team
Share this question