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.

    Ejemplo de ocultación de columnas en cuadrícula jerárquica Blazor

    EXAMPLE
    MODULES
    DATA
    RAZOR
    CSS

    ¿Te gusta esta muestra? Obtenga acceso a nuestro kit de herramientas de Ignite UI for Blazor completo y comience a crear sus propias aplicaciones en minutos. Descárgalo gratis.

    Configuración de cuadrícula jerárquica

    Comencemos por crear nuestro IgbHierarchicalGrid y vincularlo a nuestros datos. También habilitaremos tanto el filtrado como la clasificació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>
    razor

    IU para ocultar columnas de la barra de herramientas

    La interfaz de usuario de ocultación de columnas incorporada se coloca dentro de una DropDown barra IgbHierarchicalGrid de herramientas. Podemos mostrar/ocultar la interfaz de usuario de ocultación de columnas utilizando este menú desplegable exacto.

    Para este propósito, todo lo que tenemos que hacer es configurar tanto el como el IgbGridToolbarActions​ ​IgbGridToolbarHiding interior del IgbHierarchicalGrid. También agregaremos un título a nuestra barra de herramientas utilizando el y un estilo personalizado para el IgbGridToolbarTitle envoltorio de nuestra cuadrícula jerárquica.

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

    Esto IgbHierarchicalGrid nos proporciona algunas propiedades útiles cuando se trata de usar la interfaz de usuario de ocultación de columnas de la barra de herramientas.

    Al usar la propiedad Title, estableceremos el título que se muestra dentro del botón desplegable en la barra de herramientas.

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

    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.

    Deshabilitar la ocultación de una columna

    Podemos evitar fácilmente que el usuario pueda ocultar columnas a través de la interfaz de usuario que oculta columnas simplemente configurando su propiedad DisableHiding en verdadero.

    <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>
    razor

    Estilo

    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>
    razor

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

    #hierarchicalGrid {
        /* 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;
    }
    css

    Manifestación

    EXAMPLE
    MODULES
    DATA
    RAZOR
    CSS

    Referencias de API

    En este artículo, aprendimos a usar la interfaz de usuario de ocultación de columnas incorporada en la barra de herramientas de la IgbHierarchicalGrid empresa. La columna que oculta la interfaz de usuario tiene algunas API más para explorar, que se enumeran a continuación.

    • ColumnActionsComponent

    Componentes adicionales con API relativas que se utilizaron:

    IgbColumn properties:

    IgbGridToolbar properties:

    • showProgress

    IgbGridToolbar methods:

    IgbHierarchicalGrid events:

    • ColumnVisibilityChanged

    Recursos adicionales

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