Blazor - How to enable Column Chooser in GridListEditor (the old DxDataGrid)

Hello Axel,

Updated:

In v22.1, DxGridListEditor is the main List Editor. The DxGridListEditor supports Column Chooser API. The following article describes how to disable/enable it in your app: IModelListViewBlazor.EnableColumnChooser Property.

Refer to the following topic to learn how to enable DxGridListEditor in older versions: Enable the DxGridListEditor.

Old answer:

To display the Column Chooser in the Blazor Data Grid’s toolbar, follow the steps below:

1. Add HeaderTemplate to the Data Grid’s markup.
2. Add the DxDataGridColumnChooserToolbarItem item to the Toolbar component in this template.

In XAF Blazor UI, The HeaderTemplate is available in the DxDataGridModel class. You need to access it as described at Access List View Grid Component Settings Using a Controller. Then, use one of the following ways:

Using a Component Renderer

To create a RenderFragment, add a Razor component to your Blazor module project and create a static method that will return the component's RenderFragment. We demonstrated this idea in the following help topic: Component Renderer. Here is an example:

DataGridHeader.razor

C#
@using DevExpress.Blazor

<DxToolbar>
    <DxDataGridColumnChooserToolbarItem Alignment="ToolbarItemAlignment.Right" />
</DxToolbar>

@code {
    public static RenderFragment Create() =>
        @<DataGridHeader />;
}

MyViewController.cs

C#
using DevExpress.ExpressApp;
using DevExpress.ExpressApp.Blazor.Editors.Grid;

namespace MySolutionName.Module.Blazor.Controllers {
    public class MyViewController : ViewController<ListView> {
        protected override void OnViewControlsCreated() {
            base.OnViewControlsCreated();
            if (View.Editor is GridListEditor gridListEditor) {
                IDxDataGridAdapter dataGridAdapter = gridListEditor.GetDataGridAdapter();
                dataGridAdapter.DataGridModel.HeaderTemplate = DataGridHeader.Create();
            }
        }
    }
}

Using a RenderTreeBuilder

Here is an example:

MyViewController.cs

C#
using DevExpress.Blazor;
using DevExpress.ExpressApp;
using DevExpress.ExpressApp.Blazor.Editors.Grid;
using Microsoft.AspNetCore.Components;

namespace MySolution.Module.Blazor.Controllers {
    public class MyViewController : ViewController<ListView> {
        protected override void OnViewControlsCreated() {
            base.OnViewControlsCreated();
            if(View.Editor is GridListEditor gridListEditor) {
                IDxDataGridAdapter dataGridAdapter = gridListEditor.GetDataGridAdapter();
                dataGridAdapter.DataGridModel.HeaderTemplate = builder => {
                    builder.OpenComponent<DxToolbar>(1);
                    builder.AddAttribute(2, "ChildContent", (RenderFragment)(childBuilder => {
                        childBuilder.OpenComponent<DxDataGridColumnChooserToolbarItem>(3);
                        childBuilder.AddAttribute(0, "Alignment", ToolbarItemAlignment.Left);
                        childBuilder.CloseComponent();
                    }));
                    builder.CloseComponent();
                };
            }
        }
    }
}

Currently, synchronization between grid columns and the ListView model is not fully implemented. This is what we are going to add in the near future. Since we did not work on this task yet, we cannot suggest any solution or a workaround. The DxDataGrid control has its own mechanism for saving and restoring its layout: DxDataGrid<T>.LayoutChanged Event. However, it will likely contradict with our model synchronizers. So, I recommend that you wait until we implement this functionality on our side.