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 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:
- $(function () {
- $("#treeListContainer").dxTreeList({
- // ...
- columns: [{
- type: "buttons",
- buttons: [{
- name: "save",
- cssClass: "my-class"
- }]
- }]
- });
- });
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:
- $(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;
- }
- }]
- }
- ]
- });
- });
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 when you need to show or hide the button for specific rows. For example, the UI component 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:
- $(function () {
- $("#treeListContainer").dxTreeList({
- // ...
- columns: [{
- type: "buttons",
- buttons: [{
- text: "Cancel",
- visible: function (e) {
- return !e.row.isEditing && !e.row.data.isCompleted;
- }
- }]
- }]
- });
- });
If you have technical questions, please create a support ticket in the DevExpress Support Center.