From 854498fdcbaf096694714a4d023073c34ae9a90a Mon Sep 17 00:00:00 2001 From: Georgi Anastasov Date: Tue, 26 Nov 2024 18:50:27 +0200 Subject: [PATCH 01/11] feat(summaries): add disabled summaries grid sample --- .../grid-disabled-summaies.component.html | 52 +++++++++++ .../grid-disabled-summaies.component.scss | 12 +++ .../grid-disabled-summaies.component.ts | 89 +++++++++++++++++++ src/app/grid/grid-routes-data.ts | 1 + src/app/grid/grids-routing.module.ts | 6 ++ src/app/grid/grids.module.ts | 2 + 6 files changed, 162 insertions(+) create mode 100644 src/app/grid/grid-disabled-summaies/grid-disabled-summaies.component.html create mode 100644 src/app/grid/grid-disabled-summaies/grid-disabled-summaies.component.scss create mode 100644 src/app/grid/grid-disabled-summaies/grid-disabled-summaies.component.ts diff --git a/src/app/grid/grid-disabled-summaies/grid-disabled-summaies.component.html b/src/app/grid/grid-disabled-summaies/grid-disabled-summaies.component.html new file mode 100644 index 000000000..fe564b62a --- /dev/null +++ b/src/app/grid/grid-disabled-summaies/grid-disabled-summaies.component.html @@ -0,0 +1,52 @@ +
+ + + + + + + + + + + + + + +
+ + +
+
diff --git a/src/app/grid/grid-disabled-summaies/grid-disabled-summaies.component.scss b/src/app/grid/grid-disabled-summaies/grid-disabled-summaies.component.scss new file mode 100644 index 000000000..26e653676 --- /dev/null +++ b/src/app/grid/grid-disabled-summaies/grid-disabled-summaies.component.scss @@ -0,0 +1,12 @@ +.grid__wrapper { + margin: 0 auto; + padding: 16px; +} + +.action__buttons { + padding-top: 16px; +} + +.action__buttons > button { + margin-right: 16px; +} diff --git a/src/app/grid/grid-disabled-summaies/grid-disabled-summaies.component.ts b/src/app/grid/grid-disabled-summaies/grid-disabled-summaies.component.ts new file mode 100644 index 000000000..955685a1b --- /dev/null +++ b/src/app/grid/grid-disabled-summaies/grid-disabled-summaies.component.ts @@ -0,0 +1,89 @@ +import { + Component, + ViewChild, + OnInit +} from "@angular/core"; +import { + IgxGridComponent, + IgxNumberSummaryOperand, + IgxSummaryResult, + IgxColumnComponent, + IgxButtonDirective +} 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-disabled-summaies.component.scss"], + templateUrl: "grid-disabled-summaies.component.html", + imports: [ + IgxPreventDocumentScrollDirective, + IgxGridComponent, + IgxColumnComponent, + IgxButtonDirective + ] +}) +export class GridDisabledSummariesComponent implements OnInit{ + @ViewChild("grid1", { static: true }) public grid1: IgxGridComponent; + + public data: any[]; + + public discontinuedSummary = DiscontinuedSummary; + + constructor() {} + + public ngOnInit(): void { + this.data = DATA; + } + + public disableDefaultSummaries() { + this.grid1.getColumnByName('UnitPrice').disabledSummaries = ['min', 'max']; + } + + public disableCustomSummaries() { + this.grid1.getColumnByName('UnitsInStock').disabledSummaries = ['products', 'discontinued']; + } +} diff --git a/src/app/grid/grid-routes-data.ts b/src/app/grid/grid-routes-data.ts index cdc764f41..45469e767 100644 --- a/src/app/grid/grid-routes-data.ts +++ b/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-disabled-summaries': { displayName: 'Grid Disabled 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' }, diff --git a/src/app/grid/grids-routing.module.ts b/src/app/grid/grids-routing.module.ts index 4053aeae0..1f4993503 100644 --- a/src/app/grid/grids-routing.module.ts +++ b/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 { GridDisabledSummariesComponent } from './grid-disabled-summaies/grid-disabled-summaies.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: GridDisabledSummariesComponent, + data: gridsRoutesData['grid-disabled-summaries'], + path: 'grid-disabled-summaries' + }, { component: GridMultiRowLayoutStylingComponent, data: gridsRoutesData['grid-multi-row-layout-styling'], diff --git a/src/app/grid/grids.module.ts b/src/app/grid/grids.module.ts index fdb859555..feaae7ccf 100644 --- a/src/app/grid/grids.module.ts +++ b/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 { GridDisabledSummariesComponent } from './grid-disabled-summaies/grid-disabled-summaies.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, + GridDisabledSummariesComponent, GridMultiRowLayoutStylingComponent, PinningStylingComponent, GridGroupByStylingComponent, From 5f2698417d52ab8fca85458c991e493790a49d16 Mon Sep 17 00:00:00 2001 From: Georgi Anastasov Date: Tue, 26 Nov 2024 18:57:11 +0200 Subject: [PATCH 02/11] fix(summaries): correct name for the disable summaries grid sample --- .../grid-disable-summaries.component.html} | 0 .../grid-disable-summaries.component.scss} | 0 .../grid-disable-summaries.component.ts} | 8 ++++---- src/app/grid/grid-routes-data.ts | 2 +- src/app/grid/grids-routing.module.ts | 4 ++-- src/app/grid/grids.module.ts | 4 ++-- 6 files changed, 9 insertions(+), 9 deletions(-) rename src/app/grid/{grid-disabled-summaies/grid-disabled-summaies.component.html => grid-disable-summaries/grid-disable-summaries.component.html} (100%) rename src/app/grid/{grid-disabled-summaies/grid-disabled-summaies.component.scss => grid-disable-summaries/grid-disable-summaries.component.scss} (100%) rename src/app/grid/{grid-disabled-summaies/grid-disabled-summaies.component.ts => grid-disable-summaries/grid-disable-summaries.component.ts} (91%) diff --git a/src/app/grid/grid-disabled-summaies/grid-disabled-summaies.component.html b/src/app/grid/grid-disable-summaries/grid-disable-summaries.component.html similarity index 100% rename from src/app/grid/grid-disabled-summaies/grid-disabled-summaies.component.html rename to src/app/grid/grid-disable-summaries/grid-disable-summaries.component.html diff --git a/src/app/grid/grid-disabled-summaies/grid-disabled-summaies.component.scss b/src/app/grid/grid-disable-summaries/grid-disable-summaries.component.scss similarity index 100% rename from src/app/grid/grid-disabled-summaies/grid-disabled-summaies.component.scss rename to src/app/grid/grid-disable-summaries/grid-disable-summaries.component.scss diff --git a/src/app/grid/grid-disabled-summaies/grid-disabled-summaies.component.ts b/src/app/grid/grid-disable-summaries/grid-disable-summaries.component.ts similarity index 91% rename from src/app/grid/grid-disabled-summaies/grid-disabled-summaies.component.ts rename to src/app/grid/grid-disable-summaries/grid-disable-summaries.component.ts index 955685a1b..2ccce9f8a 100644 --- a/src/app/grid/grid-disabled-summaies/grid-disabled-summaies.component.ts +++ b/src/app/grid/grid-disable-summaries/grid-disable-summaries.component.ts @@ -50,15 +50,15 @@ class DiscontinuedSummary { .map((r) => r[fieldName]) ) }); - + return result; } } @Component({ selector: "app-grid-summary-sample", - styleUrls: ["./grid-disabled-summaies.component.scss"], - templateUrl: "grid-disabled-summaies.component.html", + styleUrls: ["./grid-disable-summaries.component.scss"], + templateUrl: "grid-disable-summaries.component.html", imports: [ IgxPreventDocumentScrollDirective, IgxGridComponent, @@ -66,7 +66,7 @@ class DiscontinuedSummary { IgxButtonDirective ] }) -export class GridDisabledSummariesComponent implements OnInit{ +export class GridDisableSummariesComponent implements OnInit{ @ViewChild("grid1", { static: true }) public grid1: IgxGridComponent; public data: any[]; diff --git a/src/app/grid/grid-routes-data.ts b/src/app/grid/grid-routes-data.ts index 45469e767..2c8f0d1d9 100644 --- a/src/app/grid/grid-routes-data.ts +++ b/src/app/grid/grid-routes-data.ts @@ -74,7 +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-disabled-summaries': { displayName: 'Grid Disabled 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' }, diff --git a/src/app/grid/grids-routing.module.ts b/src/app/grid/grids-routing.module.ts index 1f4993503..056b6b8cf 100644 --- a/src/app/grid/grids-routing.module.ts +++ b/src/app/grid/grids-routing.module.ts @@ -14,7 +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 { GridDisabledSummariesComponent } from './grid-disabled-summaies/grid-disabled-summaies.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'; @@ -587,7 +587,7 @@ export const gridsRoutes: Routes = [ path: 'grid-selection-custom-summaries' }, { - component: GridDisabledSummariesComponent, + component: GridDisableSummariesComponent, data: gridsRoutesData['grid-disabled-summaries'], path: 'grid-disabled-summaries' }, diff --git a/src/app/grid/grids.module.ts b/src/app/grid/grids.module.ts index feaae7ccf..2c9fb7426 100644 --- a/src/app/grid/grids.module.ts +++ b/src/app/grid/grids.module.ts @@ -40,7 +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 { GridDisabledSummariesComponent } from './grid-disabled-summaies/grid-disabled-summaies.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'; @@ -273,7 +273,7 @@ import { GridCascadingCombosComponent } from './grid-cascading-combos/grid-casca GridExternalExcelStyleFilteringComponent, GridExternalOutletComponent, GridCustomSummariesSelectionComponent, - GridDisabledSummariesComponent, + GridDisableSummariesComponent, GridMultiRowLayoutStylingComponent, PinningStylingComponent, GridGroupByStylingComponent, From 2fc5c835ff92f92ddc06bd13439e47abb69c3d72 Mon Sep 17 00:00:00 2001 From: Georgi Anastasov Date: Tue, 26 Nov 2024 21:02:08 +0200 Subject: [PATCH 03/11] feat(summaries): add disabled summaries tree grid sample --- ...tree-grid-disable-summaries.component.html | 62 +++++++++++++ ...tree-grid-disable-summaries.component.scss | 13 +++ .../tree-grid-disable-summaries.component.ts | 88 +++++++++++++++++++ src/app/tree-grid/tree-grid-routes-data.ts | 1 + src/app/tree-grid/tree-grid-routing.module.ts | 6 ++ src/app/tree-grid/tree-grid.module.ts | 2 + 6 files changed, 172 insertions(+) create mode 100644 src/app/tree-grid/tree-grid-disable-summaries/tree-grid-disable-summaries.component.html create mode 100644 src/app/tree-grid/tree-grid-disable-summaries/tree-grid-disable-summaries.component.scss create mode 100644 src/app/tree-grid/tree-grid-disable-summaries/tree-grid-disable-summaries.component.ts diff --git a/src/app/tree-grid/tree-grid-disable-summaries/tree-grid-disable-summaries.component.html b/src/app/tree-grid/tree-grid-disable-summaries/tree-grid-disable-summaries.component.html new file mode 100644 index 000000000..49b2733d3 --- /dev/null +++ b/src/app/tree-grid/tree-grid-disable-summaries/tree-grid-disable-summaries.component.html @@ -0,0 +1,62 @@ +
+ + + + + + + + + + + + + + + +
+ + +
+
diff --git a/src/app/tree-grid/tree-grid-disable-summaries/tree-grid-disable-summaries.component.scss b/src/app/tree-grid/tree-grid-disable-summaries/tree-grid-disable-summaries.component.scss new file mode 100644 index 000000000..b52425340 --- /dev/null +++ b/src/app/tree-grid/tree-grid-disable-summaries/tree-grid-disable-summaries.component.scss @@ -0,0 +1,13 @@ +.grid__wrapper { + margin: 0 auto; + padding: 16px; +} + +.action__buttons { + padding-top: 16px; +} + +.action__buttons > button { + margin-right: 16px; +} + diff --git a/src/app/tree-grid/tree-grid-disable-summaries/tree-grid-disable-summaries.component.ts b/src/app/tree-grid/tree-grid-disable-summaries/tree-grid-disable-summaries.component.ts new file mode 100644 index 000000000..c8b69f6d7 --- /dev/null +++ b/src/app/tree-grid/tree-grid-disable-summaries/tree-grid-disable-summaries.component.ts @@ -0,0 +1,88 @@ +import { Component, OnInit, ViewChild } from "@angular/core"; +import { + IgxTreeGridComponent, + IgxColumnComponent, + IgxButtonDirective, + IgxSummaryResult +} from "igniteui-angular"; +import { ORDERS_DATA } from "../data/orders"; +import { IgxPreventDocumentScrollDirective } from "../../directives/prevent-scroll.directive"; + +class UnitsSummary { + public operate( + data?: any[], + allData = [], + fieldName = "" + ): IgxSummaryResult[] { + const result = []; + result.push({ + key: "totalDelivered", + label: "Total Units Delivered", + summaryResult: allData + .filter((rec) => rec["Delivered"]) + .reduce((sum, rec) => sum + rec[fieldName], 0) + }); + + result.push({ + key: "totalNotDelivered", + label: "Total Units Not Delivered", + summaryResult: allData + .filter((rec) => !rec["Delivered"]) + .reduce((sum, rec) => sum + rec[fieldName], 0) + }); + + result.push({ + key: "averageUnits", + label: "Average Units per Order", + summaryResult: allData.length + ? allData.reduce((sum, rec) => sum + rec[fieldName], 0) / + allData.length + : 0 + }); + + result.push({ + key: "maxUnits", + label: "Highest Units", + summaryResult: allData.reduce( + (max, rec) => Math.max(max, rec[fieldName]), + Number.MIN_VALUE + ) + }); + + return result; + } +} + +@Component({ + selector: "app-tree-grid-summary-sample", + styleUrls: ["./tree-grid-disable-summaries.component.scss"], + templateUrl: "./tree-grid-disable-summaries.component.html", + imports: [ + IgxTreeGridComponent, + IgxPreventDocumentScrollDirective, + IgxColumnComponent, + IgxButtonDirective + ] +}) +export class TreeGridDisableSummariesComponent implements OnInit { + @ViewChild("treegrid1", { read: IgxTreeGridComponent, static: true }) + public treeGrid1: IgxTreeGridComponent; + + public data; + + public unitsSummary = UnitsSummary; + + constructor() {} + + public ngOnInit(): void { + this.data = ORDERS_DATA; + } + + public disableDefaultSummaries() { + this.treeGrid1.getColumnByName("UnitPrice").disabledSummaries = ["min", "max"]; + } + + public disableCustomSummaries() { + this.treeGrid1.getColumnByName("Units").disabledSummaries = ["averageUnits", "maxUnits"]; + } +} diff --git a/src/app/tree-grid/tree-grid-routes-data.ts b/src/app/tree-grid/tree-grid-routes-data.ts index 30dd3d3f5..f34bcd302 100644 --- a/src/app/tree-grid/tree-grid-routes-data.ts +++ b/src/app/tree-grid/tree-grid-routes-data.ts @@ -97,6 +97,7 @@ export const treeGridRoutesData = { 'treegrid-advanced-filtering-style': { displayName: 'TreeGrid Advanced Filtering Style', parentName: 'TreeGrid' }, 'treegrid-cell-selection': { displayName: 'TreeGrid Cell Selection', parentName: 'TreeGrid' }, 'treegrid-conditional-row-selectors': { displayName: 'TreeGrid Conditional Row Selectors', parentName: 'TreeGrid' }, + 'treegrid-disable-summaries': { displayName: 'TreeGrid Disable Summaries', parentName: 'TreeGrid' }, 'treegrid-style': { displayName: 'TreeGrid Style', parentName: 'TreeGrid' }, 'tree-grid-cell-cellStyling': { displayName: 'TreeGrid Conditional Cell Styling', parentName: 'TreeGrid' }, 'tree-grid-collapsible-groups': { displayName: 'TreeGrid Collapsible Column Groups', parentName: 'TreeGrid' }, diff --git a/src/app/tree-grid/tree-grid-routing.module.ts b/src/app/tree-grid/tree-grid-routing.module.ts index 6b7a0fa00..69b4ad4e9 100644 --- a/src/app/tree-grid/tree-grid-routing.module.ts +++ b/src/app/tree-grid/tree-grid-routing.module.ts @@ -25,6 +25,7 @@ import { TreeGridColumnResizingSampleComponent } from './tree-grid-column-resizi import { TreeGridConditionalCellStyle2Component } from './tree-grid-conditional-cell-style-2/tree-grid-conditional-cell-style-2.component'; import { TreeGridConditionalCellStyleComponent } from './tree-grid-conditional-cell-style-sample/tree-grid-conditional-cell-style-sample.component'; import { TreeGridConditionalRowSelectorsSampleComponent } from './tree-grid-conditional-row-selectors/tree-grid-conditional-row-selectors.component'; +import { TreeGridDisableSummariesComponent } from './tree-grid-disable-summaries/tree-grid-disable-summaries.component'; import { TreeGridDisplaydensitySampleComponent } from './tree-grid-displaydensity-sample/tree-grid-displaydensity-sample.component'; import { TreeGridEditingEventsComponent } from './tree-grid-editing-events/tree-grid-editing-events.component'; import { TreeGridEditingSampleComponent } from './tree-grid-editing-sample/tree-grid-editing-sample.component'; @@ -457,6 +458,11 @@ export const treeGridRoutes: Routes = [ data: treeGridRoutesData['treegrid-conditional-row-selectors'], path: 'treegrid-conditional-row-selectors' }, + { + component: TreeGridDisableSummariesComponent, + data: treeGridRoutesData['treegrid-disabled-summaries'], + path: 'treegrid-disabled-summaries' + }, { component: TreeGridStyleComponent, data: treeGridRoutesData['treegrid-style'], diff --git a/src/app/tree-grid/tree-grid.module.ts b/src/app/tree-grid/tree-grid.module.ts index 7d8cd461d..42aa06b88 100644 --- a/src/app/tree-grid/tree-grid.module.ts +++ b/src/app/tree-grid/tree-grid.module.ts @@ -60,6 +60,7 @@ import { TreeGridColumnResizingSampleComponent } from './tree-grid-column-resizi import { TreeGridConditionalCellStyle2Component } from './tree-grid-conditional-cell-style-2/tree-grid-conditional-cell-style-2.component'; import { TreeGridConditionalCellStyleComponent } from './tree-grid-conditional-cell-style-sample/tree-grid-conditional-cell-style-sample.component'; import { TreeGridConditionalRowSelectorsSampleComponent } from './tree-grid-conditional-row-selectors/tree-grid-conditional-row-selectors.component'; +import { TreeGridDisableSummariesComponent } from './tree-grid-disable-summaries/tree-grid-disable-summaries.component'; import { TreeGridDisplaydensitySampleComponent } from './tree-grid-displaydensity-sample/tree-grid-displaydensity-sample.component'; import { TreeGridEditingEventsComponent } from './tree-grid-editing-events/tree-grid-editing-events.component'; import { TreeGridEditingSampleComponent } from './tree-grid-editing-sample/tree-grid-editing-sample.component'; @@ -239,6 +240,7 @@ import { TreeGridSummaryExportComponent } from './tree-grid-summary-export/tree- TreeGridAdvancedFilteringStyleComponent, TreeGridExcelStyleFilteringLoadOnDemandComponent, TreeGridConditionalRowSelectorsSampleComponent, + TreeGridDisableSummariesComponent, TreeGridStyleComponent, TreeGridExternalExcelStyleFilteringComponent, TreeGridExternalAdvancedFilteringComponent, From e7be2c16b9560245db5b4c7c59bab4f1c4927019 Mon Sep 17 00:00:00 2001 From: Georgi Anastasov Date: Tue, 26 Nov 2024 21:05:03 +0200 Subject: [PATCH 04/11] fix(summaries): remove empty line --- .../tree-grid-disable-summaries.component.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/src/app/tree-grid/tree-grid-disable-summaries/tree-grid-disable-summaries.component.scss b/src/app/tree-grid/tree-grid-disable-summaries/tree-grid-disable-summaries.component.scss index b52425340..26e653676 100644 --- a/src/app/tree-grid/tree-grid-disable-summaries/tree-grid-disable-summaries.component.scss +++ b/src/app/tree-grid/tree-grid-disable-summaries/tree-grid-disable-summaries.component.scss @@ -10,4 +10,3 @@ .action__buttons > button { margin-right: 16px; } - From 22ebdd49d208d162cfacfea5c5ceb945c9ceb6ba Mon Sep 17 00:00:00 2001 From: Georgi Anastasov Date: Tue, 26 Nov 2024 21:08:16 +0200 Subject: [PATCH 05/11] fix(summaries): add prevent scroll directive --- .../grid-disable-summaries/grid-disable-summaries.component.html | 1 + .../tree-grid-disable-summaries.component.html | 1 + 2 files changed, 2 insertions(+) diff --git a/src/app/grid/grid-disable-summaries/grid-disable-summaries.component.html b/src/app/grid/grid-disable-summaries/grid-disable-summaries.component.html index fe564b62a..2286da7c6 100644 --- a/src/app/grid/grid-disable-summaries/grid-disable-summaries.component.html +++ b/src/app/grid/grid-disable-summaries/grid-disable-summaries.component.html @@ -1,5 +1,6 @@
Date: Tue, 26 Nov 2024 22:42:40 +0200 Subject: [PATCH 06/11] feat(summaries): add disabled summaries hierarchical grid sample --- ...ical-grid-disable-summaries.component.html | 103 ++++++++++++++++++ ...ical-grid-disable-summaries.component.scss | 21 ++++ ...chical-grid-disable-summaries.component.ts | 87 +++++++++++++++ .../hierarchical-grid-routes-data.ts | 1 + .../hierarchical-grid-routing.module.ts | 6 + .../hierarchical-grid.module.ts | 2 + 6 files changed, 220 insertions(+) create mode 100644 src/app/hierarchical-grid/hierarchical-grid-disable-summaries/hierarchical-grid-disable-summaries.component.html create mode 100644 src/app/hierarchical-grid/hierarchical-grid-disable-summaries/hierarchical-grid-disable-summaries.component.scss create mode 100644 src/app/hierarchical-grid/hierarchical-grid-disable-summaries/hierarchical-grid-disable-summaries.component.ts diff --git a/src/app/hierarchical-grid/hierarchical-grid-disable-summaries/hierarchical-grid-disable-summaries.component.html b/src/app/hierarchical-grid/hierarchical-grid-disable-summaries/hierarchical-grid-disable-summaries.component.html new file mode 100644 index 000000000..59510a085 --- /dev/null +++ b/src/app/hierarchical-grid/hierarchical-grid-disable-summaries/hierarchical-grid-disable-summaries.component.html @@ -0,0 +1,103 @@ +
+ + + + +
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + +
+
diff --git a/src/app/hierarchical-grid/hierarchical-grid-disable-summaries/hierarchical-grid-disable-summaries.component.scss b/src/app/hierarchical-grid/hierarchical-grid-disable-summaries/hierarchical-grid-disable-summaries.component.scss new file mode 100644 index 000000000..514dcd3ee --- /dev/null +++ b/src/app/hierarchical-grid/hierarchical-grid-disable-summaries/hierarchical-grid-disable-summaries.component.scss @@ -0,0 +1,21 @@ +.grid__wrapper { + margin: 0 auto; + padding: 16px; +} + +.photo { + vertical-align: middle; + max-height: 62px; +} + +.cell__inner_2 { + margin: 1px +} + +.action__buttons { + padding-top: 16px; +} + +.action__buttons > button { + margin-right: 16px; +} diff --git a/src/app/hierarchical-grid/hierarchical-grid-disable-summaries/hierarchical-grid-disable-summaries.component.ts b/src/app/hierarchical-grid/hierarchical-grid-disable-summaries/hierarchical-grid-disable-summaries.component.ts new file mode 100644 index 000000000..1fdcc19d0 --- /dev/null +++ b/src/app/hierarchical-grid/hierarchical-grid-disable-summaries/hierarchical-grid-disable-summaries.component.ts @@ -0,0 +1,87 @@ +import { Component, ViewChild, OnInit } from "@angular/core"; +import { + IgxButtonDirective, + IgxCellTemplateDirective, + IgxColumnComponent, + IgxHierarchicalGridComponent, + IgxNumberSummaryOperand, + IgxRowIslandComponent, + IgxSummaryResult +} from "igniteui-angular"; +import { SINGERS } from "../../data/singersData"; +import { IgxPreventDocumentScrollDirective } from "../../directives/prevent-scroll.directive"; + +class GrammySummary { + 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: "app-hierarchical-grid-summary", + styleUrls: ["./hierarchical-grid-disable-summaries.component.scss"], + templateUrl: "hierarchical-grid-disable-summaries.component.html", + imports: [ + IgxHierarchicalGridComponent, + IgxPreventDocumentScrollDirective, + IgxColumnComponent, + IgxCellTemplateDirective, + IgxRowIslandComponent, + IgxButtonDirective + ], +}) +export class HierarchicalGridDisableSummariesComponent implements OnInit { + @ViewChild("hierarchicalGrid", { static: true }) + private hierarchicalGrid: IgxHierarchicalGridComponent; + + public data; + + public grammySummary = GrammySummary; + + constructor() {} + + public ngOnInit(): void { + this.data = SINGERS; + } + + public disableDefaultSummaries() { + this.hierarchicalGrid.getColumnByName("GrammyNominations").disabledSummaries = ["min", "max"]; + } + + public disableCustomSummaries() { + this.hierarchicalGrid.getColumnByName("Photo").disabledSummaries = ["nominatedSingers", "nominations"]; + } + + public formatter = (a) => a; +} diff --git a/src/app/hierarchical-grid/hierarchical-grid-routes-data.ts b/src/app/hierarchical-grid/hierarchical-grid-routes-data.ts index dd72e7c41..609041d67 100644 --- a/src/app/hierarchical-grid/hierarchical-grid-routes-data.ts +++ b/src/app/hierarchical-grid/hierarchical-grid-routes-data.ts @@ -46,6 +46,7 @@ export const hierarchicalGridRoutesData = { 'hierarchical-grid-toolbar-custom': { displayName: 'Hierarchical Grid Toolbar Custom Content', parentName: 'Hierarchical Grid' }, 'hierarchical-grid-lod': { displayName: 'Hierarchical Grid Load on Demand', parentName: 'Hierarchical Grid' }, 'hierarchical-grid-custom-kb-navigation': { displayName: 'Hierarchical Grid Custom Keyboard Navigation', parentName: 'Hierarchical Grid' }, + 'hierarchical-grid-disable-summaries': { displayName: 'Hierarchical Grid Disable Summaries', parentName: 'Hierarchical Grid' }, 'hierarchical-grid-paging-style': { displayName: 'HGrid Paging Style', parentName: 'Hierarchical Grid' }, 'hierarchical-grid-column-hiding-style': { displayName: 'HGrid Column Hiding Style', parentName: 'Hierarchical Grid' }, 'hierarchical-grid-multi-column': { displayName: 'Hierarchical Grid Multi Column Headers', parentName: 'Hierarchical Grid' }, diff --git a/src/app/hierarchical-grid/hierarchical-grid-routing.module.ts b/src/app/hierarchical-grid/hierarchical-grid-routing.module.ts index 89251060e..2f6156ab2 100644 --- a/src/app/hierarchical-grid/hierarchical-grid-routing.module.ts +++ b/src/app/hierarchical-grid/hierarchical-grid-routing.module.ts @@ -23,6 +23,7 @@ import { HGridConditionalRowSelectorsComponent } from './hierarchical-grid-conditional-row-selectors/hierarchical-grid-conditional-row-selectors.component'; import { HGridCustomKBNavigationComponent } from './hierarchical-grid-custom-kb-navigation/hierarchical-grid-custom-kb-navigation-sample.component'; +import { HierarchicalGridDisableSummariesComponent } from './hierarchical-grid-disable-summaries/hierarchical-grid-disable-summaries.component'; import { HGridDisplayDensitySampleComponent } from './hierarchical-grid-display-density/hierarchical-grid-density.component'; import { HGridEditingEventsComponent } from './hierarchical-grid-editing-events/hierarchical-grid-editing-events.component'; import { HGridEditingStyleComponent } from './hierarchical-grid-editing-style/hierarchical-grid-editing-style.component'; @@ -406,6 +407,11 @@ export const hierarchicalGridRoutes: Routes = [ data: hierarchicalGridRoutesData['hierarchical-grid-custom-kb-navigation'], path: 'hierarchical-grid-custom-kb-navigation' }, + { + component: HierarchicalGridDisableSummariesComponent, + data: hierarchicalGridRoutesData['hierarchical-grid-disable-summaries'], + path: 'hierarchical-grid-disable-summaries' + }, { component: HGridPagingStyleSampleComponent, // tslint:disable-next-line:no-string-literal diff --git a/src/app/hierarchical-grid/hierarchical-grid.module.ts b/src/app/hierarchical-grid/hierarchical-grid.module.ts index 7f1843b2a..563230261 100644 --- a/src/app/hierarchical-grid/hierarchical-grid.module.ts +++ b/src/app/hierarchical-grid/hierarchical-grid.module.ts @@ -30,6 +30,7 @@ import { HGridPinningSampleComponent } from './hierarchical-grid-column-pinning/ import { HGridToolbarPinningComponent } from './hierarchical-grid-column-pinning/hierarchical-grid-toolbar-pinning.component'; import { HGridConditionalRowSelectorsComponent } from './hierarchical-grid-conditional-row-selectors/hierarchical-grid-conditional-row-selectors.component'; import { HGridCustomKBNavigationComponent } from './hierarchical-grid-custom-kb-navigation/hierarchical-grid-custom-kb-navigation-sample.component'; +import { HierarchicalGridDisableSummariesComponent } from './hierarchical-grid-disable-summaries/hierarchical-grid-disable-summaries.component'; import { HGridDisplayDensitySampleComponent } from './hierarchical-grid-display-density/hierarchical-grid-density.component'; import { HGridEditingEventsComponent } from './hierarchical-grid-editing-events/hierarchical-grid-editing-events.component'; import { HGridEditingStyleComponent } from './hierarchical-grid-editing-style/hierarchical-grid-editing-style.component'; @@ -180,6 +181,7 @@ import { HGridSummaryExportComponent } from './hgrid-summary-export/hgrid-summar HGridRowDragBaseComponent, HGridMultiRowDragComponent, HGridCustomKBNavigationComponent, + HierarchicalGridDisableSummariesComponent, HGridRowReorderComponent, HGridResizeLineStylingComponent, HierarchicalGridColumnHidingToolbarStyleComponent, From 70bbcc0f834a92071081c2f150cd3f339b61b7e0 Mon Sep 17 00:00:00 2001 From: Georgi Anastasov Date: Tue, 26 Nov 2024 22:58:32 +0200 Subject: [PATCH 07/11] fix(summaries): remove unnecessary comma --- .../hierarchical-grid-disable-summaries.component.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/hierarchical-grid/hierarchical-grid-disable-summaries/hierarchical-grid-disable-summaries.component.ts b/src/app/hierarchical-grid/hierarchical-grid-disable-summaries/hierarchical-grid-disable-summaries.component.ts index 1fdcc19d0..514ad7bfa 100644 --- a/src/app/hierarchical-grid/hierarchical-grid-disable-summaries/hierarchical-grid-disable-summaries.component.ts +++ b/src/app/hierarchical-grid/hierarchical-grid-disable-summaries/hierarchical-grid-disable-summaries.component.ts @@ -59,7 +59,7 @@ class GrammySummary { IgxCellTemplateDirective, IgxRowIslandComponent, IgxButtonDirective - ], + ] }) export class HierarchicalGridDisableSummariesComponent implements OnInit { @ViewChild("hierarchicalGrid", { static: true }) From 79aead22e30ffbf1be0e4ca1825e71923b4c953f Mon Sep 17 00:00:00 2001 From: Georgi Anastasov Date: Wed, 27 Nov 2024 07:57:27 +0200 Subject: [PATCH 08/11] fix(summaries): resolve wrong paths --- src/app/grid/grids-routing.module.ts | 4 ++-- src/app/tree-grid/tree-grid-routing.module.ts | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/app/grid/grids-routing.module.ts b/src/app/grid/grids-routing.module.ts index 056b6b8cf..fa63ea4a1 100644 --- a/src/app/grid/grids-routing.module.ts +++ b/src/app/grid/grids-routing.module.ts @@ -588,8 +588,8 @@ export const gridsRoutes: Routes = [ }, { component: GridDisableSummariesComponent, - data: gridsRoutesData['grid-disabled-summaries'], - path: 'grid-disabled-summaries' + data: gridsRoutesData['grid-disable-summaries'], + path: 'grid-disable-summaries' }, { component: GridMultiRowLayoutStylingComponent, diff --git a/src/app/tree-grid/tree-grid-routing.module.ts b/src/app/tree-grid/tree-grid-routing.module.ts index 69b4ad4e9..9687097c3 100644 --- a/src/app/tree-grid/tree-grid-routing.module.ts +++ b/src/app/tree-grid/tree-grid-routing.module.ts @@ -460,8 +460,8 @@ export const treeGridRoutes: Routes = [ }, { component: TreeGridDisableSummariesComponent, - data: treeGridRoutesData['treegrid-disabled-summaries'], - path: 'treegrid-disabled-summaries' + data: treeGridRoutesData['treegrid-disable-summaries'], + path: 'treegrid-disable-summaries' }, { component: TreeGridStyleComponent, From 7c91784b2c0c4d95d95aed71c5d1371131b9518e Mon Sep 17 00:00:00 2001 From: Georgi Anastasov Date: Wed, 27 Nov 2024 08:31:15 +0200 Subject: [PATCH 09/11] feat(summaries): add new disable summaries sample for the grid --- .../grid-disable-summaries.component.html | 36 ++++-- .../grid-disable-summaries.component.scss | 8 +- .../grid-disable-summaries.component.ts | 111 ++++++++++++++++-- 3 files changed, 131 insertions(+), 24 deletions(-) diff --git a/src/app/grid/grid-disable-summaries/grid-disable-summaries.component.html b/src/app/grid/grid-disable-summaries/grid-disable-summaries.component.html index 2286da7c6..dab170ee8 100644 --- a/src/app/grid/grid-disable-summaries/grid-disable-summaries.component.html +++ b/src/app/grid/grid-disable-summaries/grid-disable-summaries.component.html @@ -1,4 +1,22 @@
+
+ +
+ +
+ +
+ - - + - + -
- - -
diff --git a/src/app/grid/grid-disable-summaries/grid-disable-summaries.component.scss b/src/app/grid/grid-disable-summaries/grid-disable-summaries.component.scss index 26e653676..a5760b1b7 100644 --- a/src/app/grid/grid-disable-summaries/grid-disable-summaries.component.scss +++ b/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; } diff --git a/src/app/grid/grid-disable-summaries/grid-disable-summaries.component.ts b/src/app/grid/grid-disable-summaries/grid-disable-summaries.component.ts index 2ccce9f8a..5e08ae512 100644 --- a/src/app/grid/grid-disable-summaries/grid-disable-summaries.component.ts +++ b/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 + ); } } From 9956cd41b029cf49607286fcd07c6324172aed73 Mon Sep 17 00:00:00 2001 From: Georgi Anastasov Date: Wed, 27 Nov 2024 09:00:24 +0200 Subject: [PATCH 10/11] feat(summaries): add new disable summaries sample for the tree grid --- ...tree-grid-disable-summaries.component.html | 26 ++-- ...tree-grid-disable-summaries.component.scss | 8 +- .../tree-grid-disable-summaries.component.ts | 118 ++++++++++++++++-- 3 files changed, 130 insertions(+), 22 deletions(-) diff --git a/src/app/tree-grid/tree-grid-disable-summaries/tree-grid-disable-summaries.component.html b/src/app/tree-grid/tree-grid-disable-summaries/tree-grid-disable-summaries.component.html index 5b5a5dfd5..aead2b969 100644 --- a/src/app/tree-grid/tree-grid-disable-summaries/tree-grid-disable-summaries.component.html +++ b/src/app/tree-grid/tree-grid-disable-summaries/tree-grid-disable-summaries.component.html @@ -1,4 +1,22 @@
+
+ +
+ +
+ +
+ -
- - -
diff --git a/src/app/tree-grid/tree-grid-disable-summaries/tree-grid-disable-summaries.component.scss b/src/app/tree-grid/tree-grid-disable-summaries/tree-grid-disable-summaries.component.scss index 26e653676..a5760b1b7 100644 --- a/src/app/tree-grid/tree-grid-disable-summaries/tree-grid-disable-summaries.component.scss +++ b/src/app/tree-grid/tree-grid-disable-summaries/tree-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; } diff --git a/src/app/tree-grid/tree-grid-disable-summaries/tree-grid-disable-summaries.component.ts b/src/app/tree-grid/tree-grid-disable-summaries/tree-grid-disable-summaries.component.ts index c8b69f6d7..495723763 100644 --- a/src/app/tree-grid/tree-grid-disable-summaries/tree-grid-disable-summaries.component.ts +++ b/src/app/tree-grid/tree-grid-disable-summaries/tree-grid-disable-summaries.component.ts @@ -1,9 +1,14 @@ -import { Component, OnInit, ViewChild } from "@angular/core"; +import { + Component, + ViewChild, + OnInit, + AfterViewInit +} from "@angular/core"; import { IgxTreeGridComponent, IgxColumnComponent, - IgxButtonDirective, - IgxSummaryResult + IgxSummaryResult, + IgxButtonGroupComponent } from "igniteui-angular"; import { ORDERS_DATA } from "../data/orders"; import { IgxPreventDocumentScrollDirective } from "../../directives/prevent-scroll.directive"; @@ -15,6 +20,7 @@ class UnitsSummary { fieldName = "" ): IgxSummaryResult[] { const result = []; + result.push({ key: "totalDelivered", label: "Total Units Delivered", @@ -61,14 +67,16 @@ class UnitsSummary { IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, - IgxButtonDirective + IgxButtonGroupComponent ] }) -export class TreeGridDisableSummariesComponent implements OnInit { +export class TreeGridDisableSummariesComponent implements OnInit, AfterViewInit { @ViewChild("treegrid1", { read: IgxTreeGridComponent, static: true }) public treeGrid1: IgxTreeGridComponent; - public data; + public data: any[]; + public defaultSummaries: any[]; + public customSummaries: any[]; public unitsSummary = UnitsSummary; @@ -78,11 +86,101 @@ export class TreeGridDisableSummariesComponent implements OnInit { this.data = ORDERS_DATA; } - public disableDefaultSummaries() { - this.treeGrid1.getColumnByName("UnitPrice").disabledSummaries = ["min", "max"]; + public ngAfterViewInit(): void { + this.defaultSummaries = [ + { + label: 'Count', + selected: this.treeGrid1.getColumnByName('UnitPrice').disabledSummaries.includes('count'), + togglable: true, + value: 'count' + }, + { + label: 'Min', + selected: this.treeGrid1.getColumnByName('UnitPrice').disabledSummaries.includes('min'), + togglable: true, + value: 'min' + }, + { + label: 'Max', + selected: this.treeGrid1.getColumnByName('UnitPrice').disabledSummaries.includes('max'), + togglable: true, + value: 'max' + }, + { + label: 'Sum', + selected: this.treeGrid1.getColumnByName('UnitPrice').disabledSummaries.includes('sum'), + togglable: true, + value: 'sum' + }, + { + label: 'Average', + selected: this.treeGrid1.getColumnByName('UnitPrice').disabledSummaries.includes('average'), + togglable: true, + value: 'average' + } + ]; + + this.customSummaries = [ + { + label: 'Total Units Delivered', + selected: this.treeGrid1.getColumnByName('Units').disabledSummaries.includes('totalDelivered'), + togglable: true, + value: 'totalDelivered' + }, + { + label: 'Total Units Not Delivered', + selected: this.treeGrid1.getColumnByName('Units').disabledSummaries.includes('totalNotDelivered'), + togglable: true, + value: 'totalNotDelivered' + }, + { + label: 'Average Units per Order', + selected: this.treeGrid1.getColumnByName('Units').disabledSummaries.includes('averageUnits'), + togglable: true, + value: 'averageUnits' + }, + { + label: 'Highest Units', + selected: this.treeGrid1.getColumnByName('Units').disabledSummaries.includes('maxUnits'), + togglable: true, + value: 'maxUnits' + } + ]; } - public disableCustomSummaries() { - this.treeGrid1.getColumnByName("Units").disabledSummaries = ["averageUnits", "maxUnits"]; + public disableDefaultSummary(event) { + const selectedValue = this.defaultSummaries[event.index].value; + const column = this.treeGrid1.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.treeGrid1.getColumnByName('UnitPrice'); + + column.disabledSummaries = column.disabledSummaries.filter( + (summary) => summary !== selectedValue + ); + } + + public disableCustomSummary(event) { + const selectedValue = this.customSummaries[event.index].value; + const column = this.treeGrid1.getColumnByName('Units'); + + if (!column.disabledSummaries.includes(selectedValue)) { + column.disabledSummaries = [...column.disabledSummaries, selectedValue]; + } + } + + public enableCustomSummary(event) { + const selectedValue = this.customSummaries[event.index].value; + const column = this.treeGrid1.getColumnByName('Units'); + + column.disabledSummaries = column.disabledSummaries.filter( + (summary) => summary !== selectedValue + ); } } From 53d76b03c221a057ce0040dab71cb05dbe185c3e Mon Sep 17 00:00:00 2001 From: Georgi Anastasov Date: Wed, 27 Nov 2024 09:22:06 +0200 Subject: [PATCH 11/11] feat(summaries): add new disable summaries sample for the hierarchical grid --- ...ical-grid-disable-summaries.component.html | 28 ++-- ...ical-grid-disable-summaries.component.scss | 8 +- ...chical-grid-disable-summaries.component.ts | 128 ++++++++++++++++-- 3 files changed, 138 insertions(+), 26 deletions(-) diff --git a/src/app/hierarchical-grid/hierarchical-grid-disable-summaries/hierarchical-grid-disable-summaries.component.html b/src/app/hierarchical-grid/hierarchical-grid-disable-summaries/hierarchical-grid-disable-summaries.component.html index 59510a085..f04bf53d3 100644 --- a/src/app/hierarchical-grid/hierarchical-grid-disable-summaries/hierarchical-grid-disable-summaries.component.html +++ b/src/app/hierarchical-grid/hierarchical-grid-disable-summaries/hierarchical-grid-disable-summaries.component.html @@ -1,7 +1,25 @@
+
+ +
+ +
+ +
+ -
- - -
diff --git a/src/app/hierarchical-grid/hierarchical-grid-disable-summaries/hierarchical-grid-disable-summaries.component.scss b/src/app/hierarchical-grid/hierarchical-grid-disable-summaries/hierarchical-grid-disable-summaries.component.scss index 514dcd3ee..4c7e09df7 100644 --- a/src/app/hierarchical-grid/hierarchical-grid-disable-summaries/hierarchical-grid-disable-summaries.component.scss +++ b/src/app/hierarchical-grid/hierarchical-grid-disable-summaries/hierarchical-grid-disable-summaries.component.scss @@ -12,10 +12,10 @@ margin: 1px } -.action__buttons { - padding-top: 16px; +.summary-chooser { + margin-bottom: 16px; } -.action__buttons > button { - margin-right: 16px; +igx-buttongroup{ + display: block; } diff --git a/src/app/hierarchical-grid/hierarchical-grid-disable-summaries/hierarchical-grid-disable-summaries.component.ts b/src/app/hierarchical-grid/hierarchical-grid-disable-summaries/hierarchical-grid-disable-summaries.component.ts index 514ad7bfa..bc89a72df 100644 --- a/src/app/hierarchical-grid/hierarchical-grid-disable-summaries/hierarchical-grid-disable-summaries.component.ts +++ b/src/app/hierarchical-grid/hierarchical-grid-disable-summaries/hierarchical-grid-disable-summaries.component.ts @@ -1,12 +1,17 @@ -import { Component, ViewChild, OnInit } from "@angular/core"; import { - IgxButtonDirective, + Component, + ViewChild, + OnInit, + AfterViewInit +} from "@angular/core"; +import { IgxCellTemplateDirective, IgxColumnComponent, IgxHierarchicalGridComponent, IgxNumberSummaryOperand, IgxRowIslandComponent, - IgxSummaryResult + IgxSummaryResult, + IgxButtonGroupComponent } from "igniteui-angular"; import { SINGERS } from "../../data/singersData"; import { IgxPreventDocumentScrollDirective } from "../../directives/prevent-scroll.directive"; @@ -18,18 +23,21 @@ class GrammySummary { 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", @@ -37,6 +45,7 @@ class GrammySummary { allData.map((r) => r["GrammyNominations"]) ) }); + result.push({ key: "awards", label: "Total Awards", @@ -44,12 +53,13 @@ class GrammySummary { allData.map((r) => r["GrammyAwards"]) ) }); + return result; } } @Component({ - selector: "app-hierarchical-grid-summary", + selector: "app-hierarchical-grid-summary-sample", styleUrls: ["./hierarchical-grid-disable-summaries.component.scss"], templateUrl: "hierarchical-grid-disable-summaries.component.html", imports: [ @@ -58,14 +68,16 @@ class GrammySummary { IgxColumnComponent, IgxCellTemplateDirective, IgxRowIslandComponent, - IgxButtonDirective + IgxButtonGroupComponent ] }) -export class HierarchicalGridDisableSummariesComponent implements OnInit { - @ViewChild("hierarchicalGrid", { static: true }) - private hierarchicalGrid: IgxHierarchicalGridComponent; +export class HierarchicalGridDisableSummariesComponent implements OnInit, AfterViewInit { + @ViewChild("hierarchicalGrid1", { static: true }) + private hierarchicalGrid1: IgxHierarchicalGridComponent; - public data; + public data: any[]; + public defaultSummaries: any[]; + public customSummaries: any[]; public grammySummary = GrammySummary; @@ -75,12 +87,102 @@ export class HierarchicalGridDisableSummariesComponent implements OnInit { this.data = SINGERS; } - public disableDefaultSummaries() { - this.hierarchicalGrid.getColumnByName("GrammyNominations").disabledSummaries = ["min", "max"]; + public ngAfterViewInit(): void { + this.defaultSummaries = [ + { + label: 'Count', + selected: this.hierarchicalGrid1.getColumnByName('GrammyNominations').disabledSummaries.includes('count'), + togglable: true, + value: 'count' + }, + { + label: 'Min', + selected: this.hierarchicalGrid1.getColumnByName('GrammyNominations').disabledSummaries.includes('min'), + togglable: true, + value: 'min' + }, + { + label: 'Max', + selected: this.hierarchicalGrid1.getColumnByName('GrammyNominations').disabledSummaries.includes('max'), + togglable: true, + value: 'max' + }, + { + label: 'Sum', + selected: this.hierarchicalGrid1.getColumnByName('GrammyNominations').disabledSummaries.includes('sum'), + togglable: true, + value: 'sum' + }, + { + label: 'Average', + selected: this.hierarchicalGrid1.getColumnByName('GrammyNominations').disabledSummaries.includes('average'), + togglable: true, + value: 'average' + } + ]; + + this.customSummaries = [ + { + label: 'Nominated Singers', + selected: this.hierarchicalGrid1.getColumnByName('Photo').disabledSummaries.includes('nominatedSingers'), + togglable: true, + value: 'nominatedSingers' + }, + { + label: 'Singers with Awards', + selected: this.hierarchicalGrid1.getColumnByName('Photo').disabledSummaries.includes('singersWithAwards'), + togglable: true, + value: 'singersWithAwards' + }, + { + label: 'Total Nominations', + selected: this.hierarchicalGrid1.getColumnByName('Photo').disabledSummaries.includes('nominations'), + togglable: true, + value: 'nominations' + }, + { + label: 'Total Awards', + selected: this.hierarchicalGrid1.getColumnByName('Photo').disabledSummaries.includes('awards'), + togglable: true, + value: 'awards' + } + ]; } - public disableCustomSummaries() { - this.hierarchicalGrid.getColumnByName("Photo").disabledSummaries = ["nominatedSingers", "nominations"]; + public disableDefaultSummary(event) { + const selectedValue = this.defaultSummaries[event.index].value; + const column = this.hierarchicalGrid1.getColumnByName('GrammyNominations'); + + if (!column.disabledSummaries.includes(selectedValue)) { + column.disabledSummaries = [...column.disabledSummaries, selectedValue]; + } + } + + public enableDefaultSummary(event) { + const selectedValue = this.defaultSummaries[event.index].value; + const column = this.hierarchicalGrid1.getColumnByName('GrammyNominations'); + + column.disabledSummaries = column.disabledSummaries.filter( + (summary) => summary !== selectedValue + ); + } + + public disableCustomSummary(event) { + const selectedValue = this.customSummaries[event.index].value; + const column = this.hierarchicalGrid1.getColumnByName('Photo'); + + if (!column.disabledSummaries.includes(selectedValue)) { + column.disabledSummaries = [...column.disabledSummaries, selectedValue]; + } + } + + public enableCustomSummary(event) { + const selectedValue = this.customSummaries[event.index].value; + const column = this.hierarchicalGrid1.getColumnByName('Photo'); + + column.disabledSummaries = column.disabledSummaries.filter( + (summary) => summary !== selectedValue + ); } public formatter = (a) => a;