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

【问题标题】：Kendo UI - AngularJS: How to bind a grid to an object on $scope?Kendo UI - AngularJS：如何将网格绑定到 $scope 上的对象？
【发布时间】：2016-03-03 10:58:48
【问题描述】：

我正在尝试将 Kendo UI Grid 绑定到 $scope 上的对象，而不是 kendo.data.dataSource。网格显示数据（在对象中），但如果我更改数据或添加新行，更改不会反映在 $scope 对象中。这是为什么？

我真正的问题是，我想在顶部和底部显示两个网格，当用户从顶部网格中选择一行时，底部网格应该填充详细信息。但是，这些详细信息已被提取并保存在顶部网格的 DataSource 中（因此底部网格没有传输部分），因为我希望能够批量保存任何更改。

这就是我绑定网格的方式

顶部网格

<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>

底部网格

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

这就是我将记录添加到底部网格的方式

$scope.detailGrid.dataSource.add();

【问题讨论】：

标签： angularjs kendo-ui kendo-grid

【解决方案1】：

到目前为止，我还没有了解如何将 Kendo UI 网格绑定到 $scope 上的对象。但是，对于我真正的问题，我找到了解决方法。

我绑定了子网格的on-save事件，并将当前行显式标记为脏。

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

在 HTML 中

k-on-save="onDetailGridSave()"

【讨论】：