igx-grid summary not appear | Infragistics Forums

Hello Martin, how are u?

We have the same solutions, but my solution doesn' work fine.

My ts

import { Component, OnInit, ViewChild, ViewEncapsulation } from "@angular/core";
import { OrderService } from './orders.service';
import { IgxGridComponent, 
    IgxNumberSummaryOperand, 
    IgxSummaryResult, 
    IgxExcelExporterOptions, 
    IgxExcelExporterService } from "igniteui-angular";

    @Component({
        encapsulation: ViewEncapsulation.None,
        selector: "app-orders",
        templateUrl: "./orders.component.html",
        styleUrls: ["./orders.component.scss"]
    })
    
    export class OrderComponent implements OnInit {
    
        @ViewChild("grid1", { read: IgxGridComponent })
        public grid1: IgxGridComponent;
        public discontinuedSummary = DiscontinuedSummary;
        public data;
        public OrderId = 0;
    
        constructor(private service: OrderService, private excelExport: IgxExcelExporterService)
        { }
    
        ngOnInit() {
            this.GetOrders();
        }
    
        
    
        public GetOrders(){
            this.service.GetOrders().then(res =>{
                let out = <any>res;
                if(out){
                    console.log(out.Result);
                    this.data = out.Result;
                }
                else{
                    this.data = [];
                }
            })
        }
    
        public exportButtonHandler() {
            this.excelExport.export(this.grid1, new IgxExcelExporterOptions("ExportFileFromOrders"));
        }
    }

class DiscontinuedSummary extends IgxNumberSummaryOperand {

    constructor() {
      super();
    }
  
    public operate(data?: any[]): IgxSummaryResult[] {
        const result = [];
        result.push({
            key: "ordenes",
            label: "Cantidad órdenes",
            summaryResult: data.length
          });
        result.push({
            key: "total",
            label: "Total",
            summaryResult: IgxNumberSummaryOperand.sum(data)
          });
        result.push({
            key: "maximo",
            label: "Max",
            summaryResult: IgxNumberSummaryOperand.max(data)
            });
        return result;
      }
}

My html

<div class="grid_wrapper">
    <igx-grid igxPreventDocumentScroll #grid1 [data]="data" [autoGenerate]="false" 
    height="800px" width="100%" [paging]="true" [perPage]="25" [allowFiltering]="true">
        
        <igx-column field="OrderId" header="Order ID" sortable="true">
        </igx-column>
        
        <igx-column field="OriginalPalletBarcode" header="Pallet Barcode"  >
        </igx-column>

        <igx-column field="Barcodes" header="Cods Barra">
        </igx-column>

        <igx-column field="Destination" header="Destino" sortable="true">
        </igx-column>

        <igx-column field="Type" header="Mundo" sortable="true">
        </igx-column>

        <igx-column field="SKU" header="SKU">
        </igx-column>

        <igx-column field="Description" header="Descripcion">
        </igx-column>
        
        <igx-column field="InitialQuantity" header="Cantidad inicial" dataType="number" editable="true"
            [hasSummary]="true" [summaries]="discontinuedSummary">
        </igx-column>
        
        <igx-column field="FallabelaCreationDate" header="Creación orden" sortable="true">
        </igx-column>
    </igx-grid>
    <button class="btn" igxButton="raised" igxButtonColor="white" igxButtonBackground="#731963" igxRipple
        (click)="exportButtonHandler()">Export Data</button>
</div>

any ideas?

Top Replies