Command Columns

The DataGrid provides the following command columns:

DevExtreme HTML5 JavaScript DataGrid CommandColumns EditingColumn AdaptiveColumn

Configure a Command Column

All columns are configured in the columns array. Assign a command column's name to the type option and specify the other column options.

The following example shows how to specify the adaptive column's width:

jQuery
JavaScript
$(function () {
    $("#dataGridContainer").dxDataGrid({
        // ...
        columns: [{
            type: "adaptive",
            width: 50
        }]
    });
});
Angular
HTML
TypeScript
<dx-data-grid ... >
    <dxi-column type="adaptive" [width]="50"></dxi-column>
</dx-data-grid>
import { DxDataGridModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxDataGridModule
    ],
    // ...
})
Vue
App.vue
<template>
    <dx-data-grid ... >
        <dx-column type="adaptive" :width="50" />
    </dx-data-grid>
</template>

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

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

export default {
    components: {
        DxDataGrid,
        DxColumn
    },
    data() {
        return {
            // ...
        }
    }
}
</script>
React
App.js
import React from 'react';

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

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

class App extends React.Component {

    render() {
        return (
            <DataGrid ... >
                <Column type="adaptive" width={50} />
            </DataGrid>
        );
    }
}
export default App;
ASP.NET MVC Controls
Razor C#
@(Html.DevExtreme().DataGrid()
    // ...
    .Columns(cols => {
        cols.Add().Type(GridCommandColumnType.Adaptive).Width(50);
    })
)

If a command column should have custom content, specify the column's cellTemplate and headerCellTemplate:

jQuery
JavaScript
$(function () {
    $("#dataGridContainer").dxDataGrid({
        // ...
        columns: [{
            type: "selection",
            cellTemplate: function ($cellElement, cellInfo) {
                // Render custom cell content here
            },
            headerCellTemplate: function ($headerElement, headerInfo) {
                // Render custom header content here
            }
        }]
    });
});
Angular
HTML
TypeScript
<dx-data-grid ... >
    <dxi-column
        type="selection"
        cellTemplate="selectionCellTemplate"
        headerCellTemplate="selectionHeaderCellTemplate">
    </dxi-column>
    <div *dxTemplate="let cellInfo of 'selectionCellTemplate'">
        <!-- Declare custom cell content here -->
    </div>
    <div *dxTemplate="let headerInfo of 'selectionHeaderCellTemplate'">
        <!-- Declare custom header content here -->
    </div>
</dx-data-grid>
import { DxDataGridModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxDataGridModule
    ],
    // ...
})
Vue
App.vue
<template>
    <dx-data-grid ... >
        <dx-column
            type="selection"
            cell-template="selectionCellTemplate"
            header-cell-template="selectionHeaderCellTemplate"
        />
        <template #selectionCellTemplate="{ data }">
            <!-- Declare custom cell content here -->
        </template>
        <template #selectionHeaderCellTemplate="{ data }">
            <!-- Declare custom header content here -->
        </template>
    </dx-data-grid>
</template>

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

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

export default {
    components: {
        DxDataGrid,
        DxColumn
    },
    data() {
        return {
            // ...
        }
    }
}
</script>
React
App.js
import React from 'react';

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

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

const renderCell = (cellInfo) => {
    {/* Declare custom cell content here */}
}

const renderHeaderCell = (headerInfo) => {
    {/* Declare custom header content here */}
}

class App extends React.Component {
    render() {
        return (
            <DataGrid ... >
                <Column
                    type="selection"
                    cellRender={renderCell}
                    headerCellRender={renderHeaderCell}
                />
            </DataGrid>
        );
    }
}
export default App;
ASP.NET MVC Controls
Razor C#
@(Html.DevExtreme().DataGrid()
    // ...
    .Columns(cols => {
        cols.Add()
            .Type(GridCommandColumnType.Selection)
            .CellTemplate(@<text>
               @* Declare custom cell content here *@
            </text>)
            .HeaderCellTemplate(@<text>
                @* Declare custom header content here *@
            </text>);
    })
)

Reorder Command Columns

Command columns are reordered similarly to regular columns. Refer to the Column Reordering article for more information.

