-
-The Date column ShowInColumnChooser parameter is false - thus, it doesn't appear in the Column Chooser
+The Date column is excluded from Column Choosers (ShowInColumnChooser is set to false).
@code {
DxGrid MyGrid { get; set; } = default!;
- DxListBox columnListBox { get; set; } = default!;
private WeatherForecast[]? forecasts;
private bool isCustomColumnChooserVisible = false;
public IEnumerable AllColumns { get; set; }
diff --git a/README.md b/README.md
index 4438aca..58fb072 100644
--- a/README.md
+++ b/README.md
@@ -1,34 +1,131 @@
-
[](https://supportcenter.devexpress.com/ticket/details/T1313893)
[](https://docs.devexpress.com/GeneralInformation/403183)
[](#does-this-example-address-your-development-requirementsobjectives)
-# Product/Platform - Task
-This is the repository template for creating new examples. Describe the solved task here.
+# Blazor Grid – How to Implement a Custom Column Chooser with integrated Sorting, Search, and Select All Capabilities
-Put a screenshot that illustrates the result here.
+This example implements a custom Column Chooser dialog for the [DevExpress Blazor Grid](https://docs.devexpress.com/Blazor/403143/components/grid) component. The dialog includes the following features/capabilities:
-Then, add implementation details (steps, code snippets, and other technical information in a free form), or add a link to an existing document with implementation details.
+* 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](https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxListBox-2) component to display Grid columns in a custom Column Chooser dialog. Retrieve a column collection from the Grid, exclude columns whose [ShowInColumnChooser](https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxGridColumn.ShowInColumnChooser) property is set to `false`, and assign the resulting collection to the List Box:
+
+```razor
+
+
+```
+
+```csharp
+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](https://docs.devexpress.devx/Blazor/DevExpress.Blazor.DxListBox-2.ShowCheckboxes) property to display item checkboxes. Switch the List Box to multi-select mode and synchronize selected items with visible Grid columns:
+
+```razor
+
+
+```
+
+```csharp
+void SelectedDataItemsChanged(IEnumerable 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](https://docs.devexpress.devx/Blazor/DevExpress.Blazor.DxListBox-2.ShowSelectAllCheckbox) property to display a Select All checkbox. Use the [ShowSearchBox](https://docs.devexpress.devx/Blazor/DevExpress.Blazor.DxListBox-2.ShowSearchBox) option to add search functionality in the List Box:
+
+```razor
+
+
+```
+
+### 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
+
+```csharp
+class ColumnsComparerImpl : IComparer {
+ public static IComparer Default { get; } = new ColumnsComparerImpl();
+ ColumnsComparerImpl() { }
+ int IComparer.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](https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxCheckBox-1) that changes sort order dynamically:
+
+```razor
+
+ Reverse Order
+
+```
+
+```csharp
+private void OnReverseOrder(bool newValue) {
+ ReverseOrder = newValue;
+ AllColumns = AllColumns.Reverse();
+}
+```
## Files to Review
-- link.cs (VB: link.vb)
-- link.js
-- ...
+- [Index.razor](CS/Components/Pages/Index.razor)
+- [site.css](CS/wwwroot/css/site.css)
## Documentation
-- link
-- link
-- ...
-
-## More Examples
+- [Blazor Grid – Column Chooser](https://docs.devexpress.com/Blazor/404479/components/grid/columns/columns#column-chooser)
+- [Blazor List Box – Item Selection](https://docs.devexpress.com/Blazor/405403/components/data-editors/listbox/item-selection)
-- link
-- link
-- ...
## Does this example address your development requirements/objectives?
diff --git a/images/custom-column-chooser.png b/images/custom-column-chooser.png
new file mode 100644
index 0000000..e4debdb
Binary files /dev/null and b/images/custom-column-chooser.png differ