DxDataGridColumnChooserToolbarItem Class

Adds the Column Chooser item to the Data Grid’s toolbar.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v21.1.dll


public class DxDataGridColumnChooserToolbarItem :


Use the DxDataGridColumnChooserToolbarItem item type to display the Column Chooser in the Data Grid‘s toolbar.

DataGrid Column Chooser

The Column Chooser window displays a list of ungrouped data column headers (visible and hidden). Command and selection columns are not shown in the Column Chooser. To change a default behavior and specify whether a column should be displayed in the Column Chooser window, use the ShowInColumnChooser property.

The Column Chooser window allows users to:

  • Change column visibility. To show or hide a column, use the checkbox next to the column header.
  • Reorder columns. To change a column’s position in the grid, use the drag icon next to the column header to drag and drop the column.

To display the Column Chooser in the Data Grid’s toolbar, follow the steps below:

  1. Add HeaderTemplate to the Data Grid’s markup.
  2. Add the DxDataGridColumnChooserToolbarItem item to the Toolbar component in this template.
  3. (Optional) Use the item’s API to change the default button settings. For example, use the Alignment property to change the button alignment.


DxDataGridColumnChooserToolbarItem buttons are used for toolbars defined in the Data Grid component only. Do not use these buttons for standalone toolbars.

<DxDataGrid Data="@DataSource">
            <DxDataGridColumnChooserToolbarItem Alignment="ToolbarItemAlignment.Right" />
        <DxDataGridColumn Field="@nameof(Employee.FirstName)" />
        <DxDataGridColumn Field="@nameof(Employee.LastName)" />
        <DxDataGridColumn Field="@nameof(Employee.Title)" />
        <DxDataGridDateEditColumn Field="@nameof(Employee.HireDate)" />
        <DxDataGridDateEditColumn Field="@nameof(Employee.BirthDate)" Visible="false" />
        <DxDataGridColumn Field="@nameof(Employee.ImageFileName)" Visible="false" />
        <DxDataGridColumn Field="@nameof(Employee.Notes)" Visible="false" />

Run Demo: Data Grid - Column Chooser

Run Demo: Data Grid - Hide a Column from the Column Chooser


See Also