Blazor Hierarchical Grid Column Hiding

La Ignite UI for Blazor tiene una interfaz de usuario para ocultar columnas incorporada, que se puede utilizar a través de la barra de herramientas de la cuadrícula jerárquica Blazor para cambiar el estado visible de las columnas. Los desarrolladores tienen la flexibilidad de definir la interfaz de usuario para ocultar columnas en cualquier lugar de la página según sea necesario. La función de ocultar columnas de la cuadrícula jerárquica Blazor es especialmente útil cuando se desea reducir el tamaño de la cuadrícula y eliminar la necesidad de pasar por campos redundantes con la tecla tabulador.

Blazor Hierarchical Grid Column Hiding Example

Hierarchical Grid Setup

Empecemos creando nuestroIgbHierarchicalGrid y vinculándolo a nuestros datos. También activaremos tanto el filtrado como la ordenación de las columnas.

<IgbHierarchicalGrid AutoGenerate="false" Data="SingersData" PrimaryKey="ID" AllowFiltering="true" Name="hierarchicalGrid1" @ref="hierarchicalGrid1">
    <IgbColumn Field="Artist" Header="Artist" DataType="GridColumnDataType.String" Sortable="true"></IgbColumn>
    <IgbColumn Field="Photo" Header="Photo" DataType="GridColumnDataType.Image"></IgbColumn>
    <IgbColumn Field="Debut" Header="Debut" DataType="GridColumnDataType.Number" Hidden="true"></IgbColumn>
    <IgbColumn Field="GrammyNominations" Header="Grammy Nominations" DataType="GridColumnDataType.Number" Sortable="true" Hidden="true"></IgbColumn>
    <IgbColumn Field="GrammyAwards" Header="Grammy Awards" DataType="GridColumnDataType.Number" Sortable="true"></IgbColumn>
</IgbHierarchicalGrid>

Toolbar's Column Hiding UI

La interfaz integrada de ocultación de columnas está situada dentro de unaDropDown barra de herramientas de laIgbHierarchicalGrid zona. Podemos mostrar/ocultar la interfaz de ocultación de columnas usando exactamente este desplegable.

Para este propósito, todo lo que tenemos que hacer es establecer tanto elIgbGridToolbarActions como elIgbGridToolbarHiding interior de elIgbHierarchicalGrid.

<IgbHierarchicalGrid Data="SingersData">
    <IgbGridToolbar>
        <IgbGridToolbarActions>
            <IgbGridToolbarHiding>
            </IgbGridToolbarHiding>
        </IgbGridToolbarActions>
    </IgbGridToolbar>
</IgbHierarchicalGrid>

NosIgbHierarchicalGrid proporciona algunas propiedades útiles para usar la interfaz de ocultación de columnas de la barra de herramientas.

Usando laTitle propiedad, estableceremos el título que se muestra dentro del botón desplegable de la barra de herramientas.

<IgbHierarchicalGrid Data=SingersData>
    <IgbGridToolbar>
        <IgbGridToolbarActions>
            <IgbGridToolbarHiding Title="Column Hiding"></IgbGridToolbarHiding>
        </IgbGridToolbarActions>
    </IgbGridToolbar>
</IgbHierarchicalGrid>

Puede ver el resultado del código anterior al comienzo de este artículo en la sección Ejemplo de ocultación de columnas Blazor.

Disable hiding of a column

Podemos evitar fácilmente que el usuario pueda ocultar columnas a través de la interfaz de ocultación de columnas simplemente configurando suDisableHiding propiedad como true.

<IgbHierarchicalGrid>
    <IgbColumn Field="Artist" Sortable=true DisableHiding=true></IgbColumn>
    <IgbColumn Field="GrammyAwards" Sortable=true DisableHiding=true></IgbColumn>

    <IgbRowIsland>
        <IgbColumn Field="Album" Sortable=true DisableHiding=true></IgbColumn>
    </IgbRowIsland>
</IgbHierarchicalGrid>

Styling

La cuadrícula se puede personalizar aún más configurando algunas de las variables CSS disponibles. Para lograrlo usaremos una clase que primero asignaremos al grid:

<IgbHierarchicalGrid class="hierarchical-grid"></IgbHierarchicalGrid>

Luego establece las variables CSS relacionadas para los componentes relacionados. Aplicaremos los estilos también solo en eligx-column-actions, para que el resto de la cuadrícula no se vea afectado:

.hierarchical-grid {
    /* Main Column Actions styles */
    --ig-column-actions-background-color: #292826;
    --ig-column-actions-title-color: #ffcd0f;

    /* Checkbox styles */
    --ig-checkbox-tick-color: #292826;
    --ig-checkbox-label-color: #ffcd0f;
    --ig-checkbox-empty-color: #ffcd0f;
    --ig-checkbox-fill-color: #ffcd0f;

    /* Input styles */
    --ig-input-group-idle-text-color: white;
    --ig-input-group-filled-text-color: #ffcd0f;
    --ig-input-group-focused-text-color: #ffcd0f;
    --ig-input-group-focused-border-color: #ffcd0f;
    --ig-input-group-focused-secondary-color: #ffcd0f;

    /* Buttons styles */
    --ig-button-foreground: #292826;
    --ig-button-background: #ffcd0f;
    --ig-button-hover-background: #404040;
    --ig-button-hover-foreground: #ffcd0f;
    --ig-button-focus-background: #ffcd0f;
    --ig-button-focus-foreground: black;
    --ig-button-focus-visible-background: #ffcd0f;
    --ig-button-focus-visible-foreground: black;
    --ig-button-disabled-foreground: #ffcd0f;
}

Demo

API References

En este artículo hemos aprendido a usar la interfaz de ocultación de columnas integrada en laIgbHierarchicalGrid barra de herramientas. La columna que oculta la interfaz tiene algunas APIs más por explorar, que se enumeran a continuación.

ColumnActionsComponent

Componentes adicionales con API relativas que se utilizaron:

IgbColumn properties:

DisableHiding

IgbGridToolbar properties:

showProgress

IgbGridToolbar methods:

IgbHierarchicalGrid events:

ColumnVisibilityChanged

Additional Resources

Nuestra comunidad es activa y siempre da la bienvenida a nuevas ideas.