Question

我使用Angular绑定了一个KendoUI Grid，我想在每一行上实现自定义操作下拉命令或模板列。当网格处于显示模式而非编辑模式时，我需要跟踪任何行的下拉更改事件。下拉列表实际上只是我希望用户能够选择在另一个现有行之后移动该行的网格行的所有名称属性的列表。

例如，说我有这些数据：

Id Name   Position
 A Red    1 
 B Blue   2
 C White  3

我希望每一行在显示模式下显示一个下拉列（因此它就像一个行命令）。下拉列表将包含名称为Red，Blue，White和相应值的名称。当用户选择其中一种颜色时，我会在选择颜色后将该行的位置更改为行位置。它基本上是一个行重新排序下拉列表，而不是使用拖放。

我的另一个选择是显示一些模板列，其中有一个上移/下移隐喻来进行切换，但是当你想要移动一行超过几个位置时会有点麻烦。

有什么想法吗？

Answer 1

好的，我做了一些搜索，并找到了一种方法来做到这一点，虽然它不是100％的方式。我还找到了一种方法来将下拉列表绑定到填充网格的数据

我这样做的另一件事就是现在渲染网格的速度非常慢。

    <div id="mainGrid" kendo-grid="mainGrid" k-options="mainGridOptions"></div>

    //grid columns
    $scope.mainGridOptions = {
        dataSource: {
            transport: {
                read: function (e) {
                    gridcolumnService.getGridColumns().success(function (data) {
                        e.success(data);
                    });
                },
            },
        },
        columns: [
            { field: "Name" },
            { field: "ColumnSettings.Type", title: "Type" },
            { field: "ColumnSettings.PrimaryKey", title: "Primary Key", template: '<input type="checkbox" #= ColumnSettings.PrimaryKey ? "checked=checked" : "" # disabled="disabled" ></input>' },
            { field: "ColumnSettings.Title", title: "Title" },
            { field: "ColumnSettings.Editable", title: "Editable", template: '<input type="checkbox" #= ColumnSettings.Editable ? "checked=checked" : "" # disabled="disabled" ></input>' },
            { field: "ColumnSettings.Visible", title: "Visible", template: '<input type="checkbox" #= ColumnSettings.Visible ? "checked=checked" : "" # disabled="disabled" ></input>' },
            { field: "LookupDataCommandId", title: "Lookup", template: '#= LookupDataCommandId ? "Yes" : "" #' },
            { template: '<select id="reorder-dropdown" kendo-drop-down-list k-on-change="exchangeRows(dataItem, kendoEvent)" k-data-source="reorderData()" k-data-text-field="\'Name\'" k-data-value-field="\'GridColumnId\'"></select>' },
            { template: '<a kendo-button k-icon="\'pencil\'" ng-click="editGridColumn(dataItem.GridColumnId)">Edit</a>', width: 100 }
        ]
    };
    $scope.reorderData = function() {
        return $scope.mainGrid.dataSource.data();
    };
    $scope.exchangeRows = function (fromRow, e) {
        $log.log(fromRow.GridColumnId, e.sender.dataItem().GridColumnId);
    };

带有下拉动作命令的Kendo网格

1 个答案: