javascript kendoui角网格选择事件

kendoui angular grid selection event

提问by SimRo

I am trying to handle a selection event from a KendoUI Grid in AngularJS.

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

I have got my code working as per below. However it feels like a really nasty way of having to get the data for the selected row. Especially using _data. Is there a better way of doing this? Have I got the wrong approach?

我的代码如下所示。然而，这感觉是一种必须获取所选行数据的非常讨厌的方式。特别是使用_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);
}

回答by Johann Sonntagbauer

please try the following:

请尝试以下操作：

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

回答by jajdoo

Joining the party rather late, there is a direct way to do it without reaching for the grid object:

加入派对很晚，有一种直接的方法可以做到，而无需伸手去拿网格对象：

on the markup:

在标记上：

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

in the code:

在代码中：

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

note that you may still send selected, dataItem, kendoEventor columnsif needed.

请注意，您还可以发送selected，dataItem，kendoEvent或者columns如果需要的话。

consult this linkfor more details.

有关更多详细信息，请参阅此链接。

回答by David Dworetzky

A quick example of how to do this with an angular directive.

如何使用 angular 指令执行此操作的快速示例。

Note here that I'm getting the reference to the underlying kendo grid through the click event and the DOM handle.

请注意，我通过单击事件和 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;
                    });
                });
            }
        };
    });

回答by STO

Directive for two-way binding to selected row. Should be put on the same element as kendo-grid directive.

双向绑定到选定行的指令。应该放在与 kendo-grid 指令相同的元素上。

Typescript version:

打字稿版本：

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 version

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