chore(*): add summary sample that acces all grid data

Author: ddincheva

src/app/grid-groupby/grid-groupby.sample.html

@@ -4,7 +4,7 @@
     <div class="density-chooser" style="margin-bottom: 16px">
             <igx-buttongroup [values]="summaryModes" (onSelect)="selectSummaryMode($event)" style="display: block; width: 500px"></igx-buttongroup>
         </div>
-    <igx-grid #grid1 [data]="data" [allowFiltering]="true" [cellSelection]="'single'" [width]="'1200px'" (onGroupingDone)="onGroupingDoneHandler($event)" [hideGroupedColumns]="hideGroupedColumns" [(groupingExpressions)]='groupingExpressions'
+    <igx-grid #grid1 [data]="data" [allowFiltering]="true" [cellSelection]="'single'" [width]="'1200px'" [hideGroupedColumns]="hideGroupedColumns"
     [height]="'700px'" [(groupingExpansionState)]='expState' [rowSelectable]='true'  [summaryCalculationMode]="summaryMode">
         <igx-column *ngFor="let c of columns" [sortable]="true" [field]="c.field" [header]="c.field" [width]="c.width"
             [hidden]='c.hidden' [sortable]='true' [groupable]='c.groupable' [movable]='true' [pinned]='!!c.pinned' [editable]="true" [hasSummary]="true" [dataType]='c.dataType'>

src/app/grid-summaries/grid-summaries.sample.html

@@ -1,5 +1,5 @@
 <igx-grid #grid1 [data]="data" [autoGenerate]="false" [displayDensity]="'compact'" [width]="w" [height]="h"
-    [paging]="false" [allowFiltering]='true' [filterMode]="'excelStyleFilter'">
+    [paging]="false" [allowFiltering]='true' [filterMode]="'excelStyleFilter'" [summaryCalculationMode]="'rootAndChildLevels'">
     <igx-column field="Index" header="Index" [width]="cw">
     </igx-column>
     <igx-column field="ProductID" header="Product ID" [width]="cw" [headerClasses]="'prodId'" [groupable]="groupable">
@@ -9,9 +9,6 @@
     </igx-column>
     <igx-column field="ReorderLevel" [width]="cw" [sortable]="true" [groupable]="groupable" [filterable]="filterable"
         editable="true" [dataType]="'number'" [disableHiding]="disableHiding" [disablePinning]="disablePinning">
-        <ng-template igxCell let-cell="cell" let-val let-row>
-            {{val}} {{row.gridID}}
-        </ng-template>
     </igx-column>
     <igx-column field="QuantityPerUnit" [width]="cw" header="QuantityPerUnit" [sortable]="true" [dataType]="'string'"
         [editable]="true">
@@ -23,16 +20,15 @@
         </ng-template>
     </igx-column>
     <igx-column field="OrderDate" [width]="cw" [dataType]="'date'" [hasSummary]="false" [sortable]="true">
-        <ng-template igxCell let-cell="cell" let-val let-row>
-            {{val}}
-        </ng-template>
     </igx-column>
     <igx-column field="Discontinued" header="Discontinued" [dataType]="'boolean'" [width]="cw" [hasSummary]="false"
         editable="true">
         <ng-template igxCell let-cell="cell" let-val>
             {{val}}
         </ng-template>
     </igx-column>
+    <igx-column field="Sum" [hasSummary]="true" [summaries]="mySummary">
+    </igx-column>
 </igx-grid>
 
 <div class="properties-input">

src/app/grid-summaries/grid-summaries.sample.ts

@@ -14,13 +14,16 @@ class MySummary extends IgxNumberSummaryOperand {
         super();
     }
 
-    operate(data?: any[]): IgxSummaryResult[] {
-        const result = super.operate(data);
-        result.push({
-            key: 'test',
-            label: 'Test',
-            summaryResult: data.filter((rec) => rec > 10 && rec < 30).length
-        });
+    operate(data?: any[], fieldName?): IgxSummaryResult[] {
+        fieldName = fieldName === 'Sum' ? 'ReorderLevel' : fieldName;
+        const result = super.operate(data, fieldName);
+        if (!(fieldName === 'ReorderLevel')) {
+            result.push({
+                key: 'test',
+                label: 'Total Discounted',
+                summaryResult: data.filter((rec) => rec.Discontinued).length
+            });
+        }
 
         return result;
     }