Box
API
Row
Map

jQuery DataGrid - 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".

cssClass

Specifies a CSS class to be applied to the button.

Type:

String

disabled

Specifies whether the button is disabled.

Type:

Boolean

|

Function

Function parameters:
options:

Object

Information about the current row and column that contain the button.

Object structure:
Name Type Description
column

DataGrid Column

The column's properties.

component

DataGrid

The UI component's instance.

row

DataGrid Row

The row's properties.

Return Value:

Boolean

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

Default Value: false

Use the function to activate or disable the button for specific rows. See a related example in the buttons[].visible topic.

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 property accepts one of the following:

See Also

name

The name used to identify a built-in button.

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
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
    ],
    // ...
})
Vue
App.vue
<template>
    <DxDataGrid ... >
        <DxColumn type="buttons">
            <DxButton
                name="save"
                css-class="my-class"
            />
        </DxColumn>
    </DxDataGrid>
</template>

<script>
import 'devextreme/dist/css/dx.light.css';

import DxDataGrid, {
    DxColumn,
    DxButton
} from 'devextreme-vue/data-grid';

export default {
    components: {
        DxDataGrid,
        DxColumn,
        DxButton
    },
    // ...
}
</script>
React
App.js
import React from 'react';
import 'devextreme/dist/css/dx.light.css';

import DataGrid, {
    Column,
    Button
} from 'devextreme-react/data-grid';

export default function App() {
    return (
        <DataGrid ... >
            <Column type="buttons">
                <Button
                    name="save"
                    cssClass="my-class"
                />
            </Column>
        </DataGrid>
    );
}

onClick

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

Type:

Function

Function parameters:

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

Object structure:
Name Type Description
column

DataGrid Column

The properties of the button's column.

component

DataGrid

The UI component's instance.

element

HTMLElement | jQuery

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 an EventObject or a jQuery.Event when you use jQuery.

row

DataGrid Row

The properties of the button's row.

template

Specifies a custom button template.

Type:

template

Template Data:
Name Type Description
column

DataGrid Column

The column's properties.

columnIndex

Number

The index of the cell's column.
Refer to Column and Row Indexes for more information.

component

DataGrid

The UI component's instance.

data

Object

The data of the cell's row.

key any

The row's key.

row

DataGrid Row

The row'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.

jQuery
index.js
$(function () {
    $("#dataGridContainer").dxDataGrid({
        // ...
        columns: [
            // ...
            {
                type: "buttons",
                buttons: [{
                    // ...
                    template: function(data) {
                        return $("<div>").addClass("dx-icon-email").css("display", "inline-block");
                    },
                }]
            }
        ]
    });
});
Angular
app.component.html
app.component.ts
<dx-data-grid ... >
    <dxi-column type="buttons">
        <dxi-button
            // ...
            template="buttonTemplate"
        ></dxi-button>
    </dxi-column>

    <div *dxTemplate="let data of 'buttonTemplate'">
        <div class="dx-icon-email" style="display:inline-block"></div>
    </div>
</dx-data-grid>
import { DxDataGridModule } from "devextreme-angular";
// ...
export class AppComponent {}
@NgModule({
    imports: [
        // ...
        DxDataGridModule
    ],
    // ...
})
Vue
App.vue (Options API)
App.vue (Composition API)
<template>
    <DxDataGrid ... >
        <DxColumn type="buttons">
            <DxButton
                // ...
                template="buttonTemplate"
            />
        </DxColumn>
        <template #buttonTemplate="{ data }">
            <div class="dx-icon-email" style="display:inline-block"></div>
        </template>
    </DxDataGrid>
</template>

<script>
import 'devextreme/dist/css/dx.light.css';
import DxDataGrid, {
    DxColumn,
    DxButton
} from 'devextreme-vue/data-grid';

export default {
    components: {
        DxDataGrid,
        DxColumn,
        DxButton
    },
}
</script>
<template>
    <DxDataGrid ... >
        <DxColumn type="buttons">
            <DxButton
                // ...
                template="buttonTemplate"
            />
        </DxColumn>
        <template #buttonTemplate="{ data }">
            <div class="dx-icon-email" style="display:inline-block"></div>
        </template>
    </DxDataGrid>
</template>

<script setup>
import 'devextreme/dist/css/dx.light.css';
import DxDataGrid, {
    DxColumn,
    DxButton
} from 'devextreme-vue/data-grid';
// ...
</script>
React
App.js
import React from 'react';
import 'devextreme/dist/css/dx.light.css';

import DataGrid, {
    Column,
    Button
} from 'devextreme-react/data-grid';

const buttonRender = (data) => {
    return <div className="dx-icon-email" style="display: inline-block"></div>;
}

export default function App() {
    return (
        <DataGrid ... >
            <Column type="buttons">
                <Button
                // ...
                    render={buttonRender}
                />
            </Column>
        </DataGrid>
    );
}
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:
Name Type Description
column

DataGrid Column

The column's properties.

component

DataGrid

The UI component's instance.

row

DataGrid Row

The row'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 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
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
    ],
    // ...
})
Vue
App.vue
<template>
    <DxDataGrid ... >
        <DxColumn type="buttons">
            <DxButton
                text="Cancel"
                :visible="isCancelButtonVisible"
            />
        </DxColumn>
    </DxDataGrid>
</template>

<script>
import 'devextreme/dist/css/dx.light.css';

import DxDataGrid, {
    DxColumn,
    DxButton
} from 'devextreme-vue/data-grid';

export default {
    components: {
        DxDataGrid,
        DxColumn,
        DxButton
    },
    // ...
    methods: {
        isCancelButtonVisible (e) {
            return !e.row.isEditing && !e.row.data.isCompleted;
        }
    }
}
</script>
React
App.js
import React from 'react';
import 'devextreme/dist/css/dx.light.css';

import DataGrid, {
    Column,
    Button
} from 'devextreme-react/data-grid';

function isCancelButtonVisible (e) {
    return !e.row.isEditing && !e.row.data.isCompleted;
}

export default function App() {
    return (
        <DataGrid ... >
            <Column type="buttons">
                <Button
                    text="Cancel"
                    visible={isCancelButtonVisible}
                />
            </Column>
        </DataGrid>
    );
}

View Demo