Blazor Agrupar cuadrícula por

    El comportamiento de Agrupar por de Ignite UI for Blazor en Blazor IgbGrid crea filas de datos agrupadas en función de los valores de las columnas. Agrupar por en IgbGrid permite visualizar los grupos en una estructura jerárquica. Las filas de datos agrupadas se pueden expandir o contraer y el orden de agrupación se puede cambiar a través de la interfaz de usuario o la API. Cuando se habilita la selección de filas, se muestra un selector de filas Agrupar por en el área más a la izquierda de la fila del grupo. En caso de que la propiedad RowSelection esté configurada en única, las casillas de verificación se deshabilitan y solo sirven como una indicación para el grupo donde se coloca la selección. Si la propiedad RowSelection está configurada en múltiple, al hacer clic sobre el selector de filas Agrupar por se seleccionan todos los registros que pertenecen a este grupo.

    Blazor Grupo de cuadrícula por ejemplo

    Este ejemplo presenta las capacidades de agrupación de una gran cantidad de datos. Arrastrar los encabezados de las columnas a la parte superior (área de agrupación) permite a los usuarios ver los datos de la columna seleccionada en una estructura jerárquica. Pueden agrupar en varios campos arrastrando más encabezados de columna a la parte superior. Estas opciones de agrupación resultan útiles cuando tienes tablas con numerosas filas y columnas donde los usuarios quieren presentar los datos de una manera mucho más rápida y visualmente aceptable.

    EXAMPLE
    DATA
    MODULES
    RAZOR
    JS
    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.

    Estado de agrupación inicial

    Es posible definir la agrupación inicial de la cuadrícula asignando una matriz de expresiones a la propiedad GroupingExpressions de la cuadrícula.

    <IgbGrid AutoGenerate="true" Data="InvoicesData" @ref="grid" Id="grid" GroupingExpressions="GroupingExpression1"></IgbGrid>
    
    @code {
        public IgbGroupingExpression[] GroupingExpression1 = new IgbGroupingExpression[2]
        {
            new IgbGroupingExpression(){ FieldName = "ShipCountry", Dir= SortingDirection.Asc },
            new IgbGroupingExpression() { FieldName = "ShipCity", Dir= SortingDirection.Asc  }
        };
    }
    razor

    Las expresiones de agrupación implementan la interfaz ISortingExpression.

    Agrupar por API

    API de agrupación

    La agrupación está disponible a través de la interfaz de usuario y mediante una API sólida expuesta por el componente de cuadrícula. Los desarrolladores pueden permitir a los usuarios finales agrupar los datos de la cuadrícula por ciertas columnas, estableciendo la propiedad Groupable de cada columna en true.

    <IgbGrid AutoGenerate="false" Data="InvoicesData" @ref="grid" Id="grid" GroupingExpressions="GroupingExpression1" GroupRowTemplateScript="WebGridGroupByRowTemplate">
        <IgbColumn Field="OrderID" Hidden="true"></IgbColumn>
        <IgbColumn Field="ShipCountry" Header="Ship Country" Width="200px" Groupable="true"></IgbColumn>
        <IgbColumn Field="OrderDate" Header="Order Date" DataType="GridColumnDataType.Date" Width="200px" Groupable="true"></IgbColumn>
        <IgbColumn Field="PostalCode" Header="Postal Code" Width="200px" Groupable="true"></IgbColumn>
        <IgbColumn Field="Discontinued" Width="200px" DataType="GridColumnDataType.Boolean" Groupable="true" BodyTemplateScript="WebGridBooleanCellTemplate" Name="column1" @ref="column1"></IgbColumn>
        <IgbColumn Field="ShipName" Header="Ship Name" Width="200px" Groupable="true"></IgbColumn>
        <IgbColumn Field="ShipCity" Header="Ship City" Width="200px" Groupable="true"></IgbColumn>
        <IgbColumn Field="ShipperName" Header="Shipper Name"Width="200px"Groupable="true"></IgbColumn>
        <IgbColumn Field="Salesperson" Header="Sales Person" Width="200px" Groupable="true"></IgbColumn>
        <IgbColumn Field="UnitPrice" Header="Unit Price" Width="200px" Groupable="true"></IgbColumn>
        <IgbColumn Field="Quantity" Width="200px" Groupable="true"></IgbColumn>
    </IgbGrid>
    razor

    Durante el tiempo de ejecución, las expresiones se pueden obtener y configurar desde la propiedad groupingExpressions. Si necesita agregar o cambiar una expresión existente, también puede usar el método GroupBy con una sola expresión o una serie de expresiones.

    @code {
        public IgbGrid grid;
    
        public IgbGroupingExpression[] GroupingExpression1 = new IgbGroupingExpression[2]
        {
            new IgbGroupingExpression(){ FieldName = "ShipCountry", Dir= SortingDirection.Asc },
            new IgbGroupingExpression() { FieldName = "ShipCity", Dir= SortingDirection.Asc  }
        };
    
    
        private void GroupGrid()
        {
            this.grid.GroupBy(GroupingExpression1);
        }
    }
    razor

    Expandir/contraer API

    Además de agrupar expresiones, también puede controlar los estados de expansión de las filas del grupo. Se almacenan en una propiedad separada del componente IgbGrid​ ​GroupingExpansionState, que es una colección de IgbGroupByExpandState. Cada estado de expansión se define de forma única por el nombre del campo para el que se crea y el valor que representa para cada nivel de agrupación, es decir, el identificador es una matriz jerárquica de IgbGroupByKey.

    Al igual que con GroupingExpressions, configurar una lista de IgbGroupByExpandState directamente en GroupingExpansionState cambiará la expansión en consecuencia. Además, IgbGrid expone un método toggleGroup que alterna un grupo mediante la instancia de registro del grupo o mediante la propiedad expanded de la fila.

    <IgbGrid AutoGenerate="true" Data="InvoicesData" GroupingExpressions="GroupingExpression1" GroupingExpansionState=ExpansionState @ref="grid" Id="grid">
    </IgbGrid>
    
    @code {
        public IgbGroupingExpression[] GroupingExpression1 = new IgbGroupingExpression[2]
        {
            new IgbGroupingExpression(){ FieldName = "ShipCountry", Dir= SortingDirection.Asc },
            new IgbGroupingExpression() { FieldName = "ShipCity", Dir= SortingDirection.Asc  }
        };
        public IgbGroupByExpandState[] state = new IgbGroupByExpandState[1]
        {
            new IgbGroupByExpandState(){ Hierarchy = new IgbGroupByKey[1]{ new IgbGroupByKey() { FieldName="ShipCountry", Value = "USA" } },  Expanded = false }
        };
    }
    razor

    Los grupos se pueden crear expandidos (predeterminado) o contraídos y los estados de expansión generalmente solo contendrán el estado opuesto al comportamiento predeterminado. Puede controlar si los grupos deben crearse expandidos o no a través de la propiedad GroupsExpanded.

    Seleccionar/deseleccionar todas las filas en una API de grupo

    Seleccionar/deseleccionar todas las filas de un grupo está disponible a través de los métodos API SelectRowsInGroup y DeselectRowsInGroup.

    El siguiente fragmento de código se puede utilizar para seleccionar todas las filas dentro de un grupo utilizando el método SelectRowsInGroup de instancia de registro de grupo. Además, el segundo parámetro de este método es una propiedad booleana mediante la cual puede elegir si la selección de fila anterior se borrará o no. La selección anterior se conserva de forma predeterminada.

    var row = await this.grid.GetRowByIndexAsync(0);
    this.grid.SelectRowsInGroup(row.GroupRow, true);
    razor

    Si necesita anular la selección de todas las filas dentro de un grupo mediante programación, puede utilizar el método DeselectRowsInGroup.

    var row = await this.grid.GetRowByIndexAsync(0);
    this.grid.DeselectRowsInGroup(row.GroupRow);
    razor

    Plantillas

    Plantillas de filas de grupo

    La fila del grupo, excepto la interfaz de usuario para expandir/contraer, es totalmente adaptable a plantillas. De forma predeterminada, muestra un icono de agrupación y muestra el nombre del campo y el valor que representa. El contexto para representar la plantilla es de tipo IgbGroupByRecord.

    Como ejemplo, la siguiente plantilla haría que el resumen de filas del grupo fuera más detallado:

    <IgbGrid AutoGenerate="true" Data="InvoicesData" @ref="grid" Id="grid" GroupRowTemplateScript="WebGridGroupByRowTemplate"></IgbGrid>
    
    
    //In JavaScript:
    igRegisterScript("WebGridGroupByRowTemplate", (ctx) => {
        var html = window.igTemplating.html;
        var groupRow = ctx.implicit;
        return html`<span>Total items with value: ${groupRow.value} are ${groupRow.records.length}</span>`;
    }, false);
    razor

    Plantillas de selector de filas de grupo

    Como se mencionó anteriormente, la fila del grupo, excepto la interfaz de usuario para expandir/contraer, es totalmente adaptable a plantillas. Para crear una plantilla de selector de filas Agrupar por personalizada, utilice GroupByRowSelectorTemplate. Desde la plantilla, puede acceder a la variable de contexto proporcionada implícitamente, con propiedades que le brindan información sobre el estado de la fila Agrupar por.

    La propiedad SelectedCount muestra cuántos registros del grupo están seleccionados actualmente, mientras que TotalCount muestra cuántos registros pertenecen al grupo.

    <IgbGrid GroupByRowSelectorTemplateScript="GroupByRowSelectorTemplate"></IgbGrid>
    //In Javascript
    igRegisterScript("GroupByRowSelectorTemplate", (ctx) => {
        var html = window.igTemplating.html;
        return html` ${ctx.implicit.selectedCount} / ${ctx.implicit.totalCount} `;
    }, false);
    razor

    La propiedad GroupRow devuelve una referencia a la fila del grupo.

    <IgbGrid GroupByRowSelectorTemplateScript="GroupByRowSelectorTemplate"></IgbGrid>
    //In Javascript
    igRegisterScript("GroupByRowSelectorTemplate", (ctx) => {
        var html = window.igTemplating.html;
        var groupRow = ctx.implicit.groupRow;
        return html`<div onclick="handleGroupByRowSelectorClick()">Handle groupRow</div> `;
    }, false);
    razor

    Las propiedades SelectedCount y TotalCount se pueden utilizar para determinar si el selector de fila Agrupar por debe estar marcado o indeterminado (seleccionado parcialmente).

    Blazor grupo de cuadrícula por con paginación

    Las filas de grupo participan en el proceso de paginación junto con las filas de datos. Cuentan para el tamaño de página de cada página. Las filas contraídas no se incluyen en el proceso de paginación. Cualquier operación de expandir o contraer obliga a Paging a recalcular el recuento de páginas y ajustar el índice de páginas si es necesario. Los grupos que abarcan varias páginas se dividen entre ellos. La fila del grupo es visible solo en la página en la que comienza y no se repite en las páginas siguientes. La información de resumen de las filas del grupo se calcula en función de todo el grupo y no se ve afectada por la paginación.

    Blazor Ejemplo de agrupar por con paginación

    EXAMPLE
    DATA
    MODULES
    RAZOR
    JS
    CSS

    Agrupar por con resúmenes

    La integración entre Agrupar por y Resúmenes se describe en el tema Resúmenes.

    Navegación por teclado

    La interfaz de usuario de agrupación admite las siguientes interacciones de teclado:

    • Para filas de grupo (el foco debe estar en la fila o en la celda expandir/contraer)

      • ALT + DERECHA: expande el grupo
      • ALT + IZQUIERDA: colapsa el grupo
      • ESPACIO: selecciona todas las filas del grupo, si la propiedad RowSelection está establecida en múltiples
    • Para los componentes del grupo IgbChip en el grupo por área (el foco debe estar en el chip)

      • MAYÚS + IZQUIERDA: mueve el chip enfocado hacia la izquierda, cambiando el orden de agrupación, si es posible
      • MAYÚS + DERECHA: mueve el chip enfocado hacia la derecha, cambiando el orden de agrupación, si es posible
      • ESPACIO: cambia la dirección de clasificación
      • ELIMINAR: desagrupa el campo
      • Los elementos separados del chip también se pueden enfocar y se puede interactuar con ellos mediante la ENTER llave.

    Estilo

    Además de los temas predefinidos, la cuadrícula se puede personalizar aún más configurando algunas de las propiedades CSS disponibles. En caso de que desee cambiar algunos de los colores, primero debe establecer una clase para la cuadrícula:

    <IgbGrid Class="grid"></IgbGrid>
    razor

    Luego configure las propiedades CSS relacionadas para esa clase:

    .grid {
        --ig-grid-group-row-background: #969799;
        --ig-grid-group-row-selected-background: #969799;
        --ig-grid-group-label-column-name-text: #f8f8f8;
        --ig-grid-group-label-text: #f8f8f8;
        --ig-grid-group-count-text-color: #222;
        --ig-grid-expand-icon-color: #f8f8f8;
        --ig-grid-expand-icon-hover-color: #f8f8f8;
    }
    css

    Manifestación

    EXAMPLE
    DATA
    MODULES
    RAZOR
    JS
    CSS

    Limitaciones conocidas

    Limitación Descripción
    La cantidad máxima de columnas agrupadas es 10. Si se agrupan más de 10 columnas, se genera un error.

    Referencias de API

    Recursos adicionales

    Nuestra comunidad es activa y siempre da la bienvenida a nuevas ideas.