Data is getting but not populating in kendo grid u

Question

I am able to get the data from database but not populating in gridview. here is my 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 this is the controller page where i am 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 my application i am checking through debugger this line "e.success(data)" so in mouse hove i am getting the total records fetched from database. but not populating in gridview it is still showing blank. please help me out from here.

Answer 1

Because you are returning collection which wrapped with DataSourceResult method.

return Json(employeeRepositary.Employees.ToDataSourceResult(request), JsonRequestBehavior.AllowGet);

instead of just its collection

return Json(employeeRepositary.Employees, JsonRequestBehavior.AllowGet);

You need to define your data source schema, please try this schema setup

schema: {
     data: "Data",
     errors: "Errors",
     total: "Total",
     model: {
         id: "Id",
         fields: {
             Id: { editable: false, defaultValue: 0 },
             //the rest field definition
         }
     }
}

and you can change your transport's read to something like this

read: {
    type: "POST",
    url: "/Employee/Employee_Read",
    dataType: "json",
    contentType: "application/json"
}

your final code should be like 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 your controller like this

[AcceptVerbs(HttpVerbs.Get | HttpVerbs.Post)]
public ActionResult Employee_Read ([DataSourceRequest] DataSourceRequest request )
{
    var employees = employeeRepositary.Employees;

    return Json(employees.ToDataSourceResult(request), JsonRequestBehavior.AllowGet);
}