Blazor Tree Grid Multi-Column Headers Overview

    La función de encabezados de varias columnas de Ignite UI for Blazor en Blazor Tree Grid le permite agrupar columnas colocándolas bajo un encabezado múltiple común. Cada grupo de encabezados de varias columnas en IgbTreeGrid 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.

    Blazor Tree Grid Multi-Column Headers 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.

    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.

    <IgbTreeGrid Data=data AllowFiltering=true PrimaryKey="ID" ForeignKey="ParentID">
        <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>
            <IgbColumn Field="PostalCode" Sortable=true Resizable=true DataType="GridColumnDataType.String"></IgbColumn>
        </IgbColumnGroup>
    </IgbTreeGrid>
    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.

    <IgbTreeGrid Data=data AllowFiltering=true PrimaryKey="ID" ForeignKey="ParentID">
        <IgbColumnGroup Header="General Information">
            <IgbColumn Field="HireDate" Sortable=true Resizable=true Movable=true DataType="GridColumnDataType.Date"></IgbColumn>
            <IgbColumnGroup Header="Person Details" Movable=true>
                <IgbColumn Field="ID" Sortable=true Resizable=true Movable=true DataType="GridColumnDataType.Number"></IgbColumn>
                <IgbColumn Field="Title" Sortable=true Resizable=true Movable=true DataType="GridColumnDataType.String"></IgbColumn>
                <IgbColumn Field="Age" Sortable=true Resizable=true Movable=true DataType="GridColumnDataType.Number"></IgbColumn>
            </IgbColumnGroup>
        </IgbColumnGroup>
    </IgbTreeGrid>
    razor

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

    When there is a set of columns and column groups, pinning works only for top level column parents. More specifically pinning per nested column groups or columns is not allowed. Moving between columns and column groups is allowed only when they are at the same level in the hierarchy and both are in the same group. When columns/column-groups are not wrapped by current group which means they are top level columns, moving is allowed between whole visible columns.

    <IgbTreeGrid Data=data AllowFiltering=true PrimaryKey="ID" ForeignKey="ParentID">
        <IgbColumnGroup Header="General Information">
            <IgbColumn Field="Phone" Sortable=true Resizable=true Movable=true DataType="GridColumnDataType.String"></IgbColumn>
        </IgbColumnGroup>
        <IgbColumn Field="Name" Sortable=true Resizable=true DataType="GridColumnDataType.String"></IgbColumn>
        <IgbColumn Field="Title" Sortable=true Resizable=true DataType="GridColumnDataType.String"></IgbColumn>
        <IgbColumn Field="Age" Sortable=true Resizable=true DataType="GridColumnDataType.Number"></IgbColumn>
    </IgbTreeGrid>
    razor

    Multi-Column Header Template

    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

    If a header is re-templated and the corresponding column group is movable, you have to set the draggable attribute to false on the templated elements, so that you can handle any of the events that are applied!

    @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
    DATA
    MODULES
    RAZOR
    JS
    CSS

    Styling

    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:

    <IgbTreeGrid class="grid"></IgbTreeGrid>
    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

    Demo

    EXAMPLE
    DATA
    MODULES
    RAZOR
    CSS

    API References

    Additional Resources

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