How to bind Kendo grid to json data using angularjs

[Vikash]

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 my mvc 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);
}

but when i am using this code and running my application getting blank grid

no more question i have to ask which path i addressed here "~/api/Employee/Employee_Read"

so here api should it's need to put because in my application no api folder is present.

second is "Employee" is controller name in my mvc application where inside "Employee_Read" function used to call .

this function i used with razor kendo grid it's working fine there but not here.

please help me in this.

Thanks

[Kiril Nikolov]

Hello,

Please check the following documentation article that shows how to use $http to bind a Kendo UI Grid in an AngularJS application:

http://docs.telerik.com/kendo-ui/AngularJS/the-grid-widget#how-to-bind-the-grid-using-the-http-service

Regards,
Kiril Nikolov
Telerik

 

 

[improwise]

Since success and error is not depreciated, could you please update the link you refer to?

 

"The $http legacy promise methods success and error have been deprecated. Use the standard then method instead. If$httpProvider.useLegacyPromiseExtensions is set to false then these methods will throw $http/legacy error."

[Kiril Nikolov]

Hello Patrik Johansson,

 

Thanks for pointing that out. 

The example is now updated!

 

Regards,
Kiril Nikolov
Telerik