Category / Section
How to bind Custom Service to ejGrid in AngularJS?
1 min read
You can bound Grid to any custom service data in AngularJs factory/services. This can be achieved by using dynamically changing dataSource of Grid on success function of related services.
When the factory method is using $http or $resource services, you need to set the empty array data source to Grid to avoid invisibility.
The following code example explains how to bind the Grid from the data returned from custom factory method of AngularJs.
JS
<div ng-app="employeeView">
<div ng-controller="GridCtrl">
<ej-grid id="Grid" ej-grid e-datasource="data" e-selectedrowindex="selectedRow" e-allowgrouping="true" e-pagesettings-pagesize="4" e-pagesettings-currentpage="page" e-allowsorting="true" e-allowpaging="true" e-actionbegin="actionBegin">
<e-columns>
<e-column e-field="EmployeeID" e-headertext="Employee ID" e-textalign="right" e-width="90"></e-column>
<e-column e-field="OrderID" e-headertext="Order ID" e-textalign="left" e-width="90"></e-column>
<e-column e-field="CustomerID" e-headertext="Customer ID" e-textalign="left" e-width="90"></e-column>
</e-columns>
</ej-grid>
</div>
</div>
<script>
angular.module('custModule',[]).factory("custService", ["$http", function ($http) {
return $http.get("http://mvc.syncfusion.com/Services/Northwnd.svc/Orders/?$format=json&$top=10", { cache: true });
}]);
angular.module('employeeView', ['ejangular', 'custModule'])
.controller('GridCtrl', function ($scope, custService) {
$scope.selectedRow = 2;
$scope.page = 2;
$scope.data = [];
custService.then(
function (response) {
$scope.data = response.data.d;
}, function (response) {
console.log("gluersFactory.getAll().failure");
console.log(response);
}
)
});
</script>
Rendering Custom Service data to ejGrid in AngularJS
