feat(summaries): add new disable summaries sample for the grid

Author: georgianastasov

src/app/grid/grid-disable-summaries/grid-disable-summaries.component.html

@@ -1,4 +1,22 @@
 <div class="grid__wrapper">
+    <div class="summary-chooser">
+        <igx-buttongroup
+            [selectionMode]="'multi'"
+            [values]="defaultSummaries"
+            (selected)="disableDefaultSummary($event)"
+            (deselected)="enableDefaultSummary($event)"
+        ></igx-buttongroup>
+    </div>
+
+    <div class="summary-chooser">
+        <igx-buttongroup
+            [selectionMode]="'multi'"
+            [values]="customSummaries"
+            (selected)="disableCustomSummary($event)"
+            (deselected)="enableCustomSummary($event)"
+        ></igx-buttongroup>
+    </div>
+
     <igx-grid
         [igxPreventDocumentScroll]="true"
         #grid1
@@ -7,8 +25,7 @@
         height="600px"
         width="100%"
     >
-        <igx-column field="ProductID" header="Product ID">
-        </igx-column>
+        <igx-column field="ProductID" header="Product ID"> </igx-column>
         <igx-column
             field="ProductName"
             header="Product Name"
@@ -39,15 +56,12 @@
             [hasSummary]="true"
         >
         </igx-column>
-        <igx-column field="OrderDate" [dataType]="'date'" [hasSummary]="true">
+        <igx-column
+            field="OrderDate"
+            header="Order Date"
+            [dataType]="'date'"
+            [hasSummary]="true"
+        >
         </igx-column>
     </igx-grid>
-    <div class="action__buttons">
-        <button igxButton="contained" (click)="disableDefaultSummaries()">
-            Disable Min and Max summaries for the Price column
-        </button>
-        <button igxButton="contained" (click)="disableCustomSummaries()">
-            Disable Products and Discontinued Products summaries
-        </button>
-    </div>
 </div>

src/app/grid/grid-disable-summaries/grid-disable-summaries.component.scss

@@ -3,10 +3,10 @@
     padding: 16px;
 }
 
-.action__buttons {
-    padding-top: 16px;
+.summary-chooser {
+    margin-bottom: 16px;
 }
 
-.action__buttons > button {
-    margin-right: 16px;
+igx-buttongroup{
+    display: block;
 }

src/app/grid/grid-disable-summaries/grid-disable-summaries.component.ts

@@ -1,14 +1,15 @@
 import {
     Component,
     ViewChild,
-    OnInit
+    OnInit,
+    AfterViewInit
 } from "@angular/core";
 import {
     IgxGridComponent,
     IgxNumberSummaryOperand,
     IgxSummaryResult,
     IgxColumnComponent,
-    IgxButtonDirective
+    IgxButtonGroupComponent
 } from "igniteui-angular";
 import { DATA } from "../../data/nwindData";
 import { IgxPreventDocumentScrollDirective } from "../../directives/prevent-scroll.directive";
@@ -60,16 +61,18 @@ class DiscontinuedSummary {
     styleUrls: ["./grid-disable-summaries.component.scss"],
     templateUrl: "grid-disable-summaries.component.html",
     imports: [
-        IgxPreventDocumentScrollDirective,
         IgxGridComponent,
+        IgxPreventDocumentScrollDirective,
         IgxColumnComponent,
-        IgxButtonDirective
+        IgxButtonGroupComponent
     ]
 })
-export class GridDisableSummariesComponent implements OnInit{
+export class GridDisableSummariesComponent implements OnInit, AfterViewInit {
     @ViewChild("grid1", { static: true }) public grid1: IgxGridComponent;
 
     public data: any[];
+    public defaultSummaries: any[];
+    public customSummaries: any[];
 
     public discontinuedSummary = DiscontinuedSummary;
 
@@ -79,11 +82,101 @@ export class GridDisableSummariesComponent implements OnInit{
         this.data = DATA;
     }
 
-    public disableDefaultSummaries() {
-        this.grid1.getColumnByName('UnitPrice').disabledSummaries = ['min', 'max'];
+    public ngAfterViewInit(): void {
+        this.defaultSummaries = [
+            {
+                label: 'Count',
+                selected: this.grid1.getColumnByName('UnitPrice').disabledSummaries.includes('count'),
+                togglable: true,
+                value: 'count'
+            },
+            {
+                label: 'Min',
+                selected: this.grid1.getColumnByName('UnitPrice').disabledSummaries.includes('min'),
+                togglable: true,
+                value: 'min'
+            },
+            {
+                label: 'Max',
+                selected: this.grid1.getColumnByName('UnitPrice').disabledSummaries.includes('max'),
+                togglable: true,
+                value: 'max'
+            },
+            {
+                label: 'Sum',
+                selected: this.grid1.getColumnByName('UnitPrice').disabledSummaries.includes('sum'),
+                togglable: true,
+                value: 'sum'
+            },
+            {
+                label: 'Average',
+                selected: this.grid1.getColumnByName('UnitPrice').disabledSummaries.includes('average'),
+                togglable: true,
+                value: 'average'
+            }
+        ];
+
+        this.customSummaries = [
+            {
+                label: 'Products',
+                selected: this.grid1.getColumnByName('UnitsInStock').disabledSummaries.includes('products'),
+                togglable: true,
+                value: 'products'
+            },
+            {
+                label: 'Total Items',
+                selected: this.grid1.getColumnByName('UnitsInStock').disabledSummaries.includes('total'),
+                togglable: true,
+                value: 'total'
+            },
+            {
+                label: 'Discontinued Products',
+                selected: this.grid1.getColumnByName('UnitsInStock').disabledSummaries.includes('discontinued'),
+                togglable: true,
+                value: 'discontinued'
+            },
+            {
+                label: 'Total Discontinued Items',
+                selected: this.grid1.getColumnByName('UnitsInStock').disabledSummaries.includes('totalDiscontinued'),
+                togglable: true,
+                value: 'totalDiscontinued'
+            }
+        ];
     }
 
-    public disableCustomSummaries() {
-        this.grid1.getColumnByName('UnitsInStock').disabledSummaries = ['products', 'discontinued'];
+    public disableDefaultSummary(event) {
+        const selectedValue = this.defaultSummaries[event.index].value;
+        const column = this.grid1.getColumnByName('UnitPrice');
+
+        if (!column.disabledSummaries.includes(selectedValue)) {
+            column.disabledSummaries = [...column.disabledSummaries, selectedValue];
+        }
+    }
+
+    public enableDefaultSummary(event) {
+        const selectedValue = this.defaultSummaries[event.index].value;
+        const column = this.grid1.getColumnByName('UnitPrice');
+
+        column.disabledSummaries = column.disabledSummaries.filter(
+            (summary) => summary !== selectedValue
+        );
+    }
+
+    public disableCustomSummary(event) {
+        const selectedValue = this.customSummaries[event.index].value;
+        const column = this.grid1.getColumnByName('UnitsInStock');
+
+        if (!column.disabledSummaries.includes(selectedValue)) {
+            column.disabledSummaries = [...column.disabledSummaries, selectedValue];
+        }
+    }
+
+    public enableCustomSummary(event) {
+        const selectedValue = this.customSummaries[event.index].value;
+        const column = this.grid1.getColumnByName('UnitsInStock');
+
+        column.disabledSummaries = column.disabledSummaries.filter(
+            (summary) => summary !== selectedValue
+        );
     }
 }