How to bind kendo grid after update grid data?

Question

//Here i called HttpGet method from API to getlist of data.

var apiPath = "http://localhost/unitek/#/ParameterMaster"; 
                            Restangular.all(apiPath).getList().then
                            (
                                function (response) 
                                {
                                    $scope.consultationParamItems = response.data.plain();

                                    $scope.consultationItemsGridOptions = consultationItemsGridOptionsFn();
                                },
                                function (response) 
                                {
                                    alert("Error Retriving Items" + response.data);
                                }
                            );

//Here i configured kendo grid

function consultationItemsGridOptionsFn()
        {
            var options = {
                            dataSource: 
                                {
                                    data: $scope.consultationParamItems,
                                    pageSize: 10,
                                    serverPaging: false,
                                    serverSorting: false

                                },
                                autoBind:true,
                                sortable: true,
                                pageable: true,
                                resizable: true,
                                reorderable:true,
                                groupable: false,
                                columns: 
                                    [   

                                        {
                                            field: "ShortDesc",
                                            title: "Parameter Name",
                                            width:"20%"
                                        },

                                        {
                                            field: "Remarks",
                                            title: "Remarks",
                                            width:"15%"
                                        },
                                        {
                                            field: "ConsultationParamSequence",
                                            title: "SEQ",
                                            width:"20%"
                                        },
                                        {
                                            field: "ICD10Code",
                                            title: "ICD10Code",
                                            width:"20%"
                                        },
                                        {
                                            field: "ICD10Remarks",
                                            title: "ICD10Remarks",
                                            width:"20%"

                                        },
                                         {
                                             command: ["edit"], title:"&nbsp; ", width: "100px"

                                         },
                                        {
                                            command: ["destroy"], title: "&nbsp;", width: "100px"
                                        }
                                    ],
                                    editable:true,
                                    //{
                                            // mode: "inline"
                                    //},
                                        toolbar:[{ name: "create", text: "Add " }]
                            };
                return options;
        }

//Here i save the updated grid

$scope.saveConsultationParameter=function()
        {
            if($scope.consultationParamItems!=undefined)
            {
                Restangular.all('consultparam/consultationparam/saveItems').post($scope.consultationParamItems).then
                (
                    function()
                    {
                        alert("Save successfully");
                    },
                    function()
                    {
                        alert("Data Save Failed")
                    }
                )
            }
        }

//I used kendo grid ui

<kendo-grid id="consultationItemsGrid"  k-options="consultationItemsGridOptions"></kendo-grid>

//Here i call save method

<div class="panel-ctrls">
                                <span class="button-icon pull-right"><i class="ti ti-save" ng-click="saveConsultationParameter()"></i></span>
                            </div>

I can load data to kendo grid. if i edit data in grid or add new row to grid and save means it should save on local db. But i could not save the updated data to Db.when i debug i came to know that Updated data is not bind with datasource.i could not find solution.Please help me.

dimodi dimodi · Accepted Answer · 2016-08-10T20:18:32

Instead of posting $scope.consultationParamItems, you can retrieve and post the Grid data items:

$("#consultationItemsGrid").data("kendoGrid").dataSource.view().toJSON()

However, a lot better approach is to configure the Grid DataSource for CRUD operations. This will help you to only submit the edited or inserted items, and not all of them, as in the current implementation.

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

How to bind kendo grid after update grid data?

1 Answers