25.1.3 feature

CS/Components/Pages/Index.razor

@@ -1,37 +1,119 @@
 @page "/"
+@using CustomColumnChooser.Services
+@inject WeatherForecastService ForecastService
+
 <PageTitle>Welcome</PageTitle>
 
+<DxButton Text="Show built-in column chooser" Click="() => MyGrid.ShowColumnChooser()"></DxButton>
+<DxButton Text="Show custom column chooser" Click="@ShowCustomColumnChooser"></DxButton>
+
 @if (forecasts == null) {
     <p><em>Loading...</em></p>
 }
 else {
-    <DxGrid Data="@forecasts">
+    <DxGrid @ref="@MyGrid"
+            Data="@forecasts">
         <Columns>
-            <DxGridDataColumn Caption="Date" FieldName="Date" />
+            <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="Summary" FieldName="Summary" />
+            <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 @ref="@columnListBox"
+                       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 Date column ShowInColumnChooser parameter is false - thus, it doesn't appear in the Column Chooser </p>
 @code {
+    DxGrid MyGrid { get; set; } = default!;
+    DxListBox<IGridColumn, IGridColumn> columnListBox { 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() {
-        var startDate = DateOnly.FromDateTime(DateTime.Now);
-        var summaries = new[] { "Freezing", "Bracing", "Chilly", "Cool", "Mild", "Warm", "Balmy", "Hot", "Sweltering", "Scorching" };
-        forecasts = Enumerable.Range(1, 5).Select(index => new WeatherForecast {
-            Date = startDate.AddDays(index),
-            TemperatureC = Random.Shared.Next(-20, 55),
-            Summary = summaries[Random.Shared.Next(summaries.Length)]
-        }).ToArray();
-    }
-
-    private class WeatherForecast {
-        public DateOnly Date { get; set; }
-        public int TemperatureC { get; set; }
-        public string? Summary { get; set; }
-        public int TemperatureF => 32 + (int)(TemperatureC / 0.5556);
+        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;
+        }
     }
 }

CS/CustomColumnChooser.sln

@@ -1,7 +1,7 @@
 
 Microsoft Visual Studio Solution File, Format Version 12.00
 # Visual Studio Version 17
-VisualStudioVersion = 17.14.36518.9 d17.14
+VisualStudioVersion = 17.14.36518.9
 MinimumVisualStudioVersion = 10.0.40219.1
 Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "CustomColumnChooser", "CustomColumnChooser.csproj", "{B3679CF4-DD44-4DAD-A419-5D98E4383F48}"
 EndProject

CS/Program.cs

@@ -11,6 +11,7 @@
     options.SizeMode = DevExpress.Blazor.SizeMode.Medium;
 });
 builder.Services.AddMvc();
+builder.Services.AddSingleton<CustomColumnChooser.Services.WeatherForecastService>();
 
 var app = builder.Build();
 if (!app.Environment.IsDevelopment())
@@ -29,4 +30,4 @@
     .AddInteractiveServerRenderMode()
     .AllowAnonymous();
 
-app.Run();
+app.Run();

CS/Services/WeatherForecast.cs

@@ -0,0 +1,12 @@
+using System;
+
+namespace CustomColumnChooser.Services
+{
+    public class WeatherForecast
+    {
+        public DateOnly Date { get; set; }
+        public int TemperatureC { get; set; }
+        public string? Summary { get; set; }
+        public int TemperatureF => 32 + (int)(TemperatureC / 0.5556);
+    }
+}

CS/Services/WeatherForecastService.cs

@@ -0,0 +1,28 @@
+using System;
+using System.Linq;
+using System.Threading.Tasks;
+
+namespace CustomColumnChooser.Services
+{
+    public class WeatherForecastService
+    {
+        private static readonly string[] Summaries = new[]
+        {
+            "Freezing", "Bracing", "Chilly", "Cool", "Mild",
+            "Warm", "Balmy", "Hot", "Sweltering", "Scorching"
+        };
+
+        public Task<WeatherForecast[]> GetForecastsAsync(int days = 5)
+        {
+            var startDate = DateOnly.FromDateTime(DateTime.Now);
+            var forecasts = Enumerable.Range(1, days).Select(index => new WeatherForecast
+            {
+                Date = startDate.AddDays(index),
+                TemperatureC = Random.Shared.Next(-20, 55),
+                Summary = Summaries[Random.Shared.Next(Summaries.Length)]
+            }).ToArray();
+
+            return Task.FromResult(forecasts);
+        }
+    }
+}

CS/wwwroot/css/site.css

@@ -102,3 +102,14 @@ html, body {
     mask-image: var(--icon-mask-image);
 }
 
+.column-chooser-body {
+    padding: 10px;
+}
+
+.column-chooser-buttons {
+    margin-bottom: 10px;
+}
+
+.column-chooser-button-spacing {
+    margin-right: 5px;
+}

README.md

@@ -1,5 +1,4 @@
 <!-- default badges list -->
-![](https://img.shields.io/endpoint?url=https://codecentral.devexpress.com/api/v1/VersionRange/1098175829/25.1.3%2B)
 [![](https://img.shields.io/badge/Open_in_DevExpress_Support_Center-FF7200?style=flat-square&logo=DevExpress&logoColor=white)](https://supportcenter.devexpress.com/ticket/details/T1313893)
 [![](https://img.shields.io/badge/📖_How_to_use_DevExpress_Examples-e9f6fc?style=flat-square)](https://docs.devexpress.com/GeneralInformation/403183)
 [![](https://img.shields.io/badge/💬_Leave_Feedback-feecdd?style=flat-square)](#does-this-example-address-your-development-requirementsobjectives)