Tenga en cuenta que este control ha quedado obsoleto y reemplazado con 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. Para obtener ayuda o preguntas sobre la migración de su código base a Data Grid, comuníquese con el soporte.

    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 Ejemplo de agrupación de filas por área

    EXAMPLE
    MODULES
    DATA GENERATOR
    DATA SOURCE
    RAZOR
    CSS

    ¿Te gusta esta muestra? Obtenga acceso a nuestro kit de herramientas de Ignite UI for Blazor completo y comience a crear sus propias aplicaciones en minutos. Descárgalo gratis.

    Área de grupo por

    Establezca la propiedad IsGroupByAreaVisible en DataGrid en True, como se muestra en el ejemplo anterior, en la interfaz de usuario. El área de grupo por permite a los usuarios más opciones para agrupar y ordenar columnas sin interactuar cuando interactúan indirectamente con el DataGrid. Los grupos se pueden posicionar y reordenar según las necesidades de los usuarios. Esta área también se completa cuando las columnas se agregan mediante programación como GroupDescriptions en DataGrid.

    Ejemplo de uso de descripciones de grupos

    EXAMPLE
    MODULES
    DATA GENERATOR
    DATA SOURCE
    RAZOR
    CSS

    Grupos jerárquicos

    La propiedad GroupHeaderDisplayMode permite que los grupos sean jerárquicos. De forma predeterminada, cada descripción de grupo que se agrega se agrega. Configurar GroupHeaderDisplayMode en Split creará un encabezado de sección para cada grupo definido en la propiedad GroupDescriptions de IgbGrid.

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

    Grupos plegables

    Además, IgbGrid puede mostrar un interruptor en cada sección de grupo para permitir al usuario final expandir o contraer los datos agrupados a través de la propiedad IsGroupCollapsable.

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

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

    Referencias de API