Hi,
I am in a bit of a trouble and need help
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();
Can you help me with this?