Quantcast
Channel: Telerik Forums RSS
Viewing all articles
Browse latest Browse all 94857

How to bind Kendo grid to json data using angularjs

$
0
0

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


Viewing all articles
Browse latest Browse all 94857

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>