Descripción general de los encabezados de varias columnas de la cuadrícula jerárquica Blazor

    La función de encabezados de varias columnas Ignite UI for Blazor en Blazor Hierarchical Grid le permite agrupar columnas colocándolas bajo un encabezado múltiple común. Cada grupo de encabezados de varias columnas en IgbHierarchicalGrid podría ser una representación de combinaciones entre otros grupos o columnas. Esta función es particularmente útil cuando se trabaja con grandes conjuntos de datos en los que el desplazamiento horizontal puede resultar complicado.

    Ejemplo de encabezados de varias columnas en cuadrícula jerárquica Blazor

    EXAMPLE

    ¿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.

    La declaración de encabezados de varias columnas se logra envolviendo un conjunto de columnas en un componente IgbColumnGroup con la información del título IgbHeader pasada.

    <IgbHierarchicalGrid Data="HierarchicalCustomers" Name="hierarchicalGrid" @ref="hierarchicalGrid" Id="hierarchicalGrid" PrimaryKey="ID" Moving="true" AllowFiltering="true">
        <IgbColumn Field="CustomerID" Sortable=true Resizable=true DataType="GridColumnDataType.String"></IgbColumn>
        <IgbColumnGroup Header="Address Information">
            <IgbColumnGroup Header="Location">
                <IgbColumn Field="Address" Sortable=true Resizable=true DataType="GridColumnDataType.String"></IgbColumn>
                <IgbColumn Field="City" Sortable=true Resizable=true DataType="GridColumnDataType.String"></IgbColumn>
                <IgbColumn Field="PostalCode" Sortable=true Resizable=true DataType="GridColumnDataType.String"></IgbColumn>
                <IgbColumn Field="Country" Sortable=true Resizable=true DataType="GridColumnDataType.String"></IgbColumn>
            </IgbColumnGroup>
            <IgbColumnGroup Header="Contact Information">
                <IgbColumn Field="Phone" Sortable=true Resizable=true DataType="GridColumnDataType.String"></IgbColumn>
                <IgbColumn Field="Fax" Sortable=true Resizable=true DataType="GridColumnDataType.String"></IgbColumn>
            </IgbColumnGroup>
        </IgbColumnGroup>
    </IgbHierarchicalGrid>
    razor

    Para lograr n-th nivel de encabezados anidados, se debe seguir la declaración anterior. Entonces, al anidar IgbColumnGroup se obtiene el resultado deseado.

    <IgbHierarchicalGrid Data="HierarchicalCustomers" Name="hierarchicalGrid" @ref="hierarchicalGrid" Id="hierarchicalGrid" PrimaryKey="ID" Moving="true" AllowFiltering="true">
        <IgbColumn Field="CustomerID" Sortable=true Resizable=true DataType="GridColumnDataType.String"></IgbColumn>
        <IgbColumnGroup Header="General Information">
            <IgbColumn Field="CompanyName" Sortable=true Resizable=true DataType="GridColumnDataType.String"></IgbColumn>
            <IgbColumnGroup Header="Person Details">
                <IgbColumn Field="ContactName" Sortable=true Resizable=true DataType="GridColumnDataType.String"></IgbColumn>
                <IgbColumn Field="ContactTitle" Sortable=true Resizable=true DataType="GridColumnDataType.String"></IgbColumn>
            </IgbColumnGroup>
        </IgbColumnGroup>
    </IgbHierarchicalGrid>
    razor

    Cada IgbColumnGroup admite movimiento, fijación y ocultación.

    Cuando hay un conjunto de columnas y grupos de columnas, la fijación solo funciona para las columnas principales del nivel superior. Más específicamente, no se permite fijar por grupos de columnas o columnas anidadas. Solo se permite moverse entre columnas y grupos de columnas cuando están en el mismo nivel en la jerarquía y ambos están en el mismo grupo. Cuando las columnas/grupos de columnas no están envueltos por el grupo actual, lo que significa que son columnas de nivel superior, se permite moverse entre columnas visibles completas.

    <IgbHierarchicalGrid Data="HierarchicalCustomers" Name="hierarchicalGrid" @ref="hierarchicalGrid" Id="hierarchicalGrid" PrimaryKey="ID" Moving="true" AllowFiltering="true">
        <IgbColumn Field="CustomerID" Sortable=true Resizable=true Movable=true DataType="GridColumnDataType.String"></IgbColumn>
        <IgbColumnGroup Movable=true Pinned="true" Header="General Information">
            <IgbColumn Field="CompanyName" Sortable=true Resizable=true DataType="GridColumnDataType.String"></IgbColumn>
            <IgbColumnGroup Movable=true Pinned="true" Header="General Information">
                <IgbColumn Field="ContactName" Sortable=true Resizable=true DataType="GridColumnDataType.String"></IgbColumn>
                <IgbColumn Field="ContactTitle" Sortable=true Resizable=true DataType="GridColumnDataType.String"></IgbColumn>
            </IgbColumnGroup>
        </IgbColumnGroup>
    </IgbHierarchicalGrid>
    razor

    Plantilla de encabezado de varias columnas

    Se puede crear una plantilla para cada uno de los grupos de columnas de la cuadrícula por separado. El grupo de columnas espera RenderFragment para la propiedad HeaderTemplate. La expresión se proporciona con el objeto de grupo de columnas como contexto.

    <IgbColumnGroup Header="Address Information" HeaderTemplate="Template">
    </IgbColumnGroup>
    
    @code {
        public RenderFragment<IgbColumnTemplateContext> Template = (ctx) => {
            string value = ctx.Column.Header.ToUpper();
            return @<span>@value</span>;
        };
    }
    razor

    Si desea volver a utilizar una sola plantilla para varios grupos de columnas, puede establecer la HeaderTemplate propiedad del grupo de columnas de la siguiente manera:

    <IgbColumnGroup Header="General Information" HeaderTemplate="Template">
    </IgbColumnGroup>
    <IgbColumnGroup Header="Address Information" HeaderTemplate="Template">
    </IgbColumnGroup>
    
    @code {
        public RenderFragment<IgbColumnTemplateContext> Template = (ctx) => {
            string value = ctx.Column.Header.ToUpper();
            return @<span>@value</span>;
        };
    }
    razor

    Si se cambia la plantilla de un encabezado y el grupo de columnas correspondiente se puede mover, debe establecer el atributo arrastrable en falso en los elementos con plantilla, para que pueda manejar cualquiera de los eventos que se aplican.

    @code {
        public Dictionary<string, object> DraggableAttributes { get; set; } =
            new Dictionary<string, object>()
            {
                { "draggable", "false" }
            };
    
        public RenderFragment<IgbColumnTemplateContext> Template = (ctx) => {
            return @<IgbIcon AdditionalAttributes="DraggableAttributes"  @onclick="onClick"/>;
        };
    }
    razor

    El siguiente ejemplo demuestra cómo implementar grupos de columnas contraíbles utilizando plantillas de encabezado.

    EXAMPLE

    Estilo

    Además de los temas predefinidos, la cuadrícula se puede personalizar aún más configurando algunas de las propiedades CSS disponibles. En caso de que desee cambiar algunos de los colores, primero debe establecer una clase para la cuadrícula:

    <IgbHierarchicalGrid class="grid"></IgbHierarchicalGrid>
    razor

    Luego establezca las propiedades CSS relacionadas con esta clase:

    .grid {
        --ig-grid-header-background: #e0f3ff;
        --ig-grid-header-text-color: #e41c77;
        --ig-grid-header-border-width: 1px;
        --ig-grid-header-border-style: solid;
        --ig-grid-header-border-color: rgba(0, 0, 0, 0.08);
    }
    css

    Manifestación

    EXAMPLE

    Referencias de API

    Recursos adicionales

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