10

我正在尝试处理来自 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);
}
4

4 回答 4

13

请尝试以下方法：

    $scope.onSelection = 功能（剑道事件）{
        var grid = kendoEvent.sender;
        var selectedData = grid.dataItem(grid.select());
        console.log(selectedData.id);
    }
于 2013-09-05T10:16:34.970 回答
5

加入派对相当晚，有一种直接的方法可以做到这一点，而无需触及网格对象：

在标记上：

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

在代码中：

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

请注意，您仍然可以发送selected, dataItem,kendoEvent或columns如果需要。

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

于 2014-09-11T06:24:33.850 回答
1

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

打字稿版本：

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"
            }
        };
    }
于 2015-07-27T12:34:23.263 回答
0

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

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

    //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;
                    });
                });
            }
        };
    });
于 2015-07-15T16:37:11.967 回答