All Data summary sample

live-editing/configs/GridConfigGenerator.ts

@@ -42,6 +42,7 @@ import {
 import {
     GridAdvancedFilteringStyleComponent
 } from "../../src/app/grid/grid-advanced-filtering-style/grid-advanced-filtering-style.component";
+import { GridAllDataSummaryComponent } from "../../src/app/grid/grid-allData-summary/grid-allData-summary.component";
 import {
     GridBatchEditingSampleComponent
 } from "../../src/app/grid/grid-batch-editing/grid-batch-editing-sample.component";
@@ -1158,6 +1159,16 @@ export class GridConfigGenerator implements IConfigGenerator {
                 ngProviders: []
             })
         }));
+
+        configs.push(new Config({
+            component: GridAllDataSummaryComponent,
+            additionalFiles: ["/src/app/data/nwindData.ts"],
+            appModuleConfig: new AppModuleConfig({
+                imports: [GridAllDataSummaryComponent, IgxGridModule ],
+                ngDeclarations: [GridAllDataSummaryComponent],
+                ngImports: [IgxGridModule]
+            })
+        }));
         return configs;
     }
 }

live-editing/configs/HierarchicalGridConfigGenerator.ts

@@ -20,6 +20,7 @@ import { IgxSparklineCoreModule} from "igniteui-angular-charts/ES5/igx-sparkline
 import { IgxSparklineModule} from "igniteui-angular-charts/ES5/igx-sparkline-module";
 import { HGridAdvancedFilteringStyleComponent } from "../../src/app/hierarchical-grid/hierarchical-grid-advanced-filtering-style/hierarchical-grid-advanced-filtering-style.component";
 import { HGridAdvancedFilteringSampleComponent } from "../../src/app/hierarchical-grid/hierarchical-grid-advanced-filtering/hierarchical-grid-advanced-filtering.component";
+import { HGridAllDataSummaryComponent } from "../../src/app/hierarchical-grid/hierarchical-grid-allData-summary/hierarchical-grid-allData-summary.component";
 import { HGridBatchEditingSampleComponent } from "../../src/app/hierarchical-grid/hierarchical-grid-batch-editing/hierarchical-grid-batch-editing.component";
 import { HierarchicalGridWithTransactionsComponent } from "../../src/app/hierarchical-grid/hierarchical-grid-batch-editing/hierarchical-grid-transactions.component";
 import { HierarchicalGridColumnHidingToolbarStyleComponent } from "../../src/app/hierarchical-grid/hierarchical-grid-column-hiding-toolbar-style/hierarchical-grid-column-hiding-toolbar-style.component";
@@ -670,6 +671,16 @@ export class HierarchicalGridConfigGenerator implements IConfigGenerator {
             component: HGridSelectionTemplateNumbersSampleComponent
         }));
 
+        configs.push(new Config({
+            additionalFiles: ["/src/app/hierarchical-grid/data.ts"],
+            appModuleConfig: new AppModuleConfig({
+                imports: [IgxHierarchicalGridModule, HGridAllDataSummaryComponent],
+                ngDeclarations: [HGridAllDataSummaryComponent],
+                ngImports: [IgxHierarchicalGridModule]
+            }),
+            component: HGridAllDataSummaryComponent
+        }));
+
         return configs;
     }
 }

live-editing/configs/TreeGridConfigGenerator.ts

@@ -41,20 +41,18 @@ import { TreeGridAdvancedFilteringSampleComponent } from "../../src/app/tree-gri
 import { TreeGridAdvancedFilteringStyleComponent } from "../../src/app/tree-grid/tree-grid-advanced-filtering-style/tree-grid-advanced-filtering-style.component";
 import { TreeGridCellSelectionComponent } from "../../src/app/tree-grid/tree-grid-cellSelection-sample/tree-grid-cellSelection.component";
 import { TreeGridColumnResizingSampleComponent } from "../../src/app/tree-grid/tree-grid-column-resizing-sample/tree-grid-column-resizing-sample.component";
-import { TreeGridConditionalCellStyleComponent } from "../../src/app/tree-grid/tree-grid-conditional-cell-style-sample/tree-grid-conditional-cell-style-sample.component";
-import {
-    TreeGridConditionalRowSelectorsSampleComponent
-} from "../../src/app/tree-grid/tree-grid-conditional-row-selectors/tree-grid-conditional-row-selectors.component";
 // tslint:disable-next-line: ordered-imports
 import {
     TreeGridConditionalCellStyle2Component
 } from "../../src/app/tree-grid/tree-grid-conditional-cell-style-2/tree-grid-conditional-cell-style-2.component";
