Skip to main content
All docs
V25.1
  • DxGrid.ShowColumnChooser(DialogDisplayOptions) Method

    Shows the column chooser and positions it based on the specified display options.

    Namespace: DevExpress.Blazor

    Assembly: DevExpress.Blazor.v25.1.dll

    NuGet Package: DevExpress.Blazor

    Declaration

    public void ShowColumnChooser(
        DialogDisplayOptions dialogOptions
    )

    Parameters

    Name Type Description
    dialogOptions DialogDisplayOptions

    An object that contains the column chooser’s display options.

    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. If column settings prohibit position changes, a column header displays a lock glyph. Note that the chooser also draws a thick line between regular and fixed/anchored columns. Columns cannot cross that line.

    Column Chooser

    Run Demo: Grid - Column Chooser Run Demo: Responsive Grid

    Call the ShowColumnChooser method to display the column chooser. The method accepts a DialogDisplayOptions object that contains customization options.

    <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() {
            // Display the Column Chooser at the point x=100, Y=100
            Grid.ShowColumnChooser(new DialogDisplayOptions(new System.Drawing.Point(100, 100)) );
        }
    }
    

    To customize the appearance of column chooser items, handle the CustomizeElement event. The following code snippet highlights fixed columns in the column chooser.

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

    Custom Column Chooser Items

    See Also