Cuadrícula de árbol Angular agrupada por

    If you have non-hierarchical data and you want to group by one or more columns and populate the parent rows with aggregated values, you could use the IgxTreeGridComponent along with treeGridGrouping pipe and the UI component with selector igx-tree-grid-group-by-area.

    The treeGridGrouping pipe groups the data based on the provided parameters and the resulting hierarchy is displayed in a separate column. The pipe can also calculate aggregated values for the generated parent rows if aggregations are provided. Here is an example of how to use the pipe in the template:

    <igx-tree-grid #grid 
               [data]="data | treeGridGrouping:groupingExpressions:groupKey:childDataKey:grid:aggregations"
               [childDataKey]="childDataKey"
               [sortStrategy]="sorting">

    Los argumentos de la tubería son los siguientes:

    • groupingExpressions - an array of IGroupingExpression objects which contains information about the fields used to generate the hierarchy and the sorting details for each group
    • groupKey: un valor de cadena para el nombre de la columna de jerarquía generada
    • childDataKey: un valor de cadena para el campo donde se almacena la colección secundaria de las filas principales generadas.
    • grid - IgxTreeGridComponent that is used for the grouping
    • aggregations (optional) - an array of ITreeGridAggregation objects which contains information about the aggregation functions

    The UI component with selector igx-tree-grid-group-by-area handles the UI interactions related to the columns that are used for the grouping. Here is an example of how to use the component in the template:

    <igx-tree-grid-group-by-area
    [grid]='grid'
    [(expressions)]='groupingExpressions'
    [hideGroupedColumns]='true'>
</igx-tree-grid-group-by-area>

    Las entradas del componente son las siguientes:

    • grid - IgxTreeGridComponent that is used for the grouping
    • expressions - an array of IGroupingExpression objects which contains the fields used to generate the hierarchy
    • hideGroupedColumns: un valor booleano que indica si se deben ocultar las columnas mediante las cuales se realizó la agrupación
    • dropAreaTemplate: una plantilla para el área de colocación que se puede utilizar para anular la plantilla de área de colocación predeterminada
    • dropAreaMessage: una cadena que se puede utilizar para anular el mensaje predeterminado para la plantilla de área de colocación predeterminada
    Note

    In order for the sorting to work correctly you should set the sortStrategy property of the IgxTreeGridComponent to an instance of IgxGroupedTreeGridSorting.

    Angular Tree Grid Group By Example

    Implementación

    In this sample we are using the treeGridGrouping pipe and the UI component with selector igx-tree-grid-group-by-area for the grouping. The data is grouped by the "category", "type" and "contract" fields. The resulting hierarchy is displayed in the newly created "categories" column. The pipe also calculates aggregated values for the generated parent rows for the "price", "change" and "changeP" columns.

    <igx-tree-grid #grid1
    [data]="data$ | async | treeGridGrouping:groupingExpressions:groupColumnKey:childDataKey:grid1:aggregations"
    [childDataKey]="childDataKey"
    [sortStrategy]="sorting">
    <igx-tree-grid-group-by-area
        [grid]="grid1"
        [(expressions)]="groupingExpressions"
        [hideGroupedColumns]="true">
    </igx-tree-grid-group-by-area>
    <igx-column [field]="groupColumnKey"></igx-column>

    Aquí puede ver cómo se definen las expresiones de agrupación y agregaciones:

    public groupingExpressions: IGroupingExpression[] = [
    { fieldName: 'category', dir: 2, ignoreCase: true, strategy: DefaultSortingStrategy.instance() },
    { fieldName: 'type', dir: 1, ignoreCase: true, strategy: DefaultSortingStrategy.instance() },
    { fieldName: 'contract', dir: 1, ignoreCase: true, strategy: DefaultSortingStrategy.instance() }
];
public aggregations: ITreeGridAggregation[] = [
    {
        aggregate: (parent: any, data: any[]) => data.map((r) => r.change).reduce((ty, u) => ty + u, 0),
        field: 'change'
    },
    {
        aggregate: (parent: any, data: any[]) => data.map((r) => r.price).reduce((ty, u) => ty + u, 0),
        field: 'price'
    },
    {
        aggregate: (parent: any, data: any[]) => parent.change / (parent.price - parent.change) * 100,
        field: 'changeP'
    }
];
public childDataKey = 'children';
public groupColumnKey = 'categories';
public sorting = IgxGroupedTreeGridSorting.instance();

    Angular Tree Grid Group By Load On Demand Example

    Implementación

    In this sample, data is loaded in portions. Initially, only the top level categories are displayed, then child data is served once a parent row is expanded. For more information on this approach, please refer to the Tree Grid Load On Demand topic. The data is grouped by the "ShipCountry", "ShipCity" and "Discontinued" fields and the resulting hierarchy is displayed in a separate column. The grouping is performed on a remote service - the data is modified and corresponding child and parent keys are assigned that are used to display the final data in a hierarchical view. For more information on how this service works you can take a look at the TreeGridGroupingLoadOnDemandService class in the remoteService.ts file.

    A continuación se muestra un ejemplo de cómo utilizar la carga bajo demanda:

        <igx-tree-grid #treeGrid
        [data]="data"
        [loadChildrenOnDemand]="loadChildren"
        [primaryKey]="primaryKey"
        [foreignKey]="foreignKey"
        [hasChildrenKey]="hasChildrenKey">
        <igx-tree-grid-group-by-area
            [grid]="treeGrid"
            [(expressions)]="groupingExpressions"
            (expressionsChange)="onExpressionsChange($event)"
            [hideGroupedColumns]="true">
        </igx-tree-grid-group-by-area>
        <igx-column [field]="groupColumnKey"></igx-column>

    In order to load the child rows when the user expands a row, the Tree Grid provides the callback input property loadChildrenOnDemand - the children data is retrieved from the server and it is assigned to the requested parent row based on the grouping parameters.

    public groupingExpressions: IGroupingExpression[] = [
    { fieldName: 'ShipCountry', dir: 2, ignoreCase: true, strategy: DefaultSortingStrategy.instance() },
    { fieldName: 'ShipCity', dir: 1, ignoreCase: true, strategy: DefaultSortingStrategy.instance() },
    { fieldName: 'Discontinued', dir: 1, ignoreCase: true, strategy: DefaultSortingStrategy.instance() }
];
public primaryKey = 'id';
public foreignKey = 'parentId';
public hasChildrenKey = 'children';
public groupColumnKey = '';

private dataService = new TreeGridGroupingLoadOnDemandService();

public ngOnInit() {
    this.reloadData();
}

public loadChildren = (parentID: any, done: (children: any[]) => void) => {
    const groupingParameters = this.assembleGroupingParameters();
    this.dataService.getData(parentID, this.hasChildrenKey, groupingParameters, (children) => done(children));
};

private reloadData() {
    this.treeGrid.isLoading = true;
    this.treeGrid.expansionStates.clear();
    const groupingParameters = this.assembleGroupingParameters();
    this.dataService.getData(null, this.hasChildrenKey, groupingParameters, (children) => {
        this.data = children;
        this.treeGrid.isLoading = false;
        this.treeGrid.reflow();
    });
}

    API References

    Additional Resources

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