Customize the Editing Column

The editing column appears when editing is allowed. The avaiable editing buttons depend on the editing mode.

The editing column is a type of buttons column. To customize it, set the column's type to "buttons" and specify the other options.

View Demo

The following articles describe how to customize editing buttons.

Customize Buttons

The column's buttons array allows you to customize the built-in editing buttons. It can contain configuration objects or button names if the buttons should be available but do not need customizations.

In the following code, a CSS class is added to the Save button. The Edit and Delete buttons should also be declared to display them:

jQuery
JavaScript
$(function () {
    $("#dataGridContainer").dxDataGrid({
        // ...
        columns: [{
            type: "buttons",
            buttons: [{
                name: "save",
                cssClass: "my-class"
            }, "edit", "delete"]
        }]
    });
});
Angular
HTML
TypeScript
<dx-data-grid ... >
    <dxi-column type="buttons">
        <dxi-button
            name="save"
            cssClass="my-class">
        </dxi-button>
        <dxi-button name="edit"></dxi-button>
        <dxi-button name="delete"></dxi-button>
    </dxi-column>
</dx-data-grid>
import { DxDataGridModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxDataGridModule
    ],
    // ...
})
Vue
App.vue
<template>
    <dx-data-grid ... >
        <dx-column type="buttons">
            <dx-button name="save" css-class="my-class" />
            <dx-button name="edit" />
            <dx-button name="delete" />
        </dx-column>
    </dx-data-grid>
</template>

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

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

export default {
    components: {
        DxDataGrid,
        DxColumn,
        DxButton
    },
    data() {
        return {
            // ...
        }
    }
}
</script>
React
App.js
import React from 'react';

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

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

class App extends React.Component {

    render() {
        return (
            <DataGrid ... >
                <Column type="buttons">
                    <Button name="save" cssClass="my-class" />
                    <Button name="edit" />
                    <Button name="delete" />
                </Column>
            </DataGrid>
        );
    }
}
export default App;
ASP.NET MVC Controls
Razor C#
@(Html.DevExtreme().DataGrid()
    // ...
    .Columns(cols => {
        cols.Add()
            .Type(GridCommandColumnType.Buttons)
            .Buttons(btns => {
                btns.Add().Name(GridColumnButtonName.Save).CssClass("my-class");
                btns.Add().Name(GridColumnButtonName.Edit);
                btns.Add().Name(GridColumnButtonName.Delete);
            });
    })
)

Hide a Button

Editing buttons' visibility depends on the allowed editing capabilities. For example, the Delete button is visible if users can delete rows. You can configure the editing capabilities in the editing object.

The Edit and Delete buttons can be hidden by omitting them when declaring the buttons array. However, users can still use the keyboard to edit and delete.

jQuery
JavaScript
$(function () {
    $("#dataGridContainer").dxDataGrid({
        // ...
        editing: {
            allowUpdating: true,
            allowDeleting: true
        },
        columns: [{
            type: "buttons",
            buttons: ["edit"] // The Delete button is hidden
        }]
    });
});
Angular
HTML
TypeScript
<dx-data-grid ... >
    <dxo-editing
        [allowUpdating]="true"
        [allowDeleting]="true">
    </dxo-editing>
    <dxi-column type="buttons">
        <dxi-button name="edit"></dxi-button>
    </dxi-column>
</dx-data-grid>
import { DxDataGridModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxDataGridModule
    ],
    // ...
})
Vue
App.vue
<template>
    <dx-data-grid ... >
        <dx-editing
            :allow-updating="true"
            :allow-deleting="true"
        />
        <dx-column type="buttons">
            <dx-button name="edit" />
        </dx-column>
    </dx-data-grid>
</template>

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

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

export default {
    components: {
        DxDataGrid,
        DxEditing,
        DxColumn,
        DxButton
    },
    data() {
        return {
            // ...
        }
    }
}
</script>
React
App.js
import React from 'react';

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

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

class App extends React.Component {

