Angular Grid Selection-Based Data Aggregation

    Con el ejemplo, que se ilustra a continuación, puede ver cómo se utiliza la selección múltiple, junto con funciones de resumen personalizadas, para mostrar agregados basados en los valores seleccionados en el pie de página de la cuadrícula.

    Topic Overview

    To achieve the selection-based aggregates functionality, you can use our Grid Selection feature, together with the Grid Summaries. The Summaries are allowing for customization of the basic Summary feature functionality through extending one of the base classes, IgxSummaryOperand, IgxNumberSummaryOperand or IgxDateSummaryOperand, depending on the column data type and your needs.

    Selección

    To start working with the data in the selected grid range, you will have to subscribe to events that are notifying of changes in the grid selection. That can be done by subscribing to the selected event and to the rangeSelected event. You need to bind to both of them because the Selection feature differentiates between selecting a single cell and selecting a range of cells.

    In the events subscription logic, you can extract the selected data using the grid's getSelectedData function and pass the selected data to the custom summary operand.

    Summary

    Within the custom summary class, you'd have to be differentiating the types of data in the grid. For instance, in the scenario below, there are four different columns, whose type of data is suitable for custom summaries. These are the Unit Price, the Units in Stock, Discontinued status and the Order Date. The operate method of the derived class of the IgxSummaryOperand, is where you will process the data, starting by casing it in different categories based on the data types:

    const numberData = data.filter(rec => typeof rec === "number");
const boolData = data.filter(rec => typeof rec === "boolean");
const dates = data.filter(rec => isDate(rec));
    Note

    Bear in mind, that isDate is a custom function.

    After having the data types grouped accordingly, you can proceed to the aggregation itself. For that reason, you could use the already exposed methods of the IgxNumberSummaryOperand and IgxDateSummaryOperand. After that, you'd have to put the aggregated data in the same array, which would be returned to the template.
    For the visualization of the data, you might want to use the <igx-grid-footer>, which in a combination with the custom-summaries class will give the natural look of the Summary.

    Demo

    Cambie la selección para ver resúmenes del rango seleccionado actualmente.

    API References

    Additional Resources

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