Skip to content

Commit 2fc5c83

Browse files
georgianastasovgeorgianastasov
committed
feat(summaries): add disabled summaries tree grid sample
1 parent 5f26984 commit 2fc5c83

6 files changed

Lines changed: 172 additions & 0 deletions

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

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
<div class="grid__wrapper">
2+
<igx-tree-grid
3+
#treegrid1
4+
[data]="data"
5+
[autoGenerate]="false"
6+
height="700px"
7+
width="100%"
8+
primaryKey="ID"
9+
foreignKey="ParentID"
10+
>
11+
<igx-column field="ID" header="Order ID"> </igx-column>
12+
<igx-column field="Name" header="Order Product" [hasSummary]="true">
13+
</igx-column>
14+
<igx-column
15+
field="Units"
16+
header="Units"
17+
dataType="number"
18+
[hasSummary]="true"
19+
[summaries]="unitsSummary"
20+
[disabledSummaries]="['totalDelivered', 'totalNotDelivered']"
21+
>
22+
</igx-column>
23+
<igx-column
24+
field="UnitPrice"
25+
header="Unit Price"
26+
dataType="number"
27+
[hasSummary]="true"
28+
[disabledSummaries]="['count', 'sum', 'average']"
29+
>
30+
</igx-column>
31+
<igx-column
32+
field="Price"
33+
header="Price"
34+
dataType="number"
35+
[hasSummary]="true"
36+
[disabledSummaries]="['count', 'sum', 'average']"
37+
>
38+
</igx-column>
39+
<igx-column
40+
field="Delivered"
41+
header="Delivered"
42+
[hasSummary]="true"
43+
[dataType]="'boolean'"
44+
>
45+
</igx-column>
46+
<igx-column
47+
field="OrderDate"
48+
header="Order Date"
49+
[dataType]="'date'"
50+
[hasSummary]="true"
51+
>
52+
</igx-column>
53+
</igx-tree-grid>
54+
<div class="action__buttons">
55+
<button igxButton="contained" (click)="disableDefaultSummaries()">
56+
Disable Min and Max summaries for the Unit Price column
57+
</button>
58+
<button igxButton="contained" (click)="disableCustomSummaries()">
59+
Disable Average Units per Order and Highest Units summaries
60+
</button>
61+
</div>
62+
</div>

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

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
.grid__wrapper {
2+
margin: 0 auto;
3+
padding: 16px;
4+
}
5+
6+
.action__buttons {
7+
padding-top: 16px;
8+
}
9+
10+
.action__buttons > button {
11+
margin-right: 16px;
12+
}
13+

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

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
import { Component, OnInit, ViewChild } from "@angular/core";
2+
import {
3+
IgxTreeGridComponent,
4+
IgxColumnComponent,
5+
IgxButtonDirective,
6+
IgxSummaryResult
7+
} from "igniteui-angular";
8+
import { ORDERS_DATA } from "../data/orders";
9+
import { IgxPreventDocumentScrollDirective } from "../../directives/prevent-scroll.directive";
10+
11+
class UnitsSummary {
12+
public operate(
13+
data?: any[],
14+
allData = [],
15+
fieldName = ""
16+
): IgxSummaryResult[] {
17+
const result = [];
18+
result.push({
19+
key: "totalDelivered",
20+
label: "Total Units Delivered",
21+
summaryResult: allData
22+
.filter((rec) => rec["Delivered"])
23+
.reduce((sum, rec) => sum + rec[fieldName], 0)
24+
});
25+
26+
result.push({
27+
key: "totalNotDelivered",
28+
label: "Total Units Not Delivered",
29+
summaryResult: allData
30+
.filter((rec) => !rec["Delivered"])
31+
.reduce((sum, rec) => sum + rec[fieldName], 0)
32+
});
33+
34+
result.push({
35+
key: "averageUnits",
36+
label: "Average Units per Order",
37+
summaryResult: allData.length
38+
? allData.reduce((sum, rec) => sum + rec[fieldName], 0) /
39+
allData.length
40+
: 0
41+
});
42+
43+
result.push({
44+
key: "maxUnits",
45+
label: "Highest Units",
46+
summaryResult: allData.reduce(
47+
(max, rec) => Math.max(max, rec[fieldName]),
48+
Number.MIN_VALUE
49+
)
50+
});
51+
52+
return result;
53+
}
54+
}
55+
56+
@Component({
57+
selector: "app-tree-grid-summary-sample",
58+
styleUrls: ["./tree-grid-disable-summaries.component.scss"],
59+
templateUrl: "./tree-grid-disable-summaries.component.html",
60+
imports: [
61+
IgxTreeGridComponent,
62+
IgxPreventDocumentScrollDirective,
63+
IgxColumnComponent,
64+
IgxButtonDirective
65+
]
66+
})
67+
export class TreeGridDisableSummariesComponent implements OnInit {
68+
@ViewChild("treegrid1", { read: IgxTreeGridComponent, static: true })
69+
public treeGrid1: IgxTreeGridComponent;
70+
71+
public data;
72+
73+
public unitsSummary = UnitsSummary;
74+
75+
constructor() {}
76+
77+
public ngOnInit(): void {
78+
this.data = ORDERS_DATA;
79+
}
80+
81+
public disableDefaultSummaries() {
82+
this.treeGrid1.getColumnByName("UnitPrice").disabledSummaries = ["min", "max"];
83+
}
84+
85+
public disableCustomSummaries() {
86+
this.treeGrid1.getColumnByName("Units").disabledSummaries = ["averageUnits", "maxUnits"];
87+
}
88+
}

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -97,6 +97,7 @@ export const treeGridRoutesData = {
9797
'treegrid-advanced-filtering-style': { displayName: 'TreeGrid Advanced Filtering Style', parentName: 'TreeGrid' },
9898
'treegrid-cell-selection': { displayName: 'TreeGrid Cell Selection', parentName: 'TreeGrid' },
9999
'treegrid-conditional-row-selectors': { displayName: 'TreeGrid Conditional Row Selectors', parentName: 'TreeGrid' },
100+
'treegrid-disable-summaries': { displayName: 'TreeGrid Disable Summaries', parentName: 'TreeGrid' },
100101
'treegrid-style': { displayName: 'TreeGrid Style', parentName: 'TreeGrid' },
101102
'tree-grid-cell-cellStyling': { displayName: 'TreeGrid Conditional Cell Styling', parentName: 'TreeGrid' },
102103
'tree-grid-collapsible-groups': { displayName: 'TreeGrid Collapsible Column Groups', parentName: 'TreeGrid' },

‎src/app/tree-grid/tree-grid-routing.module.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@ import { TreeGridColumnResizingSampleComponent } from './tree-grid-column-resizi
2525
import { TreeGridConditionalCellStyle2Component } from './tree-grid-conditional-cell-style-2/tree-grid-conditional-cell-style-2.component';
2626
import { TreeGridConditionalCellStyleComponent } from './tree-grid-conditional-cell-style-sample/tree-grid-conditional-cell-style-sample.component';
2727
import { TreeGridConditionalRowSelectorsSampleComponent } from './tree-grid-conditional-row-selectors/tree-grid-conditional-row-selectors.component';
28+
import { TreeGridDisableSummariesComponent } from './tree-grid-disable-summaries/tree-grid-disable-summaries.component';
2829
import { TreeGridDisplaydensitySampleComponent } from './tree-grid-displaydensity-sample/tree-grid-displaydensity-sample.component';
2930
import { TreeGridEditingEventsComponent } from './tree-grid-editing-events/tree-grid-editing-events.component';
3031
import { TreeGridEditingSampleComponent } from './tree-grid-editing-sample/tree-grid-editing-sample.component';
@@ -457,6 +458,11 @@ export const treeGridRoutes: Routes = [
457458
data: treeGridRoutesData['treegrid-conditional-row-selectors'],
458459
path: 'treegrid-conditional-row-selectors'
459460
},
461+
{
462+
component: TreeGridDisableSummariesComponent,
463+
data: treeGridRoutesData['treegrid-disabled-summaries'],
464+
path: 'treegrid-disabled-summaries'
465+
},
460466
{
461467
component: TreeGridStyleComponent,
462468
data: treeGridRoutesData['treegrid-style'],

‎src/app/tree-grid/tree-grid.module.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -60,6 +60,7 @@ import { TreeGridColumnResizingSampleComponent } from './tree-grid-column-resizi
6060
import { TreeGridConditionalCellStyle2Component } from './tree-grid-conditional-cell-style-2/tree-grid-conditional-cell-style-2.component';
6161
import { TreeGridConditionalCellStyleComponent } from './tree-grid-conditional-cell-style-sample/tree-grid-conditional-cell-style-sample.component';
6262
import { TreeGridConditionalRowSelectorsSampleComponent } from './tree-grid-conditional-row-selectors/tree-grid-conditional-row-selectors.component';
63+
import { TreeGridDisableSummariesComponent } from './tree-grid-disable-summaries/tree-grid-disable-summaries.component';
6364
import { TreeGridDisplaydensitySampleComponent } from './tree-grid-displaydensity-sample/tree-grid-displaydensity-sample.component';
6465
import { TreeGridEditingEventsComponent } from './tree-grid-editing-events/tree-grid-editing-events.component';
6566
import { TreeGridEditingSampleComponent } from './tree-grid-editing-sample/tree-grid-editing-sample.component';
@@ -239,6 +240,7 @@ import { TreeGridSummaryExportComponent } from './tree-grid-summary-export/tree-
239240
TreeGridAdvancedFilteringStyleComponent,
240241
TreeGridExcelStyleFilteringLoadOnDemandComponent,
241242
TreeGridConditionalRowSelectorsSampleComponent,
243+
TreeGridDisableSummariesComponent,
242244
TreeGridStyleComponent,
243245
TreeGridExternalExcelStyleFilteringComponent,
244246
TreeGridExternalAdvancedFilteringComponent,

0 commit comments

Comments
 (0)