Index.razor

@page "/"
@using CustomColumnChooser.Services
@inject WeatherForecastService ForecastService

<PageTitle>Welcome</PageTitle>

<DxButton Text="Built-in Column Chooser" Click="() => MyGrid.ShowColumnChooser()"></DxButton>
<DxButton Text="Custom Column Chooser" Click="@ShowCustomColumnChooser"></DxButton>

@if (forecasts == null) {
    <p><em>Loading...</em></p>
}
else {
    <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 class="column-chooser-buttons">
                <DxCheckBox Checked="ReverseOrder" CheckedChanged="@((bool value) => OnReverseOrder(value))">
                    Reverse Order
                </DxCheckBox>
            </div>
        </div>
    </BodyTemplate>
</DxWindow>

<p>The <b>Date</b> column is excluded from Column Choosers (ShowInColumnChooser is set to false). </p>
@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;

    #region Initialization
    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();
    }
    #endregion

    #region Event Handling
    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();
    }
    private void OnReverseOrder(bool newValue) {
        ReverseOrder = newValue;
        AllColumns = AllColumns.Reverse();
    }
    #endregion

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