Grid CRUD operation using Angular ngResource and WebApi service.
Using Angular ngResource you can bind data from WebApi service and perform the CRUD operation with server-side interaction.
Initially, the WebApi service link has to be provided to $resource and then you can extend it to add the update method as follows.
JS
angular.module(Ctrl, ['ejangular', 'ngResource'])
.factory('Entry', function ($resource) {
return $resource('/api/Orders/:value', {}, {
'update': { method: 'PUT' }
}
)
})
You need to initialize Grid with an empty record and a waiting pop-up is displayed in the Grid “Create” event to indicate the waiting period of $resource to retrieve data from WebApi. Then in $resource promise event, the data from the server-side can be bound to Grid using Angular Scope Variable and hide the waiting pop-up.
During the CRUD operation in Grid, the corresponding $resource action method has to be called to interact with server-side, to update records using Grid events “endAdd”, “endEdit” and “endDelete”.
HTML
<div id="grid" ej-grid e-datasource="data" e-columns="col" e-toolbarsettings-showtoolbar='true' e-create="create" e-endEdit='editHandler' e-endAdd="addHandler" e-endDelete="deleteHandler" e-toolbarsettings-toolbaritems='toolbar' e-editsettings-allowdeleting=' true' e-editsettings-allowediting='true' e-editsettings-allowadding='true' e-allowpaging="true"></div>
JS
var data = Entry.get();
data.$promise.then(function (e) {
$("#grid").ejWaitingPopup("hide")
$scope.data = e.Items
})
$scope.create = function (args) {
$("#grid").ejWaitingPopup("show")
}
$scope.data = null;
$scope.toolbar = ["add", "edit", "delete", "update", "cancel"]
$scope.col = [{ "field": "OrderID", "headerText": "OrderID", "textAlign": "right", "isPrimaryKey": true, "width": 90 },
{ "field": "CustomerID", "headerText": "CustomerID", "validationRules": { "required": true, "maxlength": 5 }, "textAlign": "tight", "width": 90 },
{ "field": "EmployeeID", "headerText": "EmployeeID", "editType": ej.Grid.EditingType.Numeric, "textAlign": "left", "width": 90 }]
$scope.editHandler = function (args) {
Entry.update(args.data)
}
$scope.addHandler = function (args) {
Entry.save(args.data)
}
$scope.deleteHandler = function (args) {
Entry.delete({ id : args.data.OrderID })
}
});