    render() {
        return (
            <DataGrid ... >
                <Editing
                    allowUpdating={true}
                    allowDeleting={true}
                />
                <Column type="buttons">
                    <Button name="edit" />
                </Column>
            </DataGrid>
        );
    }
}
export default App;
ASP.NET MVC Controls
Razor C#
@(Html.DevExtreme().DataGrid()
    // ...
    .Editing(ed => ed
        .AllowUpdating(true)
        .AllowDeleting(true)
    )
    .Columns(cols => {
        cols.Add()
            .Type(GridCommandColumnType.Buttons)
            .Buttons(btns => {
                btns.Add().Name(GridColumnButtonName.Edit);
            });
    })
)

You can hide an editing button or disable editing capabilities for specific rows. Use functions to specify the button's visible option or the editing.allowUpdating/allowDeleting option. Refer to the options' descriptions for examples.

Add a Custom Button

Add an object to the buttons array and specify the button's options in it...

jQuery
JavaScript
$(function () {
    $("#dataGridContainer").dxDataGrid({
        // ...
        columns: [{
            type: "buttons",
            buttons: ["edit", "delete", {
                text: "My Command",
                icon: "/url/to/my/icon.ico",
                hint: "My Command",
                onClick: function (e) {
                    // Execute your command here
                }
            }]
        }]
    });
});
Angular
HTML
TypeScript
<dx-data-grid ... >
    <dxi-column type="buttons">
        <dxi-button name="edit"></dxi-button>
        <dxi-button name="delete"></dxi-button>
        <dxi-button
            text="My Command"
            icon="/url/to/my/icon.ico"
            hint="My Command"
            [onClick]="myCommand">
        </dxi-button>
    </dxi-column>
</dx-data-grid>
import { DxDataGridModule } from "devextreme-angular";
// ...
export class AppComponent {
    myCommand (e) {
        // Execute your command here
    }
}
@NgModule({
    imports: [
        // ...
        DxDataGridModule
    ],
    // ...
})
Vue
App.vue
<template>
    <dx-data-grid ... >
        <dx-column type="buttons">
            <dx-button name="edit" />
            <dx-button name="delete" />
            <dx-button 
                text="My Command"
                icon="/url/to/my/icon.ico"
                hint="My Command"
                :on-click="myCommand"
            />
        </dx-column>
    </dx-data-grid>
</template>

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

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

export default {
    components: {
        DxDataGrid,
        DxColumn,
        DxButton
    },
    data() {
        return {
            // ...
        }
    },
    methods: {
        myCommand(e) {
            // Execute your command here
        }
    }
}
</script>
React
App.js
import React from 'react';

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

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

class App extends React.Component {
    myCommand (e) {
        // Execute your command here
    }

    render() {
        return (
            <DataGrid ... >
                <Column type="buttons">
                    <Button name="edit" />
                    <Button name="delete" />
                    <Button
                        text="My Command"
                        icon="/url/to/my/icon.ico"
                        hint="My Command"
                        onClick={this.myCommand}
                    />
                </Column>
            </DataGrid>
        );
    }
}
export default App;
ASP.NET MVC Controls
Razor C#
@(Html.DevExtreme().DataGrid()
    // ...
    .Columns(cols => {
        cols.Add()
            .Type(GridCommandColumnType.Buttons)
            .Buttons(btns => {
                btns.Add().Name(GridColumnButtonName.Edit);
                btns.Add().Name(GridColumnButtonName.Delete);
                btns.Add()
                    .Text("My Command")
                    .Icon("/url/to/my/icon.ico")
                    .Hint("My Command")
                    .OnClick("myCommand");
            });
    })
)

<script type="text/javascript">
    function myCommand(e) {
        // Execute your command here
    }
</script>

... or render the button with custom appearance using a template:

jQuery
JavaScript
$(function () {
    $("#dataGridContainer").dxDataGrid({
        // ...
        columns: [{
            type: "buttons",
            buttons: ["edit", "delete", {
                template: function (e) {
                    // Specify custom markup here
                }
            }]
        }]
    });
});
Angular
HTML
TypeScript
<dx-data-grid ... >
    <dxi-column type="buttons">
        <dxi-button name="edit"></dxi-button>
        <dxi-button name="delete"></dxi-button>
        <dxi-button>
            <!-- Declare custom markup here -->
        </dxi-button>
    </dxi-column>
