带下拉操作命令的Kendo网格

Question

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

例如，假设我有以下数据：

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