Kendo grid with dropdown action command

Question

I have a KendoUI Grid bound using Angular and I'd like to implement a custom action dropdown command or template column on each row. I need to track the dropdown change event for any of the rows when the grid is in display mode, not edit mode. The dropdown is effectively just a list of all of the name properties of the grid rows that I want to user to be able to select to move the row after another existing row.

For instance, say I have this data:

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

I'd like each row to display a dropdown column while in display mode (so it acts like a row command). The dropdown would contain the names Red,Blue,White with corresponding values. When a user picks one of those colors, I will change the position of that row to the row position after the color selected. It's basically a row reorder dropdown instead of using drag and drop.

My other option is to show a couple of template columns with a move up/move down metaphor to do the switch but that gets a little cumbersome when you want to move a row more than a couple of positions.

Any ideas?

Richard Edwards Richard Edwards · Accepted Answer · 2014-12-12T20:31:58

Ok, I did some more searching and found out a way to do this although it's not 100% of the way there yet. I also found a way to bind the dropdown to the data that populates the grid

The other thing I found when doing it this way is it is painfully slow in rendering the grid now.

    <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 grid with dropdown action command

1 Answers