Blazor Grid – How to Implement a Custom Column Chooser with Integrated Sorting, Search, and Select All Capabilities

This example implements a custom Column Chooser dialog for the DevExpress Blazor Grid component. The dialog includes the following features/capabilities:

• Allows users to toggle column visibility
• Displays Grid columns in alphabetical order
• Displays a Search Box
• Includes a Select All check box

Use buttons above our Blazor Grid component to open custom and built-in Column Chooser dialogs and compare associated functionality.

Implementation Details

Display Grid Columns

Use the DevExpress Blazor List Box component to display Grid columns in a custom Column Chooser dialog. Retrieve a column collection from the Grid, exclude columns whose ShowInColumnChooser property is set to false, and assign the resulting collection to the List Box:

<DxListBox Data="@AllColumns"
           TextFieldName="Caption"
           Values="VisibleColumns">
</DxListBox>

private void InitializeColumnList() {
    AllColumns = MyGrid.GetColumns().Where(i => i.ShowInColumnChooser).OrderBy(i => i, ColumnsComparerImpl.Default).ToList();
    VisibleColumns = MyGrid.GetVisibleColumns();
}

Toggle Column Visibility

Activate the ShowCheckboxes property to display item checkboxes. Switch the List Box to multi-select mode and synchronize selected items with visible Grid columns:

<DxListBox ...
           ShowCheckboxes="true"
           SelectionMode="ListBoxSelectionMode.Multiple"
           ValuesChanged="@((IEnumerable<IGridColumn> values) => SelectedDataItemsChanged(values))">
</DxListBox>

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();
}

Add Select All and Search Features

Activate the ShowSelectAllCheckbox property to display a Select All checkbox. Use the ShowSearchBox option to add search functionality in the List Box:

<DxListBox ...
           ShowSearchBox="true"
           ShowSelectAllCheckbox="true">
</DxListBox>

Sort Columns

Implement a comparer to sort List Box items in the following order:

1. Selection column
2. Command column
3. Data columns, sorted alphabetically by caption/field name

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;
    }
}

Add a CheckBox editor that changes sort order dynamically:

<DxCheckBox Checked="ReverseOrder" CheckedChanged="@((bool value) => OnReverseOrder(value))">
    Reverse Order
</DxCheckBox>

private void OnReverseOrder(bool newValue) {
    ReverseOrder = newValue;
    AllColumns = AllColumns.Reverse();
}

Files to Review

• Index.razor
• site.css

Documentation

• Blazor Grid – Column Chooser
• Blazor List Box – Item Selection

Does This Example Address Your Development Requirements/Objectives?

(you will be redirected to DevExpress.com to submit your response)