</dx-data-grid>
import { DxDataGridModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxDataGridModule
    ],
    // ...
})
Vue
App.vue
<template>
    <dx-data-grid ... >
        <dx-column type="buttons">
            <dx-button name="edit" />
            <dx-button name="delete" />
            <dx-button #default>
                <!-- Declare custom markup here -->
            </dx-button>
        </dx-column>
    </dx-data-grid>
</template>

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

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

export default {
    components: {
        DxDataGrid,
        DxColumn,
        DxButton
    },
    data() {
        return {
            // ...
        }
    }
}
</script>
React
App.js
import React from 'react';

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

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

class App extends React.Component {
    render() {
        return (
            <DataGrid ... >
                <Column type="buttons">
                    <Button name="edit" />
                    <Button name="delete" />
                    <Button>
                        {/* Declare custom markup here */}
                    </Button>
                </Column>
            </DataGrid>
        );
    }
}
export default App;
ASP.NET MVC Controls
Razor C#
@(Html.DevExtreme().DataGrid()
    // ...
    .Columns(cols => {
        cols.Add()
            .Type(GridCommandColumnType.Buttons)
            .Buttons(btns => {
                btns.Add().Name(GridColumnButtonName.Edit);
                btns.Add().Name(GridColumnButtonName.Delete);
                btns.Add()
                    .Template(@<text>
                        @* Declare custom markup here *@
                    </text>);
            });
    })
)

Create a Column with Custom Buttons

The following code shows how to add a command column with custom buttons. Note that the editing column should be declared explicitly because a custom command column replaces it.

jQuery
JavaScript
$(function () {
    $("#dataGridContainer").dxDataGrid({
        // ...
        columns: [{
            type: "buttons",
            buttons: ["edit", "delete"]
        }, 
        "firstName",
        "lastName", {
            type: "buttons",
            buttons: [
                // Declare and configure custom buttons here
            ]
        }]
    });
});
Angular
HTML
TypeScript
<dx-data-grid ... >
    <dxi-column type="buttons" [buttons]="['edit', 'delete']"></dxi-column>
    <dxi-column dataField="firstName"></dxi-column>
    <dxi-column dataField="lastName"></dxi-column>
    <dxi-column type="buttons">
        <dxi-button ... ></dxi-button>
        <!-- Declare and configure custom buttons here -->
    </dxi-column>
</dx-data-grid>
import { DxDataGridModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxDataGridModule
    ],
    // ...
})
Vue
App.vue
<template>
    <dx-data-grid ... >
        <dx-column type="buttons">
            <dx-button name="edit" />
            <dx-button name="delete" />
        </dx-column>
        <dx-column data-field="firstName" />
        <dx-column data-field="lastName" />
        <dx-column type="buttons">
            <dx-button ... />
            <!-- Declare and configure custom buttons here -->
        </dx-column>
    </dx-data-grid>
</template>

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

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

export default {
    components: {
        DxDataGrid,
        DxColumn,
        DxButton
    },
    data() {
        return {
            // ...
        }
    }
}
</script>
React
App.js
import React from 'react';

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

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

class App extends React.Component {
    render() {
        return (
            <DataGrid ... >
                <Column type="buttons">
                    <Button name="edit" />
                    <Button name="delete" />
                </Column>
                <Column dataField="firstName" />
                <Column dataField="lastName" />
                <Column type="buttons">
                    <Button ... />
                    {/* Declare and configure custom buttons here */}
                </Column>
            </DataGrid>
        );
    }
}
export default App;
ASP.NET MVC Controls
Razor C#
@(Html.DevExtreme().DataGrid()
    // ...
    .Columns(cols => {
        cols.Add()
            .Type(GridCommandColumnType.Buttons)
            .Buttons(btns => {
                btns.Add().Name(GridColumnButtonName.Edit);
                btns.Add().Name(GridColumnButtonName.Delete);

            });
        cols.Add().DataField("firstName");
        cols.Add().DataField("lastName");
        cols.Add()
            .Type(GridCommandColumnType.Buttons)
            .Buttons(btns => {
                btns.Add() ...
                @* Declare and configure custom buttons here *@
            });
    })
)