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 property 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 property. The other properties 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 ], // ... })
Vue
<template> <DxTreeList ... > <DxColumn type="buttons"> <DxButton name="save" css-class="my-class" /> </DxColumn> </DxTreeList> </template> <script> import 'devextreme/dist/css/dx.light.css'; import DxTreeList, { DxColumn, DxButton } from 'devextreme-vue/tree-list'; export default { components: { DxTreeList, DxColumn, DxButton }, // ... } </script>
React
import React from 'react'; import 'devextreme/dist/css/dx.light.css'; import TreeList, { Column, Button } from 'devextreme-react/tree-list'; export default function App() { return ( <TreeList ... > <Column type="buttons"> <Button name="save" cssClass="my-class" /> </Column> </TreeList> ); }
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 UI component's instance. |
|
element |
The UI component'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 UI component'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> <template #default> <a href="#" @click="logMyCommandClick">My command</a> </template> </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 UI component's instance. |
|
row |
The row's properties. |
Use the function to show or hide the button for specific rows. For example, the UI component lists online orders and allows users to edit them. The 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 ], // ... })
Vue
<template> <DxTreeList ... > <DxColumn type="buttons"> <DxButton text="Cancel" :visible="isCancelButtonVisible" /> </DxColumn> </DxTreeList> </template> <script> import 'devextreme/dist/css/dx.light.css'; import DxTreeList, { DxColumn, DxButton } from 'devextreme-vue/tree-list'; export default { components: { DxTreeList, DxColumn, DxButton }, // ... methods: { isCancelButtonVisible (e) { return !e.row.isEditing && !e.row.data.isCompleted; } } } </script>
React
import React from 'react'; import 'devextreme/dist/css/dx.light.css'; import TreeList, { Column, Button } from 'devextreme-react/tree-list'; function isCancelButtonVisible (e) { return !e.row.isEditing && !e.row.data.isCompleted; } export default function App() { return ( <TreeList ... > <Column type="buttons"> <Button text="Cancel" visible={isCancelButtonVisible} /> </Column> </TreeList> ); }
If you have technical questions, please create a support ticket in the DevExpress Support Center.