Blazor Tree 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 Blazor Tree Grid 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 Blazor Tree Grid 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 Tree Grid Column Hiding Example

    EXAMPLE
    DATA
    MODULES
    RAZOR
    CSS

    Like this sample? Get access to our complete Ignite UI for Blazor toolkit and start building your own apps in minutes. Download it for free.

    Tree Grid Setup

    Comencemos creando nuestro IgbTreeGrid y vinculándolo a nuestros datos. También habilitaremos el filtrado y la clasificación de las columnas.

    <IgbTreeGrid Data=northwindEmployees AutoGenerate=false Width="100%" Height="100%" AllowFiltering=true>
        <IgbColumn Field="Name" Sortable=true Hidden=true></IgbColumn>
        <IgbColumn Field="ID" Sortable=true Hidden=true></IgbColumn>
        <IgbColumn Field="Title" Sortable=true></IgbColumn>
        <IgbColumn Field="HireDate" Sortable=true></IgbColumn>
        <IgbColumn Field="Age" Sortable=true></IgbColumn>
        <IgbColumn Field="Address" Sortable=true></IgbColumn>
        <IgbColumn Field="City" Sortable=true></IgbColumn>
        <IgbColumn Field="Country" Sortable=true></IgbColumn>
        <IgbColumn Field="Fax" Sortable=true></IgbColumn>
        <IgbColumn Field="PostalCode" Sortable=true></IgbColumn>
        <IgbColumn Field="Phone" Sortable=true></IgbColumn>
    </IgbTreeGrid>
    razor

    Toolbar's Column Hiding UI

    La interfaz de usuario integrada para ocultar columnas se coloca dentro de un DropDown en la barra de herramientas de IgbTreeGrid. Podemos mostrar/ocultar la interfaz de usuario de ocultación de columnas usando este menú desplegable exacto.

    Para este propósito, todo lo que tenemos que hacer es configurar IgbGridToolbarActions e IgbGridToolbarHiding dentro de IgbTreeGrid. También agregaremos un título a nuestra barra de herramientas usando IgbGridToolbarTitle y un estilo personalizado para el contenedor de nuestra Tree Grid.

    <IgbTreeGrid Data=northwindEmployees>
        <IgbGridToolbar>
            <IgbGridToolbarActions>
                <IgbGridToolbarHiding></IgbGridToolbarHiding>
            </IgbGridToolbarActions>
        </IgbGridToolbar>
    </IgbTreeGrid>
    razor

    IgbTreeGrid nos proporciona algunas propiedades útiles cuando se trata de usar la interfaz de usuario para ocultar 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.

    <IgbTreeGrid Data=northwindEmployees>
        <IgbGridToolbar>
            <IgbGridToolbarActions>
                <IgbGridToolbarHiding @ref=HidingAction Title="Column Hiding"></IgbGridToolbarHiding>
            </IgbGridToolbarActions>
        </IgbGridToolbar>
    </IgbTreeGrid>
    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.

    Disable hiding of a column

    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.

    <IgbTreeGrid Data=northwindEmployees AutoGenerate=false>
        <IgbColumn Field="Name" Sortable=true DisableHiding=true></IgbColumn>
        <IgbColumn Field="Title" Sortable=true DisableHiding=true></IgbColumn>
    </IgbTreeGrid>
    razor

    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:

    <IgbTreeGrid Id="treeGrid"></IgbTreeGrid>
    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:

    #treeGrid {
        /* 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

    Demo

    EXAMPLE
    DATA
    MODULES
    RAZOR
    CSS

    API References

    En este artículo, aprendimos cómo utilizar la interfaz de usuario integrada para ocultar columnas en la barra de herramientas de IgbTreeGrid. La interfaz de usuario que oculta columnas 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:

    IgbTreeGrid events:

    • ColumnVisibilityChanged

    Additional Resources

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