Column Chooser in Blazor Grid
- 6 minutes to read
The column chooser is a pop-up window that lists all grid columns and allows you to:
- Show or hide columns
- Users can toggle a checkbox in the chooser to show/hide the corresponding column. This action changes the Column.Visible property value.
- Reorder columns
- Users can move a column to a new position within the column chooser. Such an operation changes the Column.VisibleIndex property value.
Show a Column Chooser
Call any of the ShowColumnChooser method overloads to display the column chooser:
<DxButton Text="Column Chooser" Click="ColumnChooserButton_Click" />
<DxGrid @ref="Grid" Data="Data">
<Columns>
@* ... *@
</Columns>
</DxGrid>
@code {
IGrid Grid { get; set; }
void ColumnChooserButton_Click() {
Grid.ShowColumnChooser();
}
}
You can also open the column chooser dialog via the built-in Grid context menu. Use the ShowColumnChooser property to add or remove the column chooser item:
@inject WeatherForecastService ForecastService
<DxGrid Data="@Data"
ContextMenus="GridContextMenus.Header"
CustomizeContextMenu="CustomizeContextMenu">
<Columns>
<DxGridDataColumn FieldName="Date" DisplayFormat="D" />
<DxGridDataColumn FieldName="TemperatureC" Caption="@("Temp. (\x2103)")" Width="120px" />
<DxGridDataColumn FieldName="TemperatureF" Caption="@("Temp. (\x2109)")" Width="120px" />
<DxGridDataColumn FieldName="Forecast" GroupIndex="0" />
<DxGridDataColumn FieldName="CloudCover" />
</Columns>
</DxGrid>
@code {
object Data { get; set; }
protected override void OnInitialized() {
Data = ForecastService.GetForecast();
}
void CustomizeContextMenu(GridCustomizeContextMenuEventArgs args) {
args.Items.Remove(GridContextMenuDefaultItemNames.ShowColumnChooser);
}
}
Column Chooser Items
The column chooser displays all visible and hidden Grid columns. Disable a column’s ShowInColumnChooser option to remove this column (and its children) from the dialog.
The column chooser reflects column settings as follows:
- The chooser draws a thick line between regular and fixed column zones (users can reorder columns within a zone but cannot move columns between zones).
- Lock icon indicates that users cannot change a column’s position.
- Grouped columns are hidden from the Grid data area and are disabled in the column chooser. Activate the ShowGroupedColumns property to display grouped columns in the Grid layout and enable them in the chooser.
<DxGrid Data="Data">
<Columns>
<DxGridDataColumn FieldName="SalesPerson" GroupIndex="0" Caption="Salesperson" />
<DxGridDataColumn FieldName="CompanyName" FixedPosition="GridColumnFixedPosition.Left" />
<DxGridDataColumn FieldName="OrderDate" Caption="Date" Width="100px" />
<DxGridBandColumn Caption="Product">
<Columns>
<DxGridDataColumn FieldName="ProductName" Caption="Name" />
<DxGridDataColumn FieldName="UnitPrice" DisplayFormat="c"
CaptionAlignment="GridTextAlignment.Right" Width="100px" />
</Columns>
</DxGridBandColumn>
<DxGridDataColumn FieldName="Quantity" Width="80px" AllowReorder="false" />
</Columns>
</DxGrid>
Customize Appearance
To customize the appearance of column chooser items, handle the CustomizeElement event. The following code snippet highlights fixed columns in the column chooser:
<DxGrid @ref="@Grid" Data="@Data" CustomizeElement="CustomizeColumnChooserItems">
<Columns>
<DxGridSelectionColumn FixedPosition="GridColumnFixedPosition.Left" />
<DxGridCommandColumn FixedPosition="GridColumnFixedPosition.Right" />
<DxGridDataColumn FieldName="CompanyName" />
<DxGridDataColumn FieldName="ContactName" />
<DxGridDataColumn FieldName="Phone" Visible="false" />
</Columns>
</DxGrid>
@code {
//...
void CustomizeColumnChooserItems(GridCustomizeElementEventArgs e) {
if(e.ElementType == GridElementType.ColumnChooserItem && e.Column.FixedPosition != GridColumnFixedPosition.None) {
e.CssClass = "highlighted-item";
}
}
}
Task-Based Examples
Display a Custom Column Chooser with Columns Sorted in Alphabetical Order
The Grid displays columns in the column chooser in the same order as they appear in the component. If the column chooser in your application does not require the column reorder feature, you can implement a custom column chooser to display columns alphabetically.
In the following code snippet, the DxListBox<TData, TValue> component lists Grid columns. When a user selects or deselects List Box items, the ValueChanged event fires. The event handler changes the column’s Visible property value according to the current item selection.
<DxListBox Data="AllColumns"
CssClass="my-list-box"
SelectionMode="ListBoxSelectionMode.Multiple"
ShowCheckboxes="true"
TextFieldName="Caption"
Values="VisibleColumns"
ValuesChanged="@((IEnumerable<IGridColumn> values) => SelectedDataItemsChanged(values))" />
<DxGrid @ref="Grid" Data="Data" PageSize="6">
<Columns>
<DxGridSelectionColumn Caption="Selection Column" />
<DxGridCommandColumn Caption="Command Column" />
<DxGridDataColumn FieldName="ContactName" Caption="Contact Name" />
<DxGridDataColumn FieldName="CompanyName" Caption="Company Name" />
<DxGridDataColumn FieldName="Country" Caption="Country" Visible="false" />
<DxGridDataColumn FieldName="City" Caption="City" />
<DxGridDataColumn FieldName="Phone" Caption="Phone" />
</Columns>
</DxGrid>
@code {
IGrid Grid { get; set; }
object Data { get; set; }
public IEnumerable<IGridColumn> AllColumns { get; set; }
public IEnumerable<IGridColumn> VisibleColumns { get; set; }
protected override async Task OnInitializedAsync() {
Data = await NwindDataService.GetSuppliersAsync();
}
void SelectedDataItemsChanged(IEnumerable<IGridColumn> values) {
Grid.BeginUpdate();
foreach (var column in Grid.GetColumns())
column.Visible = values.Contains(column);
Grid.EndUpdate();
VisibleColumns = values;
}
protected override void OnAfterRender(bool firstRender) {
if(firstRender) {
AllColumns = Grid.GetColumns().OrderBy(i => i, ColumnsComparerImpl.Default).ToList();
VisibleColumns = Grid.GetVisibleColumns();
StateHasChanged();
}
}
class ColumnsComparerImpl : IComparer<IGridColumn> {
public static IComparer<IGridColumn> Default { get; } = new ColumnsComparerImpl();
ColumnsComparerImpl() { }
int IComparer<IGridColumn>.Compare(IGridColumn x, IGridColumn y) {
if(x is IGridSelectionColumn)
return -1;
if(x is IGridCommandColumn && y is IGridDataColumn)
return -1;
if(x is IGridDataColumn xData && y is IGridDataColumn yData) {
var xName = !string.IsNullOrEmpty(xData.Caption) ? xData.Caption : xData.FieldName;
var yName = !string.IsNullOrEmpty(yData.Caption) ? yData.Caption : yData.FieldName;
return string.Compare(xName, yName);
}
return 0;
}
}
}
Display a Custom Column Chooser with Sorting, Search, and Select All Capabilities
In the following code snippet, the dialog includes the following features:
- Column visibility toggle
- Search Box
- Select All checkbox
<DxButton Text="Custom Column Chooser" Click="@ShowCustomColumnChooser"></DxButton>
@* ... *@
<DxGrid @ref="@MyGrid"
Data="@forecasts">
<Columns>
<DxGridSelectionColumn Caption="Selection Column" />
<DxGridDataColumn Caption="Date" FieldName="Date" ShowInColumnChooser="false" />
<DxGridDataColumn Caption="Temperature (C)" FieldName="TemperatureC" />
<DxGridDataColumn Caption="Temperature (F)" FieldName="TemperatureF" />
<DxGridDataColumn Caption="Description" FieldName="Summary" />
</Columns>
</DxGrid>
@* ... *@
<DxWindow @bind-Visible="@isCustomColumnChooserVisible"
HeaderText="Column Chooser"
Width="400px"
Height="auto"
ShowCloseButton="true">
<BodyTemplate>
<div class="column-chooser-body">
<DxListBox Data="@AllColumns"
ShowSearchBox="true"
SelectionMode="ListBoxSelectionMode.Multiple"
ShowCheckboxes="true"
ShowSelectAllCheckbox="true"
TextFieldName="Caption"
Values="VisibleColumns"
ValuesChanged="@((IEnumerable<IGridColumn> values) => SelectedDataItemsChanged(values))"
CssClass="column-listbox">
</DxListBox>
@* ... *@
</div>
</BodyTemplate>
</DxWindow>
@* ... *@
@code {
DxGrid MyGrid { get; set; } = default!;
private WeatherForecast[]? forecasts;
private bool isCustomColumnChooserVisible = false;
public IEnumerable<IGridColumn> AllColumns { get; set; }
public IEnumerable<IGridColumn> VisibleColumns { get; set; }
bool ReverseOrder { get; set; } = false;
@* ... *@
protected override async Task OnInitializedAsync() {
forecasts = await ForecastService.GetForecastsAsync();
}
protected override void OnAfterRender(bool firstRender) {
if (firstRender) {
InitializeColumnList();
}
}
private void ShowCustomColumnChooser() {
isCustomColumnChooserVisible = true;
}
private void InitializeColumnList() {
AllColumns = MyGrid.GetColumns().Where(i => i.ShowInColumnChooser).OrderBy(i => i, ColumnsComparerImpl.Default).ToList();
if (ReverseOrder)
AllColumns = AllColumns.Reverse();
VisibleColumns = MyGrid.GetVisibleColumns();
}
@* ... *@
void SelectedDataItemsChanged(IEnumerable<IGridColumn> values)
{
VisibleColumns = values;
UpdateColumnsVisibility();
}
void UpdateColumnsVisibility() {
MyGrid.BeginUpdate();
var columnCollection = MyGrid.GetColumns();
foreach (var column in columnCollection)
if (column.ShowInColumnChooser)
column.Visible = VisibleColumns.Contains(column);
MyGrid.EndUpdate();
}
@* ... *@
}