Kendo UI Angular Grid 选择事件

Question

我正在尝试在AngularJS中处理KendoUI网格的选择事件。

我的代码已经能够按照下面的方式工作。但是感觉使用 _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);
}

- SimRo

Answer 1

请尝试以下操作：

    $scope.onSelection = function(kendoEvent) {
        var grid = kendoEvent.sender;
        var selectedData = grid.dataItem(grid.select());
        console.log(selectedData.id);
    }

您可以尝试上述代码：当选择某一行数据时，将会输出其id。

- Johann Sonntagbauer

---

非常感谢。我面临着同样的问题。有没有我遗漏的地方，这些东西都可以记录下来？我开始使用angular-kendo和treeviews特别是，不得不在SO上搜寻提示。 - mattr

Answer 2

加入“派对”的时间有点晚，但是有一种直接的方法可以做到这一点，而不需要去寻找网格对象：

在标记上：

k-on-change="onSelection(data)"

在代码中：

$scope.onSelection = function(data) {
    // no need to reach the for the sender
}

请注意，如果需要，仍然可以发送selected、dataItem、kendoEvent或columns。有关详细信息，请参见此链接。

- jajdoo

Answer 3

指令用于双向绑定选定行。应该放在与 kendo-grid 指令相同的元素上。 Typescript 版本：

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"
            }
        };
    }

- STO

Answer 4

我建议像这样使用，当我将我的应用程序从Angular 7升级到15时，我也遇到了未定义的问题。现在我可以像这样获取事件详细信息。

public selectedRowChangeAction(event:any): void { 
console.log(event.selectedRows[0].dataItem.Id);  }

事件已选择其0索引处的行，您可以将dataItem作为第一个对象，然后可以选择所有对象的详细信息，例如Id、Name、Product details等。您可以在图片中看到类似的内容

- Muhammad Bilal

Answer 5

一个使用Angular指令实现此功能的快速示例。

请注意，我通过点击事件和DOM句柄获取对底层Kendo网格的引用。

    //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;
                    });
                });
            }
        };
    });

- David Dworetzky