Blazor Tree Grid Multi-Column Headers Overview

The Ignite UI for Blazor Multi-Column Headers feature in Blazor Tree Grid allows you to group columns by placing them under a common multi-header. Each multi-column headers group in the IgbTreeGrid could be a representation of combinations between other groups or columns. This feature is particularly useful when dealing with large datasets where scrolling horizontally might be cumbersome.

Blazor Tree Grid Multi-Column Headers Example

The declaration of multi-column headers is achieved by wrapping a set of columns into an IgbColumnGroup component with Header title information passed.

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

Para alcançarn-th o nível de cabeçalhos aninhados, a declaração acima deve ser seguida. Então, ao aninharIgbColumnGroup leva ao resultado desejado.

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

Every IgbColumnGroup supports moving, pinning and hiding.

[!Note] 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>

Multi-Column Header Template

Each of the column groups of the grid can be templated separately. The column group expects RenderFragment for the HeaderTemplate property. The expression is provided with the column group object as a context.

<IgbColumnGroup Header="Address Information" HeaderTemplate="Template">
</IgbColumnGroup>

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

Se você quiser reutilizar um único modelo para vários grupos de colunas, pode definir aHeaderTemplate propriedade do grupo de colunas assim:

<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>;
    };
}

[!Note] 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"/>;
    };
}

O exemplo a seguir demonstra como implementar grupos de colunas recolhíveis usando modelos de cabeçalho.

Styling

Além dos temas predefinidos, a grade pode ser ainda mais personalizada ao definir algumas das propriedades CSS disponíveis. Caso você queira alterar algumas das cores, precisa definir uma classe para a grade primeiro:

<IgbTreeGrid class="grid"></IgbTreeGrid>

Em seguida, defina as propriedades CSS relacionadas a esta classe:

.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);
}

Demo

API References

Additional Resources

Nossa comunidade é ativa e sempre acolhedora para novas ideias.