kendo ui 角度网格选择事件
Posted
技术标签:
【中文标题】kendo ui 角度网格选择事件【英文标题】:kendoui angular grid selection event 【发布时间】:2013-09-07 13:37:36 【问题描述】:我正在尝试在 AngularJS 中处理来自 KendoUI Grid 的选择事件。
我的代码如下所示。然而,这感觉像是一种非常讨厌的方式来获取所选行的数据。特别是使用_data。有没有更好的方法来做到这一点?我的方法有误吗?
<div kendo-grid k-data-source="recipes" k-selectable="true" k-sortable="true" k-pageable="'refresh': true, 'pageSizes': true"
k-columns='[field: "name", title: "Name", filterable: false, sortable: true,
field: "style", title: "Style", filterable: true, sortable: true]' k-on-change="onSelection(kendoEvent)">
</div>
$scope.onSelection = function(e)
console.log(e.sender._data[0].id);
【问题讨论】:
【参考方案1】:请尝试以下方法:
$scope.onSelection = 功能(剑道事件) var grid = kendoEvent.sender; var selectedData = grid.dataItem(grid.select()); console.log(selectedData.id);
【讨论】:
非常感谢。我遇到了同样的问题。有没有我遗漏的地方记录了这些事情?我特别从角度剑道和树视图开始,并且不得不搜索提示。【参考方案2】:加入派对比较晚,有一个直接的方法可以做到,而无需触及网格对象:
关于标记:
k-on-change="onSelection(data)"
在代码中:
$scope.onSelection = function(data)
// no need to reach the for the sender
请注意,如果需要,您仍可以发送 selected
、dataItem
、kendoEvent
或 columns
。
详情请咨询this link。
【讨论】:
【参考方案3】:双向绑定到选定行的指令。应该放在同一个元素上 作为剑道网格指令。
打字稿版本:
interface KendoGridSelectedRowsScope extends ng.IScope
row: any[];
// Directive is registered as gridSelectedRow
export function kendoGridSelectedRowsDirective(): ng.IDirective
return
link($scope: KendoGridSelectedRowsScope, element: ng.IAugmentedJQuery)
var unregister = $scope.$parent.$on("kendoWidgetCreated", (event, grid) =>
if (unregister)
unregister();
// Set selected rows on selection
grid.bind("change", function (e)
var selectedRows = this.select();
var selectedDataItems = [];
for (var i = 0; i < selectedRows.length; i++)
var dataItem = this.dataItem(selectedRows[i]);
selectedDataItems.push(dataItem);
if ($scope.row != selectedDataItems[0])
$scope.row = selectedDataItems[0];
$scope.$root.$$phase || $scope.$root.$digest();
);
// Reset selection on page change
grid.bind("dataBound", () =>
$scope.row = null;
$scope.$root.$$phase || $scope.$root.$digest();
);
$scope.$watch(
() => $scope.row,
(newValue, oldValue) =>
if (newValue !== undefined && newValue != oldValue)
if (newValue == null)
grid.clearSelection();
else
var index = grid.dataSource.indexOf(newValue);
if (index >= 0)
grid.select(grid.element.find("tr:eq(" + (index + 1) + ")"));
else
grid.clearSelection();
);
);
,
scope:
row: "=gridSelectedRow"
;
Javascript 版本
function kendoGridSelectedRowsDirective()
return
link: function ($scope, element)
var unregister = $scope.$parent.$on("kendoWidgetCreated", function (event, grid)
if (unregister)
unregister();
// Set selected rows on selection
grid.bind("change", function (e)
var selectedRows = this.select();
var selectedDataItems = [];
for (var i = 0; i < selectedRows.length; i++)
var dataItem = this.dataItem(selectedRows[i]);
selectedDataItems.push(dataItem);
if ($scope.row != selectedDataItems[0])
$scope.row = selectedDataItems[0];
$scope.$root.$$phase || $scope.$root.$digest();
);
// Reset selection on page change
grid.bind("dataBound", function ()
$scope.row = null;
$scope.$root.$$phase || $scope.$root.$digest();
);
$scope.$watch(function () return $scope.row; , function (newValue, oldValue)
if (newValue !== undefined && newValue != oldValue)
if (newValue == null)
grid.clearSelection();
else
var index = grid.dataSource.indexOf(newValue);
if (index >= 0)
grid.select(grid.element.find("tr:eq(" + (index + 1) + ")"));
else
grid.clearSelection();
);
);
,
scope:
row: "=gridSelectedRow"
;
【讨论】:
【参考方案4】:如何使用角度指令执行此操作的快速示例。
请注意,我通过单击事件和 DOM 句柄获取对底层剑道网格的引用。
//this is a custom directive to bind a kendo grid's row selection to a model
var lgSelectedRow = MainController.directive('lgSelectedRow', function ()
return
scope:
//optional isolate scope aka one way binding
rowData: "=?"
,
link: function (scope, element, attributes)
//binds the click event and the row data of the selected grid to our isolate scope
element.bind("click", function(e)
scope.$apply(function ()
//get the grid from the click handler in the DOM
var grid = $(e.target).closest("div").parent().data("kendoGrid");
var selectedData = grid.dataItem(grid.select());
scope.rowData = selectedData;
);
);
;
);
【讨论】:
以上是关于kendo ui 角度网格选择事件的主要内容,如果未能解决你的问题,请参考以下文章
Angular 2 Grid dataBound 事件的 Kendo UI