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

name

The name used to identify a built-in button.

Type:

String

Accepted Values: '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 () {
    $("#dataGridContainer").dxDataGrid({
        // ...
        columns: [{
            type: "buttons",
            buttons: [{
                name: "save",
                cssClass: "my-class"
            }]
        }]
    });
});

Angular

HTML

TypeScript

<dx-data-grid ... >
    <dxi-column type="buttons">
        <dxi-button
            name="save"
            cssClass="my-class">
        </dxi-button>
    </dxi-column>
</dx-data-grid>

import { DxDataGridModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxDataGridModule
    ],
    // ...
})

onClick

A function that is executed when the button is clicked or tapped.

Type:

Function

|

String

Function parameters:

e:

Object

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

Object structure:

Name	Type	Description
component	DataGrid	The widget's instance.
element	HTMLElement \| jQuery	The widget's container. It is an HTML Element or a jQuery Element when you use jQuery.
model	Object	The model data. Available only if you use Knockout.
event	Event (jQuery or EventObject)	The event that caused the function's execution. It is a dxEvent or a jQuery.Event when you use jQuery.
row	DataGrid Row	The properties of the button's row.
column	DataGrid Column	The properties of the button's column.

template

Specifies a custom button template.

Type:

template

Template Data:

Name	Type	Description
component	DataGrid	The widget's instance.
data	Object	The data of the cell's row.
key	any	The row's key.
columnIndex	Number	The index of the cell's column. Refer to Column and Row Indexes for more information.
column	DataGrid Column	The column'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.
row	DataGrid Row	The row's properties.

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

component

DataGrid

The widget's instance.

row

DataGrid Row

The row's properties.

column

DataGrid Column

The column's properties.

Return Value:

Boolean

true if the button should be visible; otherwise, false.

Default Value: true

Use the function to show or hide the button for specific rows. For example, the widget 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

JavaScript

$(function () {
    $("#dataGridContainer").dxDataGrid({
        // ...
        columns: [{
            type: "buttons",
            buttons: [{
                text: "Cancel",
                visible: function (e) {
                    return !e.row.isEditing && !e.row.data.isCompleted;
                }
            }]
        }]
    });
});

Angular

HTML

TypeScript

<dx-data-grid ... >
    <dxi-column type="buttons">
        <dxi-button
            text="Cancel"
            [visible]="isCancelButtonVisible">
        </dxi-button>
    </dxi-column>
</dx-data-grid>

import { DxDataGridModule } from "devextreme-angular";
// ...
export class AppComponent {
    isCancelButtonVisible (e) {
        return !e.row.isEditing && !e.row.data.isCompleted;
    }
}
@NgModule({
    imports: [
        // ...
        DxDataGridModule
    ],
    // ...
})

View Demo

buttons[]

See Also

cssClass

hint

icon

See Also

name

jQuery

Angular

onClick

template

See Also

text

visible

jQuery

Angular