DevExtreme React - Command Columns

Command columns are used for interaction. The TreeList provides the following command columns.

  • Editing Column
    Contains editing controls. Appears when editing is allowed and depends on the editing mode.

  • Adaptive Column
    Contains buttons that expand adaptive detail rows. Appears if columnHidingEnabled is true or hidingPriority is set for at least one column and only when certain columns do not fit into the screen or container size.

DevExtreme HTML5 JavaScript TreeList CommandColumns EditingColumn AdaptiveColumn

You can relocate or resize the command columns by changing their visibleIndex and width options. For this, call the columnOption(id, optionName, optionValue) method as shown by the following code.

jQuery
JavaScript
var treeList = $("#treeListContainer").dxTreeList("instance");
// places the editing column before all others
treeList.columnOption("command:edit", "visibleIndex", -2);

// changes the width of the editing column to 200 pixels
treeList.columnOption("command:edit", "width", 200);

// places the adaptive column before all data columns, but after the editing column
treeList.columnOption("command:adaptive", "visibleIndex", -1);

// changes the width of the adaptive column to 80 pixels
treeList.columnOption("command:adaptive", "width", 80);
Angular
TypeScript
import { ..., ViewChild } from '@angular/core';
import { DxTreeListModule, DxTreeListComponent } from 'devextreme-angular';
// ...
export class AppComponent {
    @ViewChild(DxTreeListComponent) treeList: DxTreeListComponent;
    modifyEditingColumn () {
        // places the editing column before all others
        this.treeList.instance.columnOption("command:edit", "visibleIndex", -2);

        // changes the width of the editing column to 200 pixels
        this.treeList.instance.columnOption("command:edit", "width", 200);
    }
    modifyAdaptiveColumn () {
        // places the adaptive column before all data columns, but after the editing column
        this.treeList.instance.columnOption("command:adaptive", "visibleIndex", -1);

        // changes the width of the adaptive column to 80 pixels
        this.treeList.instance.columnOption("command:adaptive", "width", 80);
    }
}
@NgModule({
    imports: [
        // ...
        DxTreeListModule
    ],
    // ...
})

You can also customize cells of command columns using the onCellPrepared function. To distinguish cells of a command column from others, check the argument's column.command field for the "edit" or "adaptive" value. In the following code, the editing column's cells are customized by attaching a new click handler to the "Edit" links:

jQuery
JavaScript
$(function() {
    $("#treeListContainer").dxTreeList({
        // ...
        editing: { allowUpdating: true },
        onCellPrepared: function (e) {
            if (e.rowType == "data" && e.column.command == "edit") {
                var cellElement = e.cellElement,
                    editLink = cellElement.find(".dx-link-edit");
                editLink.off("dxclick");
                editLink.on("dxclick", (args) => {
                    // Implement your logic here
                });
            }
        }
    });
});
Angular
TypeScript
HTML
import { DxTreeListModule } from 'devextreme-angular';
import * as events from "devextreme/events";
// ...
export class AppComponent {
    onCellPrepared (e) {
        if (e.rowType == "data" && e.column.command == "edit") {
            let cellElement = e.cellElement,
                editLink = cellElement.querySelector(".dx-link-edit");
            events.off(editLink); 
            events.on(editLink, "dxclick", (args) => {
                // Implement your logic here
            });
        }
    };
}
@NgModule({
    imports: [
        // ...
        DxTreeListModule
    ],
    // ...
})
<dx-tree-list ...
    (onCellPrepared)="onCellPrepared($event)">
    <dxo-editing 
        [allowUpdating]="true">
    </dxo-editing>
</dx-tree-list>
ASP.NET MVC Controls
Razor C#
@(Html.DevExtreme().TreeList()
    .ID("treeList")
    .Editing(e => { 
        e.AllowUpdating(true); 
    })
    .OnCellPrepared("treeList_cellPrepared")
    // ...
)
<script type="text/javascript"> 
    function treeList_cellPrepared (e) {
        if (e.rowType == "data" && e.column.command == "edit") {
            var cellElement = e.cellElement,
                editLink = cellElement.find(".dx-link-edit");
            editLink.off("dxclick");
            editLink.on("dxclick", (args) => {
                // Implement your logic here
            });
        }
    }
</script>
See Also