[! Nota] Tenga en cuenta que este control ha quedado obsoleto y se ha reemplazado por el componente Grid y, como tal, recomendamos migrar a ese control. Esto no recibirá ninguna característica nueva, las correcciones de errores no tendrán prioridad. Si necesitas ayuda o tienes preguntas sobre cómo migrar el código base a Data Grid, ponte en contacto con el equipo de asistencia.

Blazor Row Grouping

La tabla de datos Ignite UI for Blazor / cuadrícula de datos le permite agrupar filas en un grupo de filas de 'encabezado fijo'. Esto es similar a la función Agrupar por de Microsoft Outlook, que es una manera fácil de agrupar datos visualmente en función de sus propios criterios.

Blazor Row Group-By Area Example

Área de grupo por

Set IsGroupByAreaVisible property on the DataGrid to True, as shown in the example above, to the user interface. The group-by area allows users more options to group and sort columns without interact when interacting the DataGrid indirectly. Groups can be positioned and reordered based on the users needs. This area also populates when columns are programmatically added as GroupDescriptions on the DataGrid as well.

Ejemplo de uso de descripciones de grupos

Grupos jerárquicos

The GroupHeaderDisplayMode property allows the groups to be hierarchical. By default, each group description that is added gets aggregated together. Setting the GroupHeaderDisplayMode to Split will create a section header for ever group defined in GroupDescriptions property of the IgbDataGrid.

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

Collapsible Groups

Also, the IgbDataGrid can display a toggle on each group section to allow the end user to expand or collapse the grouped data via the IsGroupCollapsable property.

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

Resumen

Para su comodidad, todos los fragmentos de código anteriores se combinan en un bloque de código a continuación que puede copiar fácilmente a su proyecto.

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