Web Components Resúmenes de cuadrícula jerárquica

    La característica Resúmenes de Ignite UI for Web Components en Web Components cuadrícula jerárquica funciona a nivel de columna como pie de página de grupo. Web Components resúmenes de IgcHierarchicalGrid es una característica poderosa que permite al usuario ver la información de la columna en un contenedor separado con un conjunto predefinido de elementos de resumen predeterminados, según el tipo de datos dentro de la columna o mediante la implementación de una plantilla personalizada en el IgcHierarchicalGridComponent.

    Web Components Hierarchical Grid Summaries Overview Example

    [!Note] The summary of the column is a function of all column values, unless filtering is applied, then the summary of the column will be function of the filtered result values

    IgcHierarchicalGridComponent Los resúmenes también se pueden habilitar a nivel de columna en Ignite UI for Web Components, lo que significa que solo puede activarlo para las columnas que necesite. IgcHierarchicalGridComponent Resúmenes le proporciona un conjunto predefinido de resúmenes predeterminados, en función del tipo de datos de la columna, para que pueda ahorrar algo de tiempo:

    Para string y boolean dataType, está disponible la siguiente función:

    • Contar

    Para los tipos de datos number, currency y percent, están disponibles las siguientes funciones:

    • Contar
    • mín.
    • máx.
    • Promedio
    • Suma

    Para el tipo de datos date, están disponibles las siguientes funciones:

    • Contar
    • Más temprano
    • El último

    Todos los tipos de datos de columna disponibles se pueden encontrar en el tema oficial Tipos de columna.

    IgcHierarchicalGridComponent Los resúmenes se habilitan por columna estableciendo hasSummary property en true. También es importante tener en cuenta que los resúmenes de cada columna se resuelven según el tipo de datos de columna. En la columna predeterminada, el IgcHierarchicalGridComponent tipo de datos es string, por lo que si desea date​ ​number resúmenes específicos, debe especificar la dataType propiedad como number or date. Tenga en cuenta que los valores de resumen se mostrarán localizados, de acuerdo con la cuadrícula locale y la columna pipeArgs.

    <igc-hierarchical-grid auto-generate="false" name="hierarchicalGrid" id="hierarchicalGrid" primary-key="ID">
    <igc-column field="Artist" header="Artist" has-summary="true"> </igc-column>
    <igc-column field="Photo" header="Photo" data-type="image"> </igc-column>
    <igc-column field="Debut" header="Debut" has-summary="true"> </igc-column>
    <igc-column field="GrammyNominations" header="Grammy Nominations" data-type="number" has-summary="true"> </igc-column>
    <igc-column field="GrammyAwards" header="Grammy Awards" data-type="number" has-summary="true"> </igc-column>
    <igc-row-island child-data-key="Albums" auto-generate="false">
        <igc-column field="Album" header="Album" data-type="string"> </igc-column>
        <igc-column field="LaunchDate" header="Launch Date" data-type="date"> </igc-column>
        <igc-column field="BillboardReview" header="Billboard Review" data-type="number" has-summary="true"> </igc-column>
        <igc-column field="USBillboard200" header="US Billboard 200" data-type="number" has-summary="true"> </igc-column>
    </igc-row-island>
</igc-hierarchical-grid>

    La otra forma de habilitar/deshabilitar resúmenes para una columna específica o una lista de columnas es usar el método enableSummaries public/ disableSummaries de la IgcHierarchicalGridComponent.

    <igc-hierarchical-grid auto-generate="false" name="hierarchicalGrid" id="hierarchicalGrid" primary-key="ID">
    <igc-column field="Artist" header="Artist" has-summary="true"> </igc-column>
    <igc-column field="Photo" header="Photo" data-type="image"> </igc-column>
    <igc-column field="Debut" header="Debut" has-summary="true"> </igc-column>
    <igc-column field="GrammyNominations" header="Grammy Nominations" data-type="number" has-summary="true"> </igc-column>
    <igc-column field="GrammyAwards" header="Grammy Awards" data-type="number" has-summary="true"> </igc-column>
