Hello, I'm trying to implement a simple CRUD scenario with the IgniteUI, AngularJS and ASP.NET WebAPI
HTML:
<ig-grid id="grid1"data-source="data" primary-key="id" auto-generate-columns="false" auto-commit="true"
response-data-key="d.results.Results"
response-total-rec-count-key="d.results.Count">
<columns>
<column key="ID" header-text="ID" data-type="number" hidden="hidden"></column>
<column key="Projekt" header-text="Projekt" data-type="string"></column>
</columns>
<features>
<feature name="Updating" columnkey="ID"></feature>
</features>
</ig-grid>
BLOCKED SCRIPT
var sampleApp = angular.module('sampleApp', ['igniteui-directives', 'ui.bootstrap']);
sampleApp.service('dataService', ['$http', '$q', function ($http, $q) {
'use strict';
this.getAll = function () {
var deferred = $q.defer();
$http.get("/api/timeentries").success(deferred.resolve).error(deferred.reject);
return deferred.promise;
};
}]);
sampleApp.controller('timeCtrl', ['$scope', 'dataService', function ($scope, dataService) {
dataService.getAll().then(function (data) {
$scope.data = data;
}, function (error) {
$scope.error = error;
});
And an WebAPI Controller as an endpoint:
public IEnumerable<Object> Get()
{
TestEntities context = new TestEntities();
var res = from sa in context.TimeEntries
select new { ID = sa.SA_ID, Projekt = sa.Projekt.PJ_Bezeichnung };
return res.ToList();
}
My question is: How can I implement the update/create/delete functionaltiy?
I have seen different examples how this can be done with asp.net or angularjs in combination with the northwind database, but there is no example how the twoway databinding and updating/create/delete works with WebAPI and AngularJS in combination.
Can you help me? I would really like to use this combination for future Projects in my Company.
Hello Kevin,
The igGrid has a REST support. What you need to do is to configure its REST settings. After that calling igGrid.saveChanges API will do all the necessary AJAX requests to the Web API (For more information on the igGrid REST support please see the REST Updating (igGrid) topic.)
Here is how your igGrid configuration should look like:
<ig-grid id="grid1" data-source="data" primary-key="id" auto-generate-columns="false" auto-commit="true"
<rest-settings>
<create url="/api/timeentries" batch="false"></create>
<update url="/api/timeentries" batch="false"></update>
<delete url="/api/timeentries" batch="false"></delete>
</rest-settings>
There is nothing to do on the Angular side, because all the user interaction happens in the igGrid which keeps track of all the CRUD operations for you.
Hope this helps,Martin PavlovInfragistics, Inc.
Hello Kevin
Let me know if you have further questions regarding this subject.
Best regards,Martin PavlovInfragistics, Inc.