DxGrid.ShowColumnChooser() Method

Shows the Column Chooser in the center of the grid.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v23.1.dll

NuGet Package: DevExpress.Blazor

Declaration

public void ShowColumnChooser()

Remarks

The Column Chooser is a pop-up window that lists all grid columns (data, command, and selection) unless a column’s ShowInColumnChooser property is set to false. The Column Chooser allows users to perform the following actions:

Show or hide columns

A user can select or clear a checkbox in the Chooser to show or hide the corresponding column. This operation changes the column’s Visible property value.

Reorder columns

A user can move a column to a new position within the Column Chooser (use the drag icon to initiate a drag-and-drop operation). Such an operation changes the column’s VisibleIndex property value. Note that the Chooser draws a thick line between regular and fixed columns. Columns cannot cross that line.

Run Demo: Grid - Column Chooser Run Demo: Responsive Grid Watch Video: Grid - Column Types, Column Resize and Visibility

Call the ShowColumnChooser method to display the Column Chooser at the center of the grid.

Razor

<DxButton Text="Show Column Chooser" Click="@OnClick" />

<DxGrid @ref="@Grid" Data="@Data" >
    <Columns>
        <DxGridDataColumn FieldName="CompanyName" />
        <DxGridDataColumn FieldName="ContactName" />
        <DxGridDataColumn FieldName="ContactTitle"  />
        <DxGridDataColumn FieldName="City" />
        <DxGridDataColumn FieldName="Country" />
        <DxGridDataColumn FieldName="Phone" Visible="false" />
    </Columns>
</DxGrid>

@code {
    DxGrid Grid { get; set; }
    IEnumerable<Supplier> Data { get; set; }
    protected override async Task OnInitializedAsync() {
        Data = await NwindDataService.GetSuppliersAsync();
    }
    void OnClick() {
        Grid.ShowColumnChooser();
    }
}

To customize the appearance of Column Chooser items, handle the CustomizeElement event. The code sample below demonstrates how to highlight fixed columns in the Column Chooser.

Razor

<style>
    .highlighted-item {
        background-color: lightyellow !important;
    }
</style>

<DxGrid @ref="@Grid" Data="@Data" CustomizeElement="CustomizeColumnChooserItems" ... >
    <Columns>
        <DxGridSelectionColumn FixedPosition="GridColumnFixedPosition.Left" />
        <DxGridCommandColumn FixedPosition="GridColumnFixedPosition.Right" />
        <DxGridDataColumn FieldName="CompanyName" />
        <DxGridDataColumn FieldName="ContactName" />
        <DxGridDataColumn FieldName="Phone" Visible="false" />
    </Columns>
</DxGrid>

@code {
    //...
    void CustomizeColumnChooserItems(GridCustomizeElementEventArgs e) {
        if(e.ElementType == GridElementType.ColumnChooserItem && e.Column.FixedPosition != GridColumnFixedPosition.None) {
                e.CssClass = "highlighted-item";
        }              
    }
}

Implements

ShowColumnChooser()