[Solved] how to bind kendo grid with json object

[Saad]

I am trying to bind local data to kendo-grid.
data is binded properly at startup but when i edit grid (inline editing) data change is not reflected to json object.
grid shows modified data properly but is not reflected in json object.
here is my code. my project is in angularjs.

[html]
<div kendo-grid="policygrid" k-data-source="riskFilterList" options="mainGridOptions" k-rebind="selectedType"></div>
[/html]

[js]

    $scope.GridColumns = [
      {
          field: "LineFieldName", title: "Line Field Name", editor: columnNameDropDownEditor,
          template: function (e) {
              if (e.LineFieldName) {
                  return e.LineFieldName.DisplayName;
              }
              else {
                  return "";
              }
          }
      },
      { field: "Operator", title: "Operator", editor: operatorDropDownEditor },
      { field: "Value", title: "Value" },
      { field: "Method", title: "Application Method", editor: methodsDropDownEditor },
      {
          command: ["edit", "destroy"], title: " ", width: "180px"
      }
    ];

 function columnNameDropDownEditor(container, options) {


        $('<input required data-text-field="DisplayName" data-value-field="ColumnName" data-bind="value:' + options.field + '"/>')
            .appendTo(container)
            .kendoDropDownList({
                dataTextField: "DisplayName",
                dataValueField: "ColumnName",
                autoBind: true,
                dataSource: new kendo.data.DataSource({
                    pageSize: 20,
                    data: $scope.linecolumn
                })
            });
    }

    function operatorDropDownEditor(container, options) {
        $('<input required data-bind="value:' + options.field + '"/>')
            .appendTo(container)
            .kendoDropDownList({
                autoBind: true,
                dataSource: new kendo.data.DataSource({
                    pageSize: 20,
                    data: $scope.operator
                })
            });
    }

    function methodsDropDownEditor(container, options) {

        $('<input required data-bind="value:' + options.field + '"/>')
            .appendTo(container)
            .kendoDropDownList({
                autoBind: true,
                dataSource: new kendo.data.DataSource({
                    pageSize: 20,
                    data: $scope.methods
                })
            });
    }

    $scope.riskFilterList1 = [];

    $scope.dataSource = new kendo.data.DataSource({
        data: new kendo.data.ObservableArray($scope.riskFilterList1),
    });

    $scope.mainGridOptions = {
        dataSource: $scope.dataSource,
        sortable: false,
        pageable: false,
        resizable: true,
        toolbar: ["create"],
        columns: $scope.GridColumns,
        editable: { mode: "inline" },
        save: function (e) {
            this.refresh();
        },
        cancel: function (e) {
            console.log("cancel", e);
        }
    };

[/js]

[Alexander Valchev]

Hello Saad,

The behaviour that you described is expected and by design. When a local data array is given to the dataSource, the dataSource creates a copy and starts working with it.

If you want to get the changed data, you may hook up to the change event of the dataSource and manually update the original JavaScript array. In the change event, the current state of the dataSource data can be get via the data method.

Regards,
Alexander Valchev
Telerik