buttons[]

Allows you to customize buttons in the editing column or create a custom command column. Applies only if the column's type is "buttons".

Accepted Values: 'cancel' | 'delete' | 'edit' | 'save' | 'undelete'

cssClass

Specifies a CSS class to be applied to the button.

Type:

String

hint

Specifies the text for the hint that appears when the button is hovered over or long-pressed.

Type:

String

icon

Specifies the button's icon.

Type:

String

This option accepts one of the following:

See Also

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:
component:

DataGrid

The widget's instance.

element:

Element (jQuery or HTML)

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 dxEvent)

The event that caused the function's execution. It is a dxEvent or a jQuery.Event when you use jQuery.

The properties of the button's row.

The properties of the button's column.

template

Specifies a custom button template.

Type:

template

Function parameters:
cellElement:

Element (jQuery or HTML)

The container of the cell that should display the button. It is an HTML Element or a jQuery Element when you use jQuery.

cellInfo:

Object

The cell's properties.

Object structure:
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.

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.

The row's properties.

Return Value:

String

|

DOM Node

|

jQuery

A template name or container.

See Also

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:
component:

DataGrid

The widget's instance.

The row's properties.

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