[!Note] Please note that this control has been deprecated and replaced with the Grid component, and as such, we recommend migrating to that control. This will not be receiving any new features, bug fixes will be deprioritized. For help or questions on migrating your codebase to the Data Grid, please contact support.

    Blazor Grid Column Chooser Overview

    The Ignite UI for Blazor Data Grid supports the ability show and hide columns with the UI through the IgbDataGridToolbar component or by the ColumnChooser component that provides flexibility to place it anywhere on the page. The IsHidden property on the columns can also be used to quickly hide or show a single column programmatically for manual column generation, and the value of IsHidden will reflect in the ColumnChooser component. Each approach can be used interchangeably to change the visible state of the columns.

    Blazor Grid Column Chooser Example

    Toolbar's Column Chooser UI

    The Column Chooser UI is accessible within the IgbDataGridToolbar component separate from the grid. For this purpose all we have to do is set the toolbar's ColumnChooser property to true. The toolbar will then display a IgbButton, when clicked, will display the column chooser UI. This button also displays the total of hidden columns. If the toolbar is not created, enabling the IgbColumnChooser property will have no effect and hide the button.

    The IgbDataGridToolbar provides additional properties such as adding a title to the toolbar by using the ToolbarTitle property, placing text in the IgbButton by setting the ColumnChooserText property, and adding a title header to the column chooser UI by setting ColumnChooserTitle.

    The Column Chooser can be configured with animations by setting the grid's ColumnHidingAnimationMode and ColumnShowingAnimationMode properties.

    Code Snippet

    The following demonstrates how to implement the Column Chooser Toolbar UI for the Blazor Data Grid:

    <IgbDataGridToolbar ToolbarTitle="Grid Title"
    ColumnChooser="true"
    ColumnChooserText="Columns"
    ColumnChooserTitle="Column Chooser"
    TargetGrid="DataGridRef" />
<IgbDataGrid Height="100%" Width="100%"
    @ref="DataGridRef"
    DefaultColumnMinWidth="120"
    DataSource="@DataSource"
    ColumnHidingAnimationMode="ColumnHidingAnimationMode.SlideToLeft">
</IgbDataGrid>

@code {
    private DataGrid grid;
    public DataGrid DataGridRef
    {
        get
        {
            return grid;
        }
        set
        {
            grid = value;
            StateHasChanged();
        }
    }
}

    Simple Column Chooser

    Let's say we want to manually display the IgbColumnChooser UI without the toolbar and put it anywhere we want on our page. This can be easily done by simply creating an instance of the component in our markup.

    Demo

    Code Snippet

    The following demonstrates how to implement the Column Chooser UI for the Data Grid:

    <IgbColumnChooser Height="100%" Width="200px"
    Title="Column Chooser"
    TargetGrid="DataGridRef" />
<IgbDataGrid Height="100%" Width="100%"
    @ref="DataGridRef"
    DataSource="DataSource"
    ColumnHidingAnimationMode="ColumnHidingAnimationMode.SlideToLeft" />

@code {
    private IgbDataGrid grid;
    public IgbDataGrid DataGridRef
    {
        get
        {
            return grid;
        }
        set
        {
            grid = value;
            StateHasChanged();
        }
    }
}

    API References