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:

String

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

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. Not executed if a template is used.

Type:

Function

Function parameters:

Object

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.
model	Object	The model data. Available only if you use Knockout.
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.

IMPORTANT

When you use a custom button template, the onClick function is ignored. Instead, handle the click event of the element placed inside the template:

jQuery

index.js

$(function() {
    $("#dataGridContainer").dxDataGrid({
        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;
                    }
                }]
            }
        ]

    });
});

Angular

app.component.html

app.component.ts

app.module.ts

<dx-data-grid ... >
    <!-- ... -->
    <dxi-column type="buttons">
        <dxi-button template="myCommand">
            <div *dxTemplate="let data of 'myCommand'">
                <a href="#" (click)="logMyCommandClick()">My command</a>
            </div>
        </dxi-button>
    </dxi-column>
</dx-data-grid>

import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    logMyCommandClick() {
        console.log('My command was clicked');
    }
}

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';

import { DxDataGridModule } from 'devextreme-angular';

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        DxDataGridModule
    ],
    providers: [ ],
    bootstrap: [AppComponent]
})
export class AppModule { }

Vue

App.vue

<template>
    <DxDataGrid ... >
        <!-- ... -->
        <DxColumn type="buttons">
            <DxButton>
                <template #default>
                    <a href="#" @click="logMyCommandClick">My command</a>
                </template>
            </DxButton>
        </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: {
        logMyCommandClick() {
            console.log('My command was clicked');
        }
    }
}
</script>

React

App.js

import React from 'react';

import 'devextreme/dist/css/dx.light.css';

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

class App extends React.Component {
    constructor(props) {
        super(props);
        this.renderMyCommand = this.renderMyCommand.bind(this);
    }
    logMyCommandClick() {
        console.log('My command was clicked');
    }
    renderMyCommand() {
        return <a href="#" onClick={this.logMyCommandClick}>My command</a>
    }

    render() {
        return (
            <DataGrid ... >
                {/* ... */}
                <Column type="buttons">
                    <Button
                        render={this.renderMyCommand}
                    />
                </Column>
            </DataGrid>
        );
    }
}
export default App;

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

jQuery DataGrid - columns.buttons

See Also

cssClass

hint

icon

See Also

name

jQuery

Angular

Vue

React

onClick

template

jQuery

Angular

Vue

React

See Also

text

visible

jQuery

Angular

Vue

React