asp.net mvc - Data is getting but not populating in kendo grid using angular js -

i able data database not populating in gridview. here code below:

<div ng-app="app" ng-controller="myctrl">      <div kendo-grid k-options="gridoptions" k-rebind="gridoptions" k-pageable='{ "pagesize": 2, "refresh": true, "pagesizes": true }'></div>  </div>  <script>      angular.module("app", ["kendo.directives"]).controller("myctrl", function ($scope, $http) {          $scope.gridoptions = {              columns: [{ field: "employeekey" }, { field: "firstname" }],              datasource: {                  //schema: {                  //    data: "d"                  //},                  type: "jsonp",                  transport: {                                           read: function (e) {                                                    $http({ method: 'get', url: '/employee/employee_read' }).                          success(function (data, status, headers, config) {                             // alert('sucess')                              //debugger;                                                         e.success(data)                          }).                          error(function (data, status, headers, config) {                              alert('something went wrong')                              console.log(status);                          });                      }                  },                  //pagesize: 5              }          }      });  </script>

and controller page getting data

public actionresult employee_read ([datasourcerequest] datasourcerequest request )          {              //iqueryable<iemployeerepositary> employeerep = employeerepositary.employees;              return json(employeerepositary.employees.todatasourceresult(request), jsonrequestbehavior.allowget);          }

so after running application checking through debugger line "e.success(data)" in mouse hove getting total records fetched database. not populating in gridview still showing blank. please me out here.

because returning collection wrapped datasourceresult method.

return json(employeerepositary.employees.todatasourceresult(request), jsonrequestbehavior.allowget); 

instead of collection

return json(employeerepositary.employees, jsonrequestbehavior.allowget); 

you need define data source schema, please try schema setup

schema: {      data: "data",      errors: "errors",      total: "total",      model: {          id: "id",          fields: {              id: { editable: false, defaultvalue: 0 },              //the rest field definition          }      } } 

and can change transport's read this

read: {     type: "post",     url: "/employee/employee_read",     datatype: "json",     contenttype: "application/json" } 

your final code should this

$scope.gridoptions = {     columns: [{ field: "employeekey" }, { field: "firstname" }],     datasource: {         transport: {             read: {                 type: "post",                 url: "/employee/employee_read",                 datatype: "json",                 contenttype: "application/json"             },             parametermap: function(options, operation) {                 return json.stringify(options);             }         },         pagesize: 5,         schema: {             data: "data",             errors: "errors",             total: "total",             model: {                 id: "employeekey",                 fields: {                     employeekey: { editable: false, defaultvalue: 0 },                     firstname: {type: "string", validation: { required: true }}                 }             }         }     } } 

and controller this

[acceptverbs(httpverbs.get | httpverbs.post)] public actionresult employee_read ([datasourcerequest] datasourcerequest request ) {     var employees = employeerepositary.employees;      return json(employees.todatasourceresult(request), jsonrequestbehavior.allowget); }