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.

name

The name used to identify a built-in button.

Type:

DataGridPredefinedColumnButton

String

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:

ColumnButtonClickEvent

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.

View Demo

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'" style="display:inline-block">
        <div class="dx-icon-email"></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>
    );
}

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

Feedback

Was this page helpful?

Thanks for your feedback!
Any other suggestions? Tell us here.

Additional Feedback

General Information

.NET Subscription

Common Tools

Quality Assurance and Productivity

Desktop

Controls

Tools

Frameworks and Libraries

Web

Controls and Extensions

Tools

Maintenance Mode

Mobile

Enterprise and Analytic Tools

End-User Documentation

General Information

.NET Subscription

Common Tools

Quality Assurance and Productivity

Desktop

Controls

Tools

Frameworks and Libraries

Web

Controls and Extensions

Tools

Maintenance Mode

Mobile

Enterprise and Analytic Tools

End-User Documentation

JavaScript/jQuery DataGrid - columns.buttons

See Also

cssClass

disabled

hint

icon

See Also

name

jQuery

Angular

Vue

React

onClick

template

jQuery

Angular

Vue

React

See Also

text

visible

jQuery

Angular

Vue

React