+import { TreeGridConditionalCellStyleComponent } from "../../src/app/tree-grid/tree-grid-conditional-cell-style-sample/tree-grid-conditional-cell-style-sample.component";
+import {
+    TreeGridConditionalRowSelectorsSampleComponent
+} from "../../src/app/tree-grid/tree-grid-conditional-row-selectors/tree-grid-conditional-row-selectors.component";
 import { TreeGridDisplaydensitySampleComponent } from "../../src/app/tree-grid/tree-grid-displaydensity-sample/tree-grid-displaydensity-sample.component";
 import { TreeGridEditingEventsComponent } from "../../src/app/tree-grid/tree-grid-editing-events/tree-grid-editing-events.component";
 import { TreeGridEditingSampleComponent } from "../../src/app/tree-grid/tree-grid-editing-sample/tree-grid-editing-sample.component";
 import { TreeGridEditingStyleComponent } from "../../src/app/tree-grid/tree-grid-editing-style/tree-grid-editing-sample.component";
-import { TreeGridExternalAdvancedFilteringComponent } from "../../src/app/tree-grid/tree-grid-external-advanced-filtering/tree-grid-external-advanced-filtering.component";
-import { TreeGridExternalExcelStyleFilteringComponent } from "../../src/app/tree-grid/tree-grid-external-excel-style-filtering/tree-grid-external-excel-style-filtering.component";
 import { RemoteValuesService } from "../../src/app/tree-grid/tree-grid-excel-style-filtering-load-on-demand/remoteValues.service";
 import { TreeGridExcelStyleFilteringLoadOnDemandComponent } from "../../src/app/tree-grid/tree-grid-excel-style-filtering-load-on-demand/tree-grid-excel-style-filtering-load-on-demand.component";
 import {
@@ -69,6 +67,8 @@ import {
 import {
     TreeGridExcelStyleFilteringStyleComponent
 } from "../../src/app/tree-grid/tree-grid-excel-style-filtering-style/tree-grid-excel-style-filtering-style.component";
+import { TreeGridExternalAdvancedFilteringComponent } from "../../src/app/tree-grid/tree-grid-external-advanced-filtering/tree-grid-external-advanced-filtering.component";
+import { TreeGridExternalExcelStyleFilteringComponent } from "../../src/app/tree-grid/tree-grid-external-excel-style-filtering/tree-grid-external-excel-style-filtering.component";
 import { TreeGridFilteringCustomSampleComponent } from "../../src/app/tree-grid/tree-grid-filtering-custom-sample/tree-grid-filtering-custom-sample.component";
 import { TreeGridFilteringSampleComponent } from "../../src/app/tree-grid/tree-grid-filtering-sample/tree-grid-filtering-sample.component";
 import { TreeGridFilteringStyleComponent } from "../../src/app/tree-grid/tree-grid-filtering-style/tree-grid-filtering-style.component";
@@ -108,6 +108,7 @@ import { TreeGridToolbarSample3Component } from "../../src/app/tree-grid/tree-gr
 import { TreeGridToolbarSample4Component } from "../../src/app/tree-grid/tree-grid-toolbar-sample-4/tree-grid-toolbar-sample-4.component";
 import { TreeGridToolbarStyleComponent } from "../../src/app/tree-grid/tree-grid-toolbar-style/tree-grid-toolbar-style.component";
 import { TreeGridVirtualizationSampleComponent } from "../../src/app/tree-grid/tree-grid-virtualization-sample/tree-grid-virtualization-sample.component";
+import { TreeGridAllDataSummaryComponent } from "../../src/app/tree-grid/treegrid-allData-summary/treegrid-allData-summary.component";
 import { AppModuleConfig } from "./core/AppModuleConfig";
 import { Config } from "./core/Config";
 import { IConfigGenerator } from "./core/IConfigGenerator";
@@ -918,6 +919,18 @@ export class TreeGridConfigGenerator implements IConfigGenerator {
             })
         }));
 
