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

请注意,如果需要,您仍可以发送 selecteddataItemkendoEventcolumns

详情请咨询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 角度网格选择事件的主要内容,如果未能解决你的问题,请参考以下文章

如何处理 Kendo UI Grid 行双击事件

在 kendo ui 网格更改事件上获取单击的单元格

Angular 2 Grid dataBound 事件的 Kendo UI

使用复选框选择取消选择 kendo UI Grid 的行

每次页面更改和排序都会触发 Kendo 网格的 dataBound 事件

Kendo UI 数据源更改事件:它有效吗?