</igc-hierarchical-grid>
<button id="enableBtn">Enable Summary</button>
<button id="disableBtn">Disable Summary </button>

    constructor() {
    var hierarchicalGrid = this.hierarchicalGrid = document.getElementById('hierarchicalGrid') as IgcHierarchicalGrid;
    var enableBtn = this.enableBtn = document.getElementById('enableBtn') as HTMLButtonElement;
    var disableBtn = this.disableBtn = document.getElementById('disableBtn') as HTMLButtonElement;
    hierarchicalGrid.data = this.data;
    enableBtn.addEventListener("click", this.enableSummary);
    disableBtn.addEventListener("click", this.disableSummary);
}

    public enableSummary() {
    this.hierarchicalGrid.enableSummaries([
        {fieldName: 'GrammyNominations'},
        {fieldName: 'GrammyAwards'}
    ]);
}
public disableSummary() {
    this.hierarchicalGrid.disableSummaries(['GrammyNominations']);
}

    Custom Hierarchical Grid Summaries

    Si estas funciones no cumplen con sus requisitos, puede proporcionar un resumen personalizado para las columnas específicas.

    Para lograr esto, debe anular una de las clases base IgcSummaryOperand, IgcNumberSummaryOperand o IgcDateSummaryOperand según el tipo de datos de la columna y sus necesidades. De esta manera puede redefinir la función existente o puede agregar nuevas funciones. La clase IgcSummaryOperand proporciona la implementación predeterminada solo para el método count. IgcNumberSummaryOperand extiende IgcSummaryOperand y proporciona implementación para Min, Max, Sum y Average. IgcDateSummaryOperand amplía IgcSummaryOperand y, además, le ofrece las versiones Earliest y Latest.

    import { IgcSummaryResult, IgcSummaryOperand, IgcNumberSummaryOperand, IgcDateSummaryOperand } from 'igniteui-webcomponents-grids';

class MySummary extends IgcNumberSummaryOperand {
    constructor() {
        super();
    }

    operate(data?: any[]): IgcSummaryResult[] {
        const result = super.operate(data);
        result.push({
            key: 'test',
            label: 'Test',
            summaryResult: data.filter(rec => rec > 10 && rec < 30).length
        });
        return result;
    }
}

    Como se ve en los ejemplos, las clases base exponen el método operate, por lo que puede elegir obtener todos los resúmenes predeterminados y modificar el resultado, o calcular resultados resumidos completamente nuevos.

    El método devuelve una lista de IgcSummaryResult.

    interface IgcSummaryResult {
    key: string;
    label: string;
    summaryResult: any;
}

    y tomar parámetros opcionales para calcular los resúmenes. Consulte Resúmenes personalizados, que acceden a toda la sección de datos a continuación.

    [!Note] In order to calculate the summary row height properly, the Hierarchical Grid needs the Operate method to always return an array of IgcSummaryResult with the proper length even when the data is empty.

    Y ahora agreguemos nuestro resumen personalizado a la columna GrammyAwards. Lo lograremos estableciendo la propiedad Summaries en la clase que creamos a continuación.

    <igc-hierarchical-grid auto-generate="false" name="hierarchicalGrid" id="hierarchicalGrid" primary-key="ID">
    <igc-column field="Artist" header="Artist" has-summary="true"> </igc-column>
    <igc-column field="Photo" header="Photo" data-type="image"> </igc-column>
    <igc-column field="Debut" header="Debut" has-summary="true"> </igc-column>
    <igc-column field="GrammyNominations" header="Grammy Nominations" data-type="number" has-summary="true"> </igc-column>
    <igc-column field="GrammyAwards" header="Grammy Awards" data-type="number" has-summary="true" id="grammyAwards"> </igc-column>
