Kendo grid not refreshing after create and update

2 posts, 0 answers
  1. Mohammed
    Mohammed  avatar
    1 posts
    Member since:
    Nov 2015

    Posted 06 Feb 2016 Link to this post

    My kendo grid not refreshing 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: "RoadTypeId",
                    title: "Type",
                    readonly: true,
                    width: "",
                    attributes: { class: "ob-right" }
                },
                {
                    field: "SerialNo",
                    title: "Serial",
                    width: "",
                    attributes: { class: "ob-right" }
                },
                {
                    field: "Name",
                    width: "38%"
                },
                {
                    field: "Length",
                    filterable: false,
                    attributes: { class: "ob-right" }
                },
                {
                    field: "CrestWidth",
                    title: "Crest width",
                    filterable: false,
                    attributes: { class: "ob-right" }
                },
                {
                    field: "EmbkHeight",
                    title: "Embk height",
                    filterable: false,
                    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: " "
                        }, {
                            name: "map",
                            template: "<a class='k-grid-delete'  style='width: 26px; height: 26px; vertical-align: middle; text-align: center; cursor:pointer' ><span style='margin: 4px;' class='glyphicon glyphicon-map-marker target' title='map' ></span></a>",
                            text: " "
                        }, {
                            name: "info",
                            template: "<a class='k-grid-delete'  style='width: 26px; height: 26px; vertical-align: middle; text-align: center; cursor:pointer' ><span style='margin: 4px;' class='glyphicon glyphicon-info-sign target' title='info' ></span></a>",
                            text: " "
                        }, {
                            name: "pic",
                            template: "<a class='k-grid-delete'  style='width: 26px; height: 26px; vertical-align: middle; text-align: center; cursor:pointer' ><span style='margin: 4px;' class='glyphicon glyphicon-picture target' title='picture'></span></a>",
                            text: " "
                        }
                    ],
                    title: "",
                    width: "11%"

                }
            ],

            //editable: true,
            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,
            serverPaging: true,
            serverSorting: true,
            scrollable: true,
            dataBound: function () {
                this.expandRow(this.tbody.find("tr.k-master-row").first());
            },

            selectable: "row",

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


            }



    });

    How can i solve this. 

    My kendo grid not refreshing after a edit or create a new row.I have called a angularJs service for CRUD operation. Here's the controller

    My kendo grid not refreshing after a edit or create a new row.I have called a angularJs service for CRUD operation. Here's the controller

    My kendo grid not refreshing after a edit or create a new row.I have called a angularJs service for CRUD operation. Here's the controller

    My kendo grid not refreshing after a edit or create a new row.I have called a angularJs service for CRUD operation. Here's the controller

    My kendo grid not refreshing after a edit or create a new row.I have called a angularJs service for CRUD operation. Here's the controller

    My kendo grid not refreshing after a edit or create a new row.I have called a angularJs service for CRUD operation. Here's the controller

  2. Dimo
    Admin
    Dimo avatar
    8482 posts

    Posted 10 Feb 2016 Link to this post

    Hello Mohammed,

    The code looks OK. Our documentation includes a full runnable example of a custom DataSource transport. Please review it and compare with your scenario. I recommend checking for JavaScript errors and make sure the data service responses are valid and according to the Kendo UI DataSource requirements.

    http://docs.telerik.com/kendo-ui/framework/datasource/crud#examples

    In case you find out there is a problem with the Kendo UI Grid behavior, please provide a runnable test page for inspection.

    Regards,
    Dimo
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top