Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
335
IgGrid, WebAPI and AngularJS
posted

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.

Parents
No Data
Reply
  • 23953
    Offline posted

    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"

                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>

        <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>

    </ig-grid>

     

    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 Pavlov
    Infragistics, Inc.

Children