</igc-hierarchical-grid>

    constructor() {
    var hierarchicalGrid = this.hierarchicalGrid = document.getElementById('hierarchicalGrid') as IgcHierarchicalGrid;
    var grammyAwards = this.grammyAwards = document.getElementById('grammyAwards') as IgcColumnComponent;
    hierarchicalGrid.data = this.data;
    grammyAwards.summaries = this.mySummary;
}

    export class HierarchicalGridComponent implements OnInit {
    mySummary = MySummary;
}

    Custom summaries, which access all data

    Ahora puede acceder a todos los datos de la cuadrícula jerárquica dentro del resumen de columna personalizado. Se introducen dos parámetros opcionales adicionales en el método SummaryOperand Operate. Como puede ver en el fragmento de código a continuación, el método operate tiene los siguientes tres parámetros:

    • columnData: le proporciona una matriz que contiene los valores solo para la columna actual
    • allGridData: le brinda toda la fuente de datos de la cuadrícula
    • fieldName - campo de columna actual
    class MySummary extends IgcNumberSummaryOperand {
    constructor() {
        super();
    }
    operate(columnData: any[], allGridData = [], fieldName?): IgcSummaryResult[] {
        const result = super.operate(allData.map(r => r[fieldName]));
        result.push({ key: 'test', label: 'Total Discontinued', summaryResult: allData.filter((rec) => rec.Discontinued).length });
        return result;
    }
}

    Summary Template

    Summary apunta al resumen de la columna proporcionando como contexto los resultados del resumen de la columna.

    <igc-column id="column" has-summary="true">
</igc-column>

    constructor() {
    var column = this.column = document.getElementById('column') as IgcColumnComponent;
    column.summaryTemplate = this.summaryTemplate;
}

public summaryTemplate = (ctx: IgcSummaryTemplateContext) => {
    return html`
        <span> My custom summary template</span>
        <span>${ ctx.implicit[0].label } - ${ ctx.implicit[0].summaryResult }</span>
    `;
}

    Cuando se define un resumen predeterminado, la altura del área de resumen se calcula por diseño en función de la columna con el mayor número de resúmenes y la--ig-size de la cuadrícula. Utilice la summaryRowHeight propiedad input para invalidar el valor predeterminado. Como argumento, espera un valor numérico, y establecer un valor falso desencadenará el comportamiento de tamaño predeterminado del pie de página de la cuadrícula.

    Formatting summaries

    De forma predeterminada, los resultados de resumen, producidos por los operandos de resumen integrados, se localizan y formatean de acuerdo con la locale de la cuadrícula y la columna pipeArgs. Cuando se utilizan operandos personalizados, la locale y pipeArgs no se aplican. Si desea cambiar la apariencia predeterminada de los resultados del resumen, puede formatearlos usando la propiedad summaryFormatter.

        public dateSummaryFormat(summary: IgcSummaryResult, summaryOperand: IgcSummaryOperand): string {
        const result = summary.summaryResult;
        if (summaryOperand instanceof IgcDateSummaryOperand && summary.key !== "count" && result !== null && result !== undefined) {
            const format = new Intl.DateTimeFormat("en", { year: "numeric" });
            return format.format(new Date(result));
        }
        return result;
    }

    <igc-column id="column"></igx-column>

    constructor() {
    var column = this.column = document.getElementById('column') as IgcColumnComponent;
    column.summaryFormatter = this.dateSummaryFormat;
}

    Keyboard Navigation

    Se puede navegar por las filas de resumen con las siguientes interacciones de teclado:

    • ARRIBA: navega una celda hacia arriba.
    • ABAJO: navega una celda hacia abajo.
    • IZQUIERDA: navega una celda hacia la izquierda.
    • DERECHA: navega una celda hacia la derecha.
    • CTRL + IZQUIERDA o INICIO: navega a la celda más a la izquierda.
    • CTRL + DERECHA o FINAL: navega a la celda más a la derecha.

    Styling

    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:

    <igc-hierarchical-grid id="hierarchicalGrid"></igc-hierarchical-grid>

    Luego configure las propiedades CSS relacionadas para esa clase:

    #hierarchicalGrid {
    --ig-grid-summary-background-color:#e0f3ff;
    --ig-grid-summary-focus-background-color: rgba( #94d1f7, .3 );
    --ig-grid-summary-label-color: rgb(228, 27, 117);
    --ig-grid-summary-result-color: black;
}

    Demo

    API References

    Additional Resources

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