Kendo-Grid Json Data Not Showing during Evaluation

[Kiran]

Hi

  We are looking for Grids with AngualrJS support. I started to evaluated Kendo. Trying to get the data to show on the Grid but unsuccessful.Took your example from Demo & modified to get the data from our Server via Rest Api. I see the call is returning data (Can find in Fiddler) but not getting bind to the Grid. Spent couple of hours but couldn't figure out the solution. Can you advice.

 HTML

 <div id="example" ng-app="app">
        <div ng-controller="MyCtrl">
            <kendo-grid options="mainGridOptions">
            </kendo-grid>
        </div>
    </div>

SCRIPT ​

var app = angular.module('KendoDemos', ["kendo.directives"]);

app.controller("MyCtrl", function($scope) {
    $scope.mainGridOptions = {
               dataSource: {
                   transport: {
                                  
                     
                        read: {
     url:"//sbdvvrso244.dev.ib.tor.scotiabank.com:8080/fdsmonitorui/rest/tasks/all",                          
                            type: "POST"
                          }
                   }
               },
               sortable: true,
               pageable: true,
      
     
             
               columns: [{
                   field: "appId",
                   title: "App",
                   width: "120px"
               }, {
                   field: "groupId",
                   title: "Group",
                   width: "120px"
               }, {
                   field: "taskId",
                   title: "Task",
                   width: "120px"
               }, {
                   field: "taskName",
                   title: "Description",
                   width: "120px"
               }, {
                   field: "status"
               }]
           };

});

Thanks

[Konstantin Dikov]

Hello Kiran,

Since we can not test with your actual data, can you please ensure that the returned data is JSON? You can see the response directly in your browser, under the "Network" tab.

Additionally, you can set the schema's data in the dataSource to a function and inspect what is passed:

schema: {
data: function(data){
  //check what is "data" in your case
},

Looking forward to your reply with the additional information.


Regards,
Konstantin Dikov
Telerik