Descripción general de los grupos de columnas colapsables Blazor Grid

    La característica Ignite UI for Blazor Grupos de columnas contraíbles de Blazor Grid le permite organizar y administrar varios niveles de columnas anidadas y grupos de columnas en el IgbGrid agrupándolos y proporcionando la opción de contraer o expandir estos grupos para mejorar la visualización y navegación de datos.

    Ejemplo de grupos de columnas colapsables en cuadrícula Blazor

    EXAMPLE
    DATA
    MODULES
    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

    Para comenzar con la IgbGrid función de encabezados de varias columnas contraíbles, primero debe instalar Ignite UI for Blazor escribiendo el siguiente comando:

    > dotnet add package IgniteUI.Blazor --version 24.2.71
    cmd

    Para obtener una introducción completa al Ignite UI for Blazor, lea el tema de introducción.

    Además, le recomendamos encarecidamente que eche un vistazo breve al tema de encabezados de varias columnas para ver información más detallada sobre cómo configurar los grupos de columnas en su cuadrícula.

    Uso

    Los grupos de columnas plegables son parte de la función de encabezados de varias columnas que proporciona una manera de contraer/expandir un grupo de columnas a un conjunto más pequeño de datos. Cuando se contrae un grupo de columnas, se mostrará un subconjunto de columnas al usuario final y las otras columnas secundarias del grupo se ocultarán. Cada columna contraída/expandida se puede vincular a la fuente de datos de la cuadrícula, o puede no vincularse y, por lo tanto, calcularse.

    Para definir un grupo de columnas como contraíble, debe establecer la propiedad Collapsible en IgbColumnGroup en verdadero.

    Debe definir la propiedad VisibleWhenCollapsed en al menos dos columnas secundarias. Al menos una columna debe estar visible cuando el grupo está contraído (VisibleWhenCollapsed establecido en verdadero) y al menos una columna debe estar oculta cuando el grupo está expandido (VisibleWhenCollapsed establecido en false); de lo contrario, la funcionalidad contraíble se deshabilitará. Si no se especifica VisibleWhenCollapsed para algunas de las columnas secundarias, esta columna siempre estará visible independientemente de si el estado principal está expandido o contraído.

    Veamos el marcado a continuación:

     <IgbColumnGroup Header="Customer Information" Collapsible="true">
        <!--The column below will be visible when its parent is collapsed-->
        <IgbColumn Field="CustomerName" Header="Full name" VisibleWhenCollapsed="true"></IgbColumn>
            <!--The three columns below will be visible when its parent is expanded-->
            <IgbColumn Field="CustomerID" Header="Customer ID" VisibleWhenCollapsed="false"></IgbColumn>
            <IgbColumn Field="FirstName" Header="First Name" VisibleWhenCollapsed="false"></IgbColumn>
            <IgbColumn Field="LastName" Header="Last Name" VisibleWhenCollapsed="false"></IgbColumn>
            <IgbColumnGroup Header="Customer Address">
                <IgbColumn Field="Country" Header="Country" Sortable="true"></IgbColumn>
                <IgbColumn Field="City" Header="City" Sortable="true"></IgbColumn>
            </IgbColumnGroup>
     </IgbColumnGroup>
    razor

    En resumen, cada columna secundaria tiene tres estados:

    • Puede estar siempre visible, sin importar el estado expandido de su padre.
    • Puede ser visible cuando su padre está contraído.
    • Se puede ocultar cuando su padre está colapsado.

    El estado inicial del grupo de columnas que se especifica como contraíble es Expanded establecido en verdadero, pero puede cambiar fácilmente este comportamiento configurándolo en falso.

    Nota Tenga en cuenta que inicialmente la opción de contraer grupo tiene prioridad sobre la columna oculta. Si declaró que su columna estaba oculta usando la propiedad oculta y tiene un grupo definido donde se debe mostrar la misma columna, se mostrará la columna.

    Referencias de API

    Recursos adicionales

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