Angularjs + Kendo Grid and Web API C#

2 posts, 0 answers
  1. Gary
    Gary avatar
    9 posts
    Member since:
    Feb 2013

    Posted 09 Mar 2016 Link to this post

    Hi,

    I try to implement the kendo grid with angular.js and my backend is web api (C#).  I found there is not many sample on the internet except one with OData and not so much doc about it.

    Can you provide me a sample with inline editing for all the basic CRUD for this ? 

    I implemented the read and the create but the problem of the create it's on the callback here how I created my datasource.

                return new kendo.data.DataSource({

                    transport: {
                        read: function (options) {

                            hideShowGridLoadingSpinner(true);

                            var webapi = new kendo.data.transports.webapi({ prefix: "" });

                            var params = webapi.parameterMap(options.data);

                            _options = options;

                            $http.get("/api/country", { params: params }).success(onSuccess).error(onError);
                        },
                        create: function (options) {

                            hideShowGridLoadingSpinner(true);

                            var webapi = new kendo.data.transports.webapi({ prefix: "" });

                            var params = webapi.parameterMap(options.data);

                            $http.post("/api/country",options.data).success(onSuccess).error(onError);
                        }
                    },
                    pageSize: 10,
                    serverPaging: false,
                    serverSorting: false,
                    serverFiltering: false,
                    schema: $.extend({}, kendo.data.schemas.webapi, { data: "data", total: "total", errors: "errors" }),
                    schema: {                    
                        model: {
                            id: "id",
                            fields: {
                                id: { type: "number", editable: false },
                                name: { type: "string", validation: { required: true } }
                            }
                        }
                    }

                });

    Here the success method : 

     

            function onSuccess(data) {

                hideShowGridLoadingSpinner(false);

                if (data.errors == undefined) {
                    _options.success(data.data);
                } else {
                    _options.error();
                    eventBus.showErrorNotification(data.errors);
                }            
            }

     

    The main problem is the data returned is the object added so when I pass this to the success method all object in the grid are flush except the new one added.  Is normal but how I can update the grid with the new inserted data without doing a callback to the get method ?

     

    Thanks

  2. Gary
    Gary avatar
    9 posts
    Member since:
    Feb 2013

    Posted 09 Mar 2016 Link to this post

    Sorry I found the problem I needed to keep a reference to the options parameter before calling the POST method and in the callback I use this reference and it works.  My bad, no need of sample

    Thanks

Back to Top