Skip to main content

DxGrid.ShowColumnChooser(String) Method

Shows the Column Chooser.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v21.2.dll

Declaration

public void ShowColumnChooser(
    string positionTarget
)

Parameters

Name Type Description
positionTarget String

Specifies the target UI element that invokes the Column Chooser.

Remarks

The Column Chooser displays a list of data, command, and selection columns in the grid.

The Column Chooser allows users do the following:

  • Show or hide columns. To do this, a user should enable or disable corresponding checkboxes in the Chooser. This operation changes the column’s Visible property value.
  • Reorder columns. To change a column’s position, a user should drag and drop the column with the drag icon in the Chooser. This operation changes the column’s VisibleIndex property value.

Column Chooser

Use the ShowColumnChooser method to display the Column Chooser. The code below adds a DxButton that invokes the Column Chooser.

@inject WeatherForecastService ForecastService

<DxButton Text="Column Chooser"
          RenderStyle="ButtonRenderStyle.Secondary"
          CssClass="column-chooser-button"
          Click="OnClick" />

<p />

<DxGrid Data="@Data" @ref="Grid">
    <Columns>
        <DxGridCommandColumn Caption="Command Column" Width="150px" />
        <DxGridDataColumn FieldName="Date" DisplayFormat="D" />
        <DxGridDataColumn FieldName="TemperatureC" Width="150px" />
        <DxGridDataColumn FieldName="TemperatureF" Width="150px" Visible="false" />
        <DxGridDataColumn FieldName="Forecast" />
        <DxGridDataColumn FieldName="CloudCover" />
    </Columns>
</DxGrid>

@code {
    DxGrid Grid { get; set; }
    object Data { get; set; }

    protected override void OnInitialized() {
        Data = ForecastService.GetForecast();
    }

    void OnClick() {
        Grid.ShowColumnChooser(".column-chooser-button");
    }
}

Note

You can exclude a column from the Column Chooser (use the DxGridColumn.ShowInColumnChooser property).

Run Demo: Grid - Column Chooser

See Also