feat(summaries): add disable summaries samples

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

@@ -0,0 +1,67 @@
+<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
+        [data]="data"
+        [autoGenerate]="false"
+        height="600px"
+        width="100%"
+    >
+        <igx-column field="ProductID" header="Product ID"> </igx-column>
+        <igx-column
+            field="ProductName"
+            header="Product Name"
+            [hasSummary]="true"
+        >
+        </igx-column>
+        <igx-column
+            field="UnitPrice"
+            header="Unit Price"
+            dataType="number"
+            [hasSummary]="true"
+            [disabledSummaries]="['count', 'sum', 'average']"
+        >
+        </igx-column>
+        <igx-column
+            field="UnitsInStock"
+            header="Units In Stock"
+            dataType="number"
+            [hasSummary]="true"
+            [summaries]="discontinuedSummary"
+            [disabledSummaries]="['total', 'totalDiscontinued']"
+        >
+        </igx-column>
+        <igx-column
+            field="Discontinued"
+            header="Discontinued"
+            [dataType]="'boolean'"
+            [hasSummary]="true"
+        >
+        </igx-column>
+        <igx-column
+            field="OrderDate"
+            header="Order Date"
+            [dataType]="'date'"
+            [hasSummary]="true"
+        >
+        </igx-column>
+    </igx-grid>
+</div>

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

@@ -0,0 +1,12 @@
+.grid__wrapper {
+    margin: 0 auto;
+    padding: 16px;
+}
+
+.summary-chooser {
+    margin-bottom: 16px;
+}
+
+igx-buttongroup{
+    display: block;
+}

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

@@ -0,0 +1,182 @@
+import {
+    Component,
+    ViewChild,
+    OnInit,
+    AfterViewInit
+} from "@angular/core";
+import {
+    IgxGridComponent,
+    IgxNumberSummaryOperand,
+    IgxSummaryResult,
+    IgxColumnComponent,
+    IgxButtonGroupComponent
+} from "igniteui-angular";
+import { DATA } from "../../data/nwindData";
+import { IgxPreventDocumentScrollDirective } from "../../directives/prevent-scroll.directive";
+
+class DiscontinuedSummary {
+    public operate(
+        data?: any[],
+        allData = [],
+        fieldName = ""
+    ): IgxSummaryResult[] {
+        const result = [];
+
+        result.push({
+            key: "products",
+            label: "Products",
+            summaryResult: data.length
+        });
+
+        result.push({
+            key: "total",
+            label: "Total Items",
+            summaryResult: IgxNumberSummaryOperand.sum(data)
+        });
+
+        result.push({
+            key: "discontinued",
+            label: "Discontinued Products",
+            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: "app-grid-summary-sample",
+    styleUrls: ["./grid-disable-summaries.component.scss"],
+    templateUrl: "grid-disable-summaries.component.html",
+    imports: [
+        IgxGridComponent,
+        IgxPreventDocumentScrollDirective,
+        IgxColumnComponent,
+        IgxButtonGroupComponent
+    ]
+})
+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;
+
+    constructor() {}
+
+    public ngOnInit(): void {
+        this.data = DATA;
+    }
+
+    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 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
+        );
+    }
+}

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

@@ -74,6 +74,7 @@ export const gridsRoutesData = {
     'grid-multi-cell-selection': { displayName: 'Grid Multi cell selection', parentName: 'Grid' },
     'grid-multi-cell-selection-style': { displayName: 'Grid Multi Cell Selection Style', parentName: 'Grid' },
     'grid-selection-custom-summaries': { displayName: 'Grid Selection Based Summaries', parentName: 'Grid' },
+    'grid-disable-summaries': { displayName: 'Grid Disable Summaries', parentName: 'Grid' },
     'grid-multi-row-layout': { displayName: 'Grid Multi Row Layout', parentName: 'Grid' },
     'grid-multi-row-layout-configuration': { displayName: 'Grid Multi Row Layout Configuration', parentName: 'Grid' },
     'grid-multi-row-layout-styling': { displayName: 'Grid Multi Row Layout Styling', parentName: 'Grid' },

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

@@ -14,6 +14,7 @@ import { GridCustomFilteringComponent } from './grid-custom-filtering/grid-custo
 import { GridCustomKBNavigationComponent } from './grid-custom-kb-navigation/grid-custom-kb-navigation-sample.component';
 import { CustomRemotePagingGridSampleComponent } from './grid-custom-remote-paging-sample/custom-remote-paging-sample.component';
 import { GridCustomSummariesSelectionComponent } from './grid-custom-summaries-selection/grid-custom-summaries-selection.component';
+import { GridDisableSummariesComponent } from './grid-disable-summaries/grid-disable-summaries.component';
 import { GridDisplayDensitySampleComponent } from './grid-displaydensity-sample/grid-displaydensity-sample.component';
 import { GridEditingSampleComponent } from './grid-editing-sample/grid-editing-sample.component';
 import { GridExcelStyleFilteringLoadOnDemandComponent } from './grid-excel-style-filtering-load-on-demand/grid-excel-style-filtering-load-on-demand.component';
@@ -585,6 +586,11 @@ export const gridsRoutes: Routes = [
         data: gridsRoutesData['grid-selection-custom-summaries'],
         path: 'grid-selection-custom-summaries'
     },
+    {
+        component: GridDisableSummariesComponent,
+        data: gridsRoutesData['grid-disable-summaries'],
+        path: 'grid-disable-summaries'
+    },
     {
         component: GridMultiRowLayoutStylingComponent,
         data: gridsRoutesData['grid-multi-row-layout-styling'],

src/app/grid/grids.module.ts

@@ -40,6 +40,7 @@ import { GridCustomFilteringComponent } from './grid-custom-filtering/grid-custo
 import { GridCustomKBNavigationComponent } from './grid-custom-kb-navigation/grid-custom-kb-navigation-sample.component';
 import { CustomRemotePagingGridSampleComponent } from './grid-custom-remote-paging-sample/custom-remote-paging-sample.component';
 import { GridCustomSummariesSelectionComponent } from './grid-custom-summaries-selection/grid-custom-summaries-selection.component';
+import { GridDisableSummariesComponent } from './grid-disable-summaries/grid-disable-summaries.component';
 import { GridDisplayDensitySampleComponent } from './grid-displaydensity-sample/grid-displaydensity-sample.component';
 import { GridEditingEventsComponent } from './grid-editing-events/grid-editing-events.component';
 import { GridEditingLifecycleComponent } from './grid-editing-lifecycle-sample/grid-editing-lifecycle.component';
@@ -272,6 +273,7 @@ import { GridCascadingCombosComponent } from './grid-cascading-combos/grid-casca
     GridExternalExcelStyleFilteringComponent,
     GridExternalOutletComponent,
     GridCustomSummariesSelectionComponent,
+    GridDisableSummariesComponent,
     GridMultiRowLayoutStylingComponent,
     PinningStylingComponent,
     GridGroupByStylingComponent,