Blazor Visão geral dos grupos de colunas recolhíveis da grade de árvore

O recurso Ignite UI for Blazor Grupos de Colunas Recolhidas na Grade de Árvore Blazor permite organizar e gerenciar vários níveis de colunas aninhadas e grupos de colunas no IgbTreeGrid agrupando-os e fornecendo a opção de recolher ou expandir esses grupos para melhorar a visualização e a navegação dos dados.

Blazor Tree Grid Collapsible Column Groups Example

Setup

Para começar a usar o IgbTreeGrid recurso de cabeçalhos de várias colunas recolhíveis, primeiro você precisa instalar Ignite UI for Blazor digitando o seguinte comando:

> dotnet add package IgniteUI.Blazor --version 24.2.85

Para obter uma introdução completa ao Ignite UI for Blazor, leia o tópico de introdução.

Além disso, sugerimos fortemente que você dê uma breve olhada no tópico de cabeçalhos de várias colunas, para ver informações mais detalhadas sobre como configurar os grupos de colunas em sua grade.

Usage

Grupos de colunas recolhíveis faz parte do recurso de cabeçalhos de várias colunas que fornece uma maneira de recolher/expandir um grupo de colunas para um conjunto menor de dados. Quando um grupo de colunas é recolhido, um subconjunto das colunas será mostrado ao usuário final e as outras colunas filho do grupo serão ocultadas. Cada coluna recolhida/expandida pode ser associada à fonte de dados da grade ou pode ser desvinculada, assim calculada.

Para definir um grupo de colunas como recolhível, você precisa definir a Collapsible propriedade como IgbColumnGroup true.

Você precisa definir a propriedade VisibleWhenCollapsed para pelo menos duas colunas filho. Pelo menos uma coluna deve estar visível quando o grupo é recolhido (VisibleWhenCollapsed definido como true) e pelo menos uma coluna deve estar oculta quando o grupo é expandido (VisibleWhenCollapsed definido como false Se VisibleWhenCollapsed não for especificado para algumas das colunas filho, essa coluna estará sempre visível, independentemente de o estado pai ser expandido ou recolhido.

Vejamos a marcação abaixo:

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

Para resumir, cada coluna filho tem três estados:

Pode estar sempre visível, independentemente do estado expandido de seu pai.
Pode ser visível quando seu pai está recolhido.
Pode ser ocultado quando seu pai está recolhido.

O estado inicial do grupo de colunas especificado como recolhível é Expanded definido como true, mas você pode alterar facilmente esse comportamento definindo-o como false.

Nota Lembre-se de que inicialmente a opção de recolher grupo tem precedência sobre a coluna oculta - Se você declarou que sua coluna estava oculta usando a propriedade oculta e tem um grupo definido onde a mesma coluna deve ser mostrada, a coluna será mostrada.

API References

Additional Resources

Nossa comunidade é ativa e sempre acolhedora para novas ideias.