angularjskendo-uikendo-gridangular-kendo

Kendo-ui grid don't refreshed after creating or updating a row


My kendo grid don't get refreshed after a edit or create a new row.I have called a angularJS service for CRUD operation.

Here's the controller

app.controller("roadInventoryCtrl", function ($scope, services) {
$scope.gridOptions = {
    columns: [
        {
            field: "RoadCode",
            title: "Road Code",
            width: "",
            attributes: { class: "ob-right" }
        },
        {
            field: "Remarks",
            filterable: false
        },
        {
            command: [
                {
                    name: "edit",
                    template: "<a data-toggle='tooltip' data-placement='left' title='edit' class='k-grid-edit k-grid-update red-tooltip'  style='width: 26px; height: 26px; vertical-align: middle; text-align: center; cursor:pointer'><span style='margin: 4px;' class='glyphicon glyphicon-edit'></span></a>",
                    text: " "

                },
                {
                    name: "destroy",
                    template: "<a if-role-permission=\"['PERMISSION_WORKFLOW_DEFINITION_DELETE']\" class='k-grid-delete'  style='width: 26px; height: 26px; vertical-align: middle; text-align: center; cursor:pointer' ><span style='margin: 4px;' class='glyphicon glyphicon-remove-circle target' title='delete'></span></a>",
                    text: " "
                }
            ],
        }
    ],

    editable: 'inline',
    toolbar: ["create"],
    pageable: true,

    dataSource: {
        pageSize: 25,
        transport: {
            read: function(e) {
                services.getRoadInventroy()
                    .then(function success(response) {
                        e.success(response.data);
                    }, function error(response) {
                        alert('something went wrong');
                        console.log(response);
                    });
            },
            update: function(e) {
                services.updateRoadInventory(e)
                    .then(function success(response) {
                        e.success(response.data);
                    }, function error(response) {
                        console.log(response);
                    });
            },

            destroy: function(e) {
                services.destroyRoadInventory()
                    .then(function success(response) {
                            e.success(response.data);
                        }, function error(response) {
                            console.log(response);
                        }
                    );

            },
            create: function(e) {
                services.createRoadInventory(e)
                    .then(function success(response) {
                            console.log(response);
                        },function error(response) {
                            console.log(response);
                        }
                    );
            }
        },
        schema: {
            model: {
                id: "RoadCode",
                fields: {
                    RoadCode: {
                        editable: false
                    }

                }
            }
        }
    },
    sortable: true,
    selectable: "row",

    filterable: {
        extra: false,
        operators: {
        string: {
            startswith: "Starts with",
            contains:"Contains"

         },
         number: {
         }
       }
    }


    }



});

And the service is

app.service('services', ['$http', function ($http) {
var result;
this.getRoadInventroy = function () {
    result = $http.get("/api/InventoryService").success(function (data) {
        result = (data);
    }).error(function () {
        alert("Not hiting the Api Controller");
    });

    return result;
};

this.createRoadInventory = function (e) {
    //alert(JSON.stringify(e));
    //alert(e.data);
    $http.post("/api/InventoryService",e.data).success(function () {
    }).error(function() {
        alert("Not Hitting the POST of API but hitting the services");
    });
};
this.destroyRoadInventory = function () {

};
this.updateRoadInventory = function (e) {
    $http.put("/api/InventoryService", e.data).success(function () {
    }).error(function (){
        alert("Not Hitting the put of API but hitting the services");
    });
};



}]);

I have post it on Kendo forum but don't get appropriate answer.


Solution

  • Just put the result in var and return it.

            this.updateRoadInventory = function(e) {
            update = $http.put(rootUrl + "InventoryService", e.data).success(function() {
            }).error(function() {
                alert("Not Hitting the put of API but hitting the services");
            });
            return update;
        };