Kendo UI-AngularJS：如何将网格绑定到$ scope上的对象？

Question

I am trying to bind a Kendo UI Grid to an object on $scope instead of to kendo.data.dataSource . The grid shows the data (which is in the object) but if I change the data or add new row, the changes are not reflected in the $scope object. Why is that?

My real problem is, I want to show two grids top & bottom and when the user selects a row from top grid, the bottom grid should be populated with the details. However, these details are already fetched and kept in the DataSource of the top grid (hence no transport section for bottom grid) because I want to be able to save any changes in batches.

This is how I am binding my grids

Top Grid

<div kendo-grid="mainGrid"
         k-sortable="true"
         k-editable="true"
         k-selectable="'row'"
         k-filterable="true"
         k-resizable="true"
         k-scrollable='{ "virtual":true }'
         k-on-change="selected = dataItem" 
         k-options="mainGridOptions"
         k-height="165">
    </div>

Bottom Grid

<div kendo-grid="detailGrid"
    k-editable="true"
    k-selectable="'row'"
    k-options="detailGridOptions"
    k-data-source="selected.Details"
    k-height="125"></div>

This is how I add record to bottom grid

$scope.detailGrid.dataSource.add();

Answer 1

So far, I didn't get how to bind Kendo UI grid to an object on $scope. However, for my real problem, I have found a work around.

I bound on-save event of the child grid, and explicitly marked the current row as dirty.

$scope.onDetailGridSave = function () {
   $scope.selected.dirty = true;
};

and in HTML

k-on-save="onDetailGridSave()"