+        configs.push(new Config({
+            additionalFiles: [
+                "/src/app/tree-grid/data/employees-flat.ts"
+            ],
+            appModuleConfig: new AppModuleConfig({
+                imports: [IgxTreeGridModule, TreeGridAllDataSummaryComponent],
+                ngDeclarations: [TreeGridAllDataSummaryComponent],
+                ngImports: [IgxTreeGridModule]
+            }),
+            component: TreeGridAllDataSummaryComponent
+        }));
+
         return configs;
     }
 }

src/app/data/nwindData.ts

@@ -21,7 +21,7 @@ export const DATA: any[] = [{
     UnitsInStock: 17,
     UnitsOnOrder: 40,
     ReorderLevel: 25,
-    Discontinued: false,
+    Discontinued: true,
     OrderDate: new Date("2003-03-17")
   }, {
     ProductID: 3,

src/app/grid/grid-allData-summary/grid-allData-summary.component.html

@@ -0,0 +1,17 @@
+<div class="grid__wrapper">
+    <igx-grid #grid1 [data]="data" [autoGenerate]="false" height="600px" width="100%" [paging]="false">
+        <igx-column field="ProductID" header="Product ID" width="17%" [headerClasses]="'prodId'">
+        </igx-column>
+        <igx-column field="ProductName" header="Product Name" width="17%" [headerClasses]="'prodId'" >
+        </igx-column>
+        <igx-column field="UnitPrice" header="Price" [filterable]="false" width="17%" editable="true" dataType="number">
+        </igx-column>
+        <igx-column field="UnitsInStock" header="Units In Stock" width="17%" dataType="number" editable="true"
+            [hasSummary]="true" [summaries]="discontinuedSummary">
+        </igx-column>
+        <igx-column field="Discontinued" header="Discontinued" [editable]="true" width="17%" [dataType]="'boolean'">
+        </igx-column>
+        <igx-column field="OrderDate" width="15%" [dataType]="'date'" [hasSummary]="true">
+        </igx-column>
+    </igx-grid>
+</div>

src/app/grid/grid-allData-summary/grid-allData-summary.component.ts

@@ -0,0 +1,58 @@
+import { Component, OnInit, ViewChild } from "@angular/core";
+import {
+    IgxGridComponent,
+    IgxNumberSummaryOperand,
+    IgxSummaryResult } from "igniteui-angular";
+import { DATA } from "../../data/nwindData";
+
+class DiscontinuedSummary extends IgxNumberSummaryOperand {
+
+  constructor() {
+    super();
+  }
+
+  public operate(data?: any[], allData = [], fieldName = ""): IgxSummaryResult[] {
+    const result = [];
+    result.push({
+        key: "products",
+        label: "Producs",
+        summaryResult: data.length
+      });
+    result.push({
+        key: "total",
+        label: "Total Items",
+        summaryResult: IgxNumberSummaryOperand.sum(data)
+      });
+    result.push({
+        key: "discontinued",
+        label: "Discontinued Producs",
+        summaryResult: allData.map(r => r["Discontinued"]).filter((rec) =>  rec).length
+        });
+    result.push({
+      key: "totalDiscontinued",
+      label: "Total Discontinued Items",
+      summaryResult: IgxNumberSummaryOperand.sum(allData.filter((rec) =>  rec["Discontinued"]).map(r => r[fieldName]))
+    });
+    return result;
+  }
+}
+@Component({
+  selector: "grid-allData-summary",
+  styleUrls: ["./grid-allData-summary.component.scss"],
+  templateUrl: "./grid-allData-summary.component.html"
+})
+export class GridAllDataSummaryComponent implements OnInit {
+
+  @ViewChild("grid1", { read: IgxGridComponent, static: true })
+  public grid1: IgxGridComponent;
+  public discontinuedSummary = DiscontinuedSummary;
+  public data;
+
+  constructor() {
+    this.data = DATA;
+   }
+
+  public ngOnInit() {
+  }
+
+}

src/app/grid/grid-routes-data.ts

@@ -86,6 +86,7 @@ export const gridsRoutesData = {
         { displayName: "Grid Excel Style Filtering Load On Demand", parentName: "Grid" },
     "grid-conditional-row-selectors": { displayName: "Grid Conditional Row Selectors", parentName: "Grid" },
     "grid-dynamic-chart-data": { displayName: "Grid Dynamic Chart Data", parentName: "Grid" },
-    "grid-master-detail": { displayName: "Grid Master Detail", parentName: "Grid" },
-    "grid-multiple-row-drag": { displayName: "Grid Multi Row Drag",  parentName: "Grid"}
+    "grid-multiple-row-drag": { displayName: "Grid Multi Row Drag",  parentName: "Grid"},
+    "grid-alldata-summaries": {displayName: "Grid AllData Summaries", parentName: "Grid"},
+    "grid-master-detail": { displayName: "Grid Master Detail", parentName: "Grid" }
 };

src/app/grid/grids-routing.module.ts

@@ -76,6 +76,7 @@ import { GridMultiColumnHeadersComponent } from "./multi-column-headers/multi-co
 import { CustomGridPagingStyleSample } from "./custom-grid-paging-style/custom-grid-paging-style.component";
 import { GridAdvancedFilteringSampleComponent } from "./grid-advanced-filtering-sample/grid-advanced-filtering-sample.component";
 import { GridAdvancedFilteringStyleComponent } from "./grid-advanced-filtering-style/grid-advanced-filtering-style.component";
+import { GridAllDataSummaryComponent } from "./grid-allData-summary/grid-allData-summary.component";
 import { GridCellSelectionComponent } from "./grid-cellSelection-sample/grid-cellSelection.component";
 import {
     GridConditionalRowSelectorsComponent
@@ -516,6 +517,11 @@ export const gridsRoutes: Routes = [
         data: gridsRoutesData["grid-dynamic-chart-data"],
         path: "grid-dynamic-chart-data"
     },
+    {
+        component: GridAllDataSummaryComponent,
+        data: gridsRoutesData["grid-alldata-summaries"],
+        path: "grid-alldata-summaries"
+    },
     {
         component: GridMasterDetailSampleComponent,
         data: gridsRoutesData["grid-master-detail"],

src/app/grid/grids.module.ts

@@ -41,6 +41,7 @@ import { IgxSparklineModule } from "igniteui-angular-charts/ES5/igx-sparkline-mo
 import { CustomGridPagingStyleSample } from "./custom-grid-paging-style/custom-grid-paging-style.component";
 import { GridAdvancedFilteringSampleComponent } from "./grid-advanced-filtering-sample/grid-advanced-filtering-sample.component";
 import { GridAdvancedFilteringStyleComponent } from "./grid-advanced-filtering-style/grid-advanced-filtering-style.component";
+import { GridAllDataSummaryComponent } from "./grid-allData-summary/grid-allData-summary.component";
 import { GridBatchEditingSampleComponent } from "./grid-batch-editing/grid-batch-editing-sample.component";
 import { GridWithTransactionsComponent } from "./grid-batch-editing/grid-transaction.component";
 import { GridComponent } from "./grid-boston-marathon/grid.component";
@@ -223,8 +224,9 @@ import { DataService } from "./services/data.service";
         GridMultipleRowDragComponent,
         ChartHostDirective,
         ChartArgsPipe,
-        GridMasterDetailSampleComponent,
-        GridExternalAdvancedFilteringComponent
+        GridExternalAdvancedFilteringComponent,
+        GridAllDataSummaryComponent,
+        GridMasterDetailSampleComponent
     ],
     imports: [
         CommonModule,

src/app/hierarchical-grid/hierarchical-grid-allData-summary/hierarchical-grid-allData-summary.component.html

@@ -0,0 +1,29 @@
+<div class="hgrid-sample">
+    <igx-hierarchical-grid class="hgrid" [data]="localdata"
+        [height]="'600px'" [width]="'100%'" [rowHeight]="'65px'" #hierarchicalGrid>
+        <igx-column field="Artist" [hasSummary]='true'></igx-column>
+        <igx-column field="Photo" [hasSummary]='true' [summaries]="grammySummary">
+            <ng-template igxCell let-cell="cell">
+                <div class="cell__inner_2">
+                    <img [src]="cell.value" class="photo" />
+                </div>
+            </ng-template>
+        </igx-column>
+        <igx-column field="Debut"></igx-column>
+        <igx-column field="GrammyNominations" header="Grammy Nominations" [hasSummary]='true' [dataType]="'number'" [summaries]="numberSummary"></igx-column>
+        <igx-column field="GrammyAwards" header="Grammy Awards" [hasSummary]='true' [dataType]="'number'" [summaries]="numberSummary"></igx-column>
+
+        <igx-row-island [key]="'Albums'">
+            <igx-column field="Album" [hasSummary]='true'></igx-column>
+            <igx-column field="LaunchDate" header="Launch Date" [hasSummary]='true' [dataType]="'date'"></igx-column>
+            <igx-column field="BillboardReview" header="Billboard Review" [hasSummary]='true'></igx-column>
+            <igx-column field="USBillboard200" header="US Billboard 200" [hasSummary]='true'></igx-column>
+        <igx-row-island [key]="'Songs'">
+                <igx-column field="Number" header="No." [hasSummary]='true'></igx-column>
+                <igx-column field="Title" [hasSummary]='true'></igx-column>
+                <igx-column field="Released" dataType="date" [hasSummary]='true'></igx-column>
+                <igx-column field="Genre" [hasSummary]='true'></igx-column>
+        </igx-row-island>
+    </igx-row-island>
+    </igx-hierarchical-grid>
+</div>

src/app/hierarchical-grid/hierarchical-grid-allData-summary/hierarchical-grid-allData-summary.component.ts

@@ -0,0 +1,73 @@
+import {  Component, OnInit, ViewChild } from "@angular/core";
+import { IgxHierarchicalGridComponent,
+    IgxNumberSummaryOperand,
+    IgxSummaryOperand,
+    IgxSummaryResult } from "igniteui-angular";
+import { SINGERS } from "../data";
+
+class CustomNumberSummary extends IgxNumberSummaryOperand {
+
+    constructor() {
+      super();
+    }
+
+    public operate(data?: any[]): IgxSummaryResult[] {
+        const result = super.operate(data);
+        result.pop();
+        result.pop();
+        return result;
+    }
+}
+
+class GrammySummary extends IgxSummaryOperand {
+
+    constructor() {
+      super();
+    }
+
+    public operate(data?: any[], allData = [], fieldName = ""): IgxSummaryResult[] {
+        const result = [];
+        result.push({
+            key: "nominatedSingers",
+            label: "Nominated Singers",
+            summaryResult: allData.filter((rec) =>  rec["GrammyNominations"] > 0).length
+        });
+        result.push({
+            key: "singersWithAwards",
+            label: "Singers with Awards",
+            summaryResult: allData.filter((rec) =>  rec["GrammyAwards"] > 0).length
+        });
+        result.push({
+            key: "nominations",
+            label: "Total Nominations",
+            summaryResult: IgxNumberSummaryOperand.sum(allData.map(r => r["GrammyNominations"]))
+        });
+        result.push({
+            key: "awards",
+            label: "Total Awards",
+            summaryResult: IgxNumberSummaryOperand.sum(allData.map(r => r["GrammyAwards"]))
+        });
+        return result;
+    }
+}
+
+@Component({
+    selector: "hierarchical-grid-allData-summary",
+    styleUrls: ["./hierarchical-grid-allData-summary.component.scss"],
+    templateUrl: "hierarchical-grid-allData-summary.component.html"
+})
+
+export class HGridAllDataSummaryComponent implements OnInit {
+    public localdata;
+    public grammySummary = GrammySummary;
+    public numberSummary = CustomNumberSummary;
+
+    @ViewChild("hierarchicalGrid", { static: true })
+    private hierarchicalGrid: IgxHierarchicalGridComponent;
+
+    constructor() {}
+
+    public ngOnInit(): void {
+        this.localdata = SINGERS;
+    }
+}

src/app/hierarchical-grid/hierarchical-grid-routes-data.ts

@@ -54,5 +54,6 @@ export const hierarchicalGridRoutesData = {
     "hierarchical-grid-advanced-filtering": { displayName: "Hierarchical Grid Advanced Filtering", parentName: "Hierarchical Grid" },
     "hierarchical-grid-advanced-filtering-style": { displayName: "Hierarchical Grid Advanced Filtering Style", parentName: "Hierarchical Grid" },
     "hierarchical-grid-filtering-style": { displayName: "HGrid Filtering Style", parentName: "Hierarchical Grid" },
-    "hierarchical-grid-conditional-row-selectors": { displayName: "HGrid Conditional Row Selectors", parentName: "Hierarchical Grid" }
+    "hierarchical-grid-conditional-row-selectors": { displayName: "HGrid Conditional Row Selectors", parentName: "Hierarchical Grid" },
+    "hierarchical-grid-allData-summary": {displayName: "HGrid All Data Custom Summaries", parentName: "Hierarchical Grid"}
 };