[!Note] Please note that this control has been deprecated and replaced with the Grid component, and as such, we recommend migrating to that control. This will not be receiving any new features, bug fixes will be deprioritized. For help or questions on migrating your codebase to the Data Grid, please contact support.

Blazor Row Grouping

A Tabela de Dados/Grade de Dados Ignite UI for Blazor permite agrupar linhas em um grupo de linhas de 'cabeçalho fixo'. Isso é semelhante ao recurso Agrupar por no Microsoft Outlook, que é uma maneira fácil de agrupar dados visualmente com base em seus próprios critérios.

Blazor Row Group-By Area Example

Group-By Area

Defina IsGroupByAreaVisible a propriedade no DataGrid como True, conforme mostrado no exemplo acima, para a interface do usuário. A área agrupar por permite aos usuários mais opções para agrupar e classificar colunas sem interagir ao interagir indiretamente com o DataGrid. Os grupos podem ser posicionados e reordenados com base nas necessidades dos usuários. Essa área também é preenchida quando as colunas são adicionadas programaticamente, como GroupDescriptions no DataGrid.

Using Group Descriptions Example

Hierarchical Groups

A GroupHeaderDisplayMode propriedade permite que os grupos sejam hierárquicos. Por padrão, cada descrição de grupo adicionada é agregada. Definir o GroupHeaderDisplayMode para Split criará um cabeçalho de seção para cada grupo definido na GroupDescriptions propriedade do IgbGrid.

<IgbDataGrid Height="100%" Width="100%"
    @ref="DataGridRef"
    DataSource="DataSource"
    GroupHeaderDisplayMode="GroupHeaderDisplayMode.Split" />

Collapsable Groups

Além disso, o IgbGrid pode exibir uma alternância em cada seção do grupo para permitir que o usuário final expanda ou recolha os dados agrupados por meio da IsGroupCollapsable propriedade.

<IgbDataGrid @ref="DataGridRef" Height="100%" Width="100%"
    DataSource="DataSource"
    IsGroupCollapsable="true" />

Summary

Para sua conveniência, todos os trechos de código acima são combinados em um bloco de código abaixo que você pode copiar facilmente para seu projeto.

<IgbDataGrid @ref="DataGridRef" Height="100%" Width="100%"
    DataSource="DataSource"
    GroupHeaderDisplayMode="GroupHeaderDisplayMode.Split"
    IsGroupCollapsable="true" />

@code {
    private IgbDataGrid grid;
    public IgbDataGrid DataGridRef
    {
        get
        {
            return grid;
        }
        set
        {
            grid = value;
            OnGridCreated();
            StateHasChanged();
        }
    }

    private void OnGridCreated()
    {
        var state = new ColumnGroupDescription { Field = "Country", DisplayName = "Location" };
        var city = new ColumnGroupDescription { Field = "City", DisplayName = "City" };
        var income = new ColumnGroupDescription { Field = "Income", DisplayName = "Income" };

        this.DataGridRef.GroupDescriptions.Add(state);
        this.DataGridRef.GroupDescriptions.Add(city);
        this.DataGridRef.GroupDescriptions.Add(income);
    }
}