JavaScript/jQuery 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
],
// ...
})