[!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

    La Ignite UI for Blazor Data Grid admite la capacidad de mostrar y ocultar columnas con la interfaz de usuario a través del componente IgbDataGridToolbar o mediante el componente ColumnChooser que proporciona flexibilidad para colocarlas en cualquier lugar de la página. La propiedad IsHidden en las columnas también se puede usar para ocultar o mostrar rápidamente una sola columna mediante programación para la generación manual de columnas, y el valor de IsHidden se reflejará en el componente ColumnChooser. Cada enfoque se puede utilizar indistintamente para cambiar el estado visible de las columnas.

    Blazor Grid Column Chooser Example

    Toolbar's Column Chooser UI

    Se puede acceder a la interfaz de usuario del Selector de columnas desde el componente IgbDataGridToolbar separado de la cuadrícula. Para ello todo lo que tenemos que hacer es establecer la propiedad ColumnChooser de la barra de herramientas en verdadero. La barra de herramientas mostrará un IgbButton y, al hacer clic en él, se mostrará la interfaz de usuario del selector de columnas. Este botón también muestra el total de columnas ocultas. Si no se crea la barra de herramientas, habilitar la propiedad IgbColumnChooser no tendrá ningún efecto y ocultará el botón.

    ​IgbDataGridToolbar proporciona propiedades adicionales, como agregar un título a la barra de herramientas mediante la propiedad ToolbarTitle, colocar texto en IgbButton configurando la propiedad ColumnChooserText y agregar un encabezado de título a la interfaz de usuario del selector de columnas configurando ColumnChooserTitle.

    El Selector de columnas se puede configurar con animaciones configurando las propiedades ColumnHidingAnimationMode y ColumnShowingAnimationMode de la cuadrícula.

    Code Snippet

    A continuación se muestra cómo implementar la interfaz de usuario de la barra de herramientas del selector de columnas para 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

    Digamos que queremos mostrar manualmente la interfaz de usuario IgbColumnChooser sin la barra de herramientas y colocarla en cualquier lugar que queramos en nuestra página. Esto se puede hacer fácilmente simplemente creando una instancia del componente en nuestro marcado.

    Demo

    Code Snippet

    A continuación se muestra cómo implementar la interfaz de usuario del selector de columnas para 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