buttons[]

Allows you to customize buttons in the editing column or create a custom command column. Applies only if the column's type is "buttons".

Accepted Values: 'add' | 'cancel' | 'delete' | 'edit' | 'save' | 'undelete'

cssClass

Specifies a CSS class to be applied to the button.

Type:

String

hint

Specifies the text for the hint that appears when the button is hovered over or long-pressed.

Type:

String

icon

Specifies the button's icon.

Type:

String

This option accepts one of the following:

See Also

name

The name used to identify a built-in button.

Type:

String

Accepted Values: 'add' | 'cancel' | 'delete' | 'edit' | 'save' | 'undelete'

To configure a built-in button, assign its name to this option. The other options in the object configure the button. For example, the following code adds a custom CSS class to the Save button:

jQuery
JavaScript
$(function () {
    $("#treeListContainer").dxTreeList({
        // ...
        columns: [{
            type: "buttons",
            buttons: [{
                name: "save",
                cssClass: "my-class"
            }]
        }]
    });
});
Angular
HTML
TypeScript
<dx-tree-list ... >
    <dxi-column type="buttons">
        <dxi-button
            name="save"
            cssClass="my-class">
        </dxi-button>
    </dxi-column>
</dx-tree-list>
import { DxTreeListModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxTreeListModule
    ],
    // ...
})

onClick

A function that is executed when the button is clicked or tapped.

Type:

Function

|

String

Function parameters:
e:

Object

Information about the event that caused the function's execution.

Object structure:
component:

TreeList

The widget's instance.

element:

Element (jQuery or HTML)

The widget's container. It is an HTML Element or a jQuery Element when you use jQuery.

model:

Object

The model data. Available only if you use Knockout.

event:

Event (jQuery or dxEvent)

The event that caused the function's execution. It is a dxEvent or a jQuery.Event when you use jQuery.

The properties of the button's row.

The properties of the button's column.

template

Specifies a custom button template.

Type:

template

Function parameters:
cellElement:

Element (jQuery or HTML)

The container of the cell that should display the button. It is an HTML Element or a jQuery Element when you use jQuery.

cellInfo:

Object

The cell's properties.

Object structure:
component:

TreeList

The widget's instance.

data:

Object

The data of the cell's row.

key: any

The row's key.

columnIndex:

Number

The index of the cell's column.
Refer to Column and Row Indexes for more information.

The column's properties.

rowIndex:

Number

The index of the cell's row. Begins with 0 on each page. Group rows are included.
Refer to Column and Row Indexes for more information.

rowType:

String

The row's type.

The row's properties.

Return Value:

String

|

DOM Node

|

jQuery

A template name or container.

See Also

text

Specifies the button's text. Applies only if the button's icon is not specified.

Type:

String

visible

Specifies the button's visibility.

Type:

Boolean

|

Function

Function parameters:
options:

Object

Information about the row and column that contain the button.

Object structure:
component:

TreeList

The widget's instance.

The row's properties.

The column's properties.

Return Value:

Boolean

true if the button should be visible; otherwise, false.

Default Value: true

Use the function when you need to show or hide the button for specific rows. For example, the widget lists online orders and allows users to edit them. A Cancel button should allow users to cancel their orders. However, completed orders should not be canceled. The visible function in this case may look as follows:

jQuery
JavaScript
$(function () {
    $("#treeListContainer").dxTreeList({
        // ...
        columns: [{
            type: "buttons",
            buttons: [{
                text: "Cancel",
                visible: function (e) {
                    return !e.row.isEditing && !e.row.data.isCompleted;
                }
            }]
        }]
    });
});
Angular
HTML
TypeScript
<dx-tree-list ... >
    <dxi-column type="buttons">
        <dxi-button
            text="Cancel"
            [visible]="isCancelButtonVisible">
        </dxi-button>
    </dxi-column>
</dx-tree-list>
import { DxTreeListModule } from "devextreme-angular";
// ...
export class AppComponent {
    isCancelButtonVisible (e) {
        return !e.row.isEditing && !e.row.data.isCompleted;
    }
}
@NgModule({
    imports: [
        // ...
        DxTreeListModule
    ],
    // ...
})