Vue TreeList - columns.buttons

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

Type:

Array<String | Column Button>

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

component

An alias for the template property specified in React. Accepts a custom component. Refer to Using a Custom Component for more information.

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. Not executed if a template is used.

Type:

Function

|

String

Function parameters:
e:

Object

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

Object structure:
Name Type Description
column

TreeList Column

The properties of the button's column.
component

TreeList

The widget's instance.
element

HTMLElement | jQuery

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

Event (jQuery or EventObject)

The event that caused the function to execute. It is a dxEvent or a jQuery.Event when you use jQuery.
model

Object

The model data. Available only if you use Knockout.
row

TreeList Row

The properties of the button's row.

render

An alias for the template property specified in React. Accepts a rendering function. Refer to Using a Rendering Function for more information.

template

Specifies a custom button template.

Type:

template

Template Data:
Name Type Description
column

TreeList Column

The column's properties.
columnIndex

Number

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

TreeList

The widget's instance.
data

Object

The data of the cell's row.
key any

The row's key.
row

TreeList Row

The row'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.
IMPORTANT

When you use a custom button template, the onClick function is ignored. Instead, handle the click event of the element placed inside the template:

jQuery
index.js
$(function() {
    $("#treeListContainer").dxTreeList({
        columns: [
            // ...    
            {
                type: "buttons",
                buttons: [{
                    template: function() {
                        var link = $("<a>").text("My command")
                                        .attr("href", "#");
                        link.on("click", function() {
                            console.log("My command was clicked");
                        });
                        return link;
                    }
                }]
            }
        ]

    });
});
Angular
app.component.html
app.component.ts
app.module.ts
<dx-tree-list ... >
    <!-- ... -->
    <dxi-column type="buttons">
        <dxi-button template="myCommand">
            <div *dxTemplate="let data of 'myCommand'">
                <a href="#" (click)="logMyCommandClick()">My command</a>
            </div>
        </dxi-button>
    </dxi-column>
</dx-tree-list>
import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    logMyCommandClick() {
        console.log('My command was clicked');
    }
}
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';

import { DxTreeListModule } from 'devextreme-angular';

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        DxTreeListModule
    ],
    providers: [ ],
    bootstrap: [AppComponent]
})
export class AppModule { }
Vue
App.vue
<template>
    <DxTreeList ... >
        <!-- ... -->
        <DxColumn type="buttons">
            <DxButton #default>
                <a href="#" @click="logMyCommandClick">My command</a>
            </DxButton>
        </DxColumn>
    </DxTreeList>
</template>

<script>
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import DxTreeList, {
    DxColumn,
    DxButton
} from 'devextreme-vue/tree-list';

export default {
    components: {
        DxTreeList,
        DxColumn,
        DxButton
    },
    methods: {
        logMyCommandClick() {
            console.log('My command was clicked');
        }
    }
}
</script>
React
App.js
import React from 'react';

import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import TreeList, {
    Column,
    Button
} from 'devextreme-react/tree-list';

class App extends React.Component {
    constructor(props) {
        super(props);
        this.renderMyCommand = this.renderMyCommand.bind(this);
    }
    logMyCommandClick() {
        console.log('My command was clicked');
    }
    renderMyCommand() {
        return <a href="#" onClick={this.logMyCommandClick}>My command</a>
    }

    render() {
        return (
            <TreeList ... >
                {/* ... */}
                <Column type="buttons">
                    <Button
                        render={this.renderMyCommand}
                    />
                </Column>
            </TreeList>
        );
    }
}
export default App;
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:
Name Type Description
column

TreeList Column

The column's properties.
component

TreeList

The widget's instance.
row

TreeList Row

The row'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
    ],
    // ...
})