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".
component
An alias for the template property specified in React. Accepts a custom component. Refer to Using a Custom Component for more information.
icon
This option accepts one of the following:
- The icon's URL
- The icon's name if the icon is from the DevExtreme icon library
- The icon's CSS class if the icon is from an external icon library (see External Icon Libraries)
- The icon in the Base64 format
- The icon in the SVG format. Ensure that the source is reliable.
See Also
- buttons[].text
name
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
$(function () { $("#treeListContainer").dxTreeList({ // ... columns: [{ type: "buttons", buttons: [{ name: "save", cssClass: "my-class" }] }] }); });
Angular
<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.
Name | Type | Description |
---|---|---|
column |
The properties of the button's column. |
|
component |
The widget's instance. |
|
element |
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 |
The model data. Available only if you use Knockout. |
|
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
Name | Type | Description |
---|---|---|
column |
The column's properties. |
|
columnIndex |
The index of the cell's column. |
|
component |
The widget's instance. |
|
data |
The data of the cell's row. |
|
key | any |
The row's key. |
row |
The row's properties. |
|
rowIndex |
The index of the cell's row. Begins with 0 on each page. Group rows are included. |
|
rowType |
The row's type. |
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
$(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
<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
<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
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
visible
Name | Type | Description |
---|---|---|
column |
The column's properties. |
|
component |
The widget's instance. |
|
row |
The row's properties. |
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
$(function () { $("#treeListContainer").dxTreeList({ // ... columns: [{ type: "buttons", buttons: [{ text: "Cancel", visible: function (e) { return !e.row.isEditing && !e.row.data.isCompleted; } }] }] }); });
Angular
<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 ], // ... })
If you have technical questions, please create a support ticket in the DevExpress Support Center.