How to bind Kendo grid to json data using angularjs - angularjs

Question

HI i am using kendo grid to bind data with json and angularjs
here is my code below.
this is the .cshtml page code below.
<div ng-app="Sample" ng-controller="SampleController">
<div>Products: {{products.length}}</div>
<div kendo-grid k-data-source="products" k-selectable="'row'"
k-pageable='{ "pageSize": 2, "refresh": true, "pageSizes": true }'
k-columns='[
{ "field": "EmployeeKey", "title": "EmployeeId"},
{ "field": "FirstName", "title": "First Name"},
{ "field": "LastName", "title": "Last Name"},
{ "field": "DepartmentName", "title": "Department Name" },
{ "field": "EmailAddress", "title": "Email Id" }
]'>
</div>
</div>
<script>
var app = angular.module('Sample', ['kendo.directives']);
app.controller('SampleController', function ($scope, $http) {
debugger;
$http.get('~/api/Employee/Employee_Read').success(function (thisdata) {
var myData = $.parseJSON(JSON.parse(thisdata));
$scope.myData = myData;
});
$scope.filterOptions = {
filterText: '',
useExternalFilter: true,
};
});
</script>
and in controller which name is EmployeeController i used json data like below:
public ActionResult Employee_Read ([DataSourceRequest] DataSourceRequest request )
{
return Json(employeeRepositary.Employees.ToDataSourceResult(request), JsonRequestBehavior.AllowGet);
}
This code is working fine with #HtmlKendo grid but for this i am not able to display data.
Where i am wrong??
Please help me out from here.

Answer 1

Use kendo.data.ObservableArray for this case
$http.get('~/api/Employee/Employee_Read').success(function (thisdata) {
var myData = $.parseJSON(JSON.parse(thisdata));
$scope.products= new kendo.data.ObservableArray(myData.Data);
});