Skip to content

Commit 92f46a2

Browse files
georgianastasovgeorgianastasov
committed
feat(summaries): add disabled summaries hierarchical grid sample
1 parent 22ebdd4 commit 92f46a2

6 files changed

Lines changed: 220 additions & 0 deletions

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

Lines changed: 103 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,103 @@
1+
<div class="grid__wrapper">
2+
<igx-hierarchical-grid
3+
[igxPreventDocumentScroll]="true"
4+
#hierarchicalGrid
5+
[data]="data"
6+
[autoGenerate]="false"
7+
[height]="'600px'"
8+
[width]="'100%'"
9+
[rowHeight]="'65px'"
10+
>
11+
<igx-column field="Artist" [hasSummary]="true"></igx-column>
12+
<igx-column
13+
field="Photo"
14+
[hasSummary]="true"
15+
[summaries]="grammySummary"
16+
[disabledSummaries]="['singersWithAwards', 'awards']"
17+
>
18+
<ng-template igxCell let-cell="cell">
19+
<div class="cell__inner_2">
20+
<img [src]="cell.value" class="photo" />
21+
</div>
22+
</ng-template>
23+
</igx-column>
24+
<igx-column
25+
field="Debut"
26+
[hasSummary]="true"
27+
[formatter]="formatter"
28+
></igx-column>
29+
<igx-column
30+
field="GrammyNominations"
31+
header="Grammy Nominations"
32+
dataType="number"
33+
[hasSummary]="true"
34+
[disabledSummaries]="['count', 'sum', 'average']"
35+
></igx-column>
36+
<igx-column
37+
field="GrammyAwards"
38+
header="Grammy Awards"
39+
dataType="number"
40+
[hasSummary]="true"
41+
[disabledSummaries]="['count', 'sum', 'average']"
42+
></igx-column>
43+
44+
<igx-row-island [height]="null" [key]="'Albums'" [autoGenerate]="false">
45+
<igx-column field="Album"></igx-column>
46+
<igx-column
47+
field="LaunchDate"
48+
header="Launch Date"
49+
[dataType]="'date'"
50+
[hasSummary]="true"
51+
></igx-column>
52+
<igx-column
53+
field="BillboardReview"
54+
header="Billboard Review"
55+
dataType="number"
56+
[hasSummary]="true"
57+
></igx-column>
58+
<igx-column
59+
field="USBillboard200"
60+
header="US Billboard 200"
61+
dataType="number"
62+
[hasSummary]="true"
63+
></igx-column>
64+
<igx-row-island
65+
[height]="null"
66+
[key]="'Songs'"
67+
[autoGenerate]="false"
68+
>
69+
<igx-column
70+
field="Number"
71+
header="No."
72+
[hasSummary]="true"
73+
></igx-column>
74+
<igx-column field="Title" [hasSummary]="true"></igx-column>
75+
<igx-column
76+
field="Released"
77+
dataType="date"
78+
[hasSummary]="true"
79+
></igx-column>
80+
<igx-column field="Genre" [hasSummary]="true"></igx-column>
81+
</igx-row-island>
82+
</igx-row-island>
83+
84+
<igx-row-island [height]="null" [key]="'Tours'" [autoGenerate]="false">
85+
<igx-column field="Tour" [hasSummary]="true"></igx-column>
86+
<igx-column
87+
field="StartedOn"
88+
header="Started on"
89+
[hasSummary]="true"
90+
></igx-column>
91+
<igx-column field="Location" [hasSummary]="true"></igx-column>
92+
<igx-column field="Headliner" [hasSummary]="true"></igx-column>
93+
</igx-row-island>
94+
</igx-hierarchical-grid>
95+
<div class="action__buttons">
96+
<button igxButton="contained" (click)="disableDefaultSummaries()">
97+
Disable Min and Max summaries for the Grammy Nominations column
98+
</button>
99+
<button igxButton="contained" (click)="disableCustomSummaries()">
100+
Disable Nominated Singers and Total Nominations summaries
101+
</button>
102+
</div>
103+
</div>

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

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
.grid__wrapper {
2+
margin: 0 auto;
3+
padding: 16px;
4+
}
5+
6+
.photo {
7+
vertical-align: middle;
8+
max-height: 62px;
9+
}
10+
11+
.cell__inner_2 {
12+
margin: 1px
13+
}
14+
15+
.action__buttons {
16+
padding-top: 16px;
17+
}
18+
19+
.action__buttons > button {
20+
margin-right: 16px;
21+
}

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

Lines changed: 87 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
import { Component, ViewChild, OnInit } from "@angular/core";
2+
import {
3+
IgxButtonDirective,
4+
IgxCellTemplateDirective,
5+
IgxColumnComponent,
6+
IgxHierarchicalGridComponent,
7+
IgxNumberSummaryOperand,
8+
IgxRowIslandComponent,
9+
IgxSummaryResult
10+
} from "igniteui-angular";
11+
import { SINGERS } from "../../data/singersData";
12+
import { IgxPreventDocumentScrollDirective } from "../../directives/prevent-scroll.directive";
13+
14+
class GrammySummary {
15+
public operate(
16+
data?: any[],
17+
allData = [],
18+
fieldName = ""
19+
): IgxSummaryResult[] {
20+
const result = [];
21+
result.push({
22+
key: "nominatedSingers",
23+
label: "Nominated Singers",
24+
summaryResult: allData.filter((rec) => rec["GrammyNominations"] > 0)
25+
.length
26+
});
27+
result.push({
28+
key: "singersWithAwards",
29+
label: "Singers with Awards",
30+
summaryResult: allData.filter((rec) => rec["GrammyAwards"] > 0)
31+
.length
32+
});
33+
result.push({
34+
key: "nominations",
35+
label: "Total Nominations",
36+
summaryResult: IgxNumberSummaryOperand.sum(
37+
allData.map((r) => r["GrammyNominations"])
38+
)
39+
});
40+
result.push({
41+
key: "awards",
42+
label: "Total Awards",
43+
summaryResult: IgxNumberSummaryOperand.sum(
44+
allData.map((r) => r["GrammyAwards"])
45+
)
46+
});
47+
return result;
48+
}
49+
}
50+
51+
@Component({
52+
selector: "app-hierarchical-grid-summary",
53+
styleUrls: ["./hierarchical-grid-disable-summaries.component.scss"],
54+
templateUrl: "hierarchical-grid-disable-summaries.component.html",
55+
imports: [
56+
IgxHierarchicalGridComponent,
57+
IgxPreventDocumentScrollDirective,
58+
IgxColumnComponent,
59+
IgxCellTemplateDirective,
60+
IgxRowIslandComponent,
61+
IgxButtonDirective
62+
],
63+
})
64+
export class HierarchicalGridDisableSummariesComponent implements OnInit {
65+
@ViewChild("hierarchicalGrid", { static: true })
66+
private hierarchicalGrid: IgxHierarchicalGridComponent;
67+
68+
public data;
69+
70+
public grammySummary = GrammySummary;
71+
72+
constructor() {}
73+
74+
public ngOnInit(): void {
75+
this.data = SINGERS;
76+
}
77+
78+
public disableDefaultSummaries() {
79+
this.hierarchicalGrid.getColumnByName("GrammyNominations").disabledSummaries = ["min", "max"];
80+
}
81+
82+
public disableCustomSummaries() {
83+
this.hierarchicalGrid.getColumnByName("Photo").disabledSummaries = ["nominatedSingers", "nominations"];
84+
}
85+
86+
public formatter = (a) => a;
87+
}

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,7 @@ export const hierarchicalGridRoutesData = {
4646
'hierarchical-grid-toolbar-custom': { displayName: 'Hierarchical Grid Toolbar Custom Content', parentName: 'Hierarchical Grid' },
4747
'hierarchical-grid-lod': { displayName: 'Hierarchical Grid Load on Demand', parentName: 'Hierarchical Grid' },
4848
'hierarchical-grid-custom-kb-navigation': { displayName: 'Hierarchical Grid Custom Keyboard Navigation', parentName: 'Hierarchical Grid' },
49+
'hierarchical-grid-disable-summaries': { displayName: 'Hierarchical Grid Disable Summaries', parentName: 'Hierarchical Grid' },
4950
'hierarchical-grid-paging-style': { displayName: 'HGrid Paging Style', parentName: 'Hierarchical Grid' },
5051
'hierarchical-grid-column-hiding-style': { displayName: 'HGrid Column Hiding Style', parentName: 'Hierarchical Grid' },
5152
'hierarchical-grid-multi-column': { displayName: 'Hierarchical Grid Multi Column Headers', parentName: 'Hierarchical Grid' },

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

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ import {
2323
HGridConditionalRowSelectorsComponent
2424
} from './hierarchical-grid-conditional-row-selectors/hierarchical-grid-conditional-row-selectors.component';
2525
import { HGridCustomKBNavigationComponent } from './hierarchical-grid-custom-kb-navigation/hierarchical-grid-custom-kb-navigation-sample.component';
26+
import { HierarchicalGridDisableSummariesComponent } from './hierarchical-grid-disable-summaries/hierarchical-grid-disable-summaries.component';
2627
import { HGridDisplayDensitySampleComponent } from './hierarchical-grid-display-density/hierarchical-grid-density.component';
2728
import { HGridEditingEventsComponent } from './hierarchical-grid-editing-events/hierarchical-grid-editing-events.component';
2829
import { HGridEditingStyleComponent } from './hierarchical-grid-editing-style/hierarchical-grid-editing-style.component';
@@ -406,6 +407,11 @@ export const hierarchicalGridRoutes: Routes = [
406407
data: hierarchicalGridRoutesData['hierarchical-grid-custom-kb-navigation'],
407408
path: 'hierarchical-grid-custom-kb-navigation'
408409
},
410+
{
411+
component: HierarchicalGridDisableSummariesComponent,
412+
data: hierarchicalGridRoutesData['hierarchical-grid-disable-summaries'],
413+
path: 'hierarchical-grid-disable-summaries'
414+
},
409415
{
410416
component: HGridPagingStyleSampleComponent,
411417
// tslint:disable-next-line:no-string-literal

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,7 @@ import { HGridPinningSampleComponent } from './hierarchical-grid-column-pinning/
3030
import { HGridToolbarPinningComponent } from './hierarchical-grid-column-pinning/hierarchical-grid-toolbar-pinning.component';
3131
import { HGridConditionalRowSelectorsComponent } from './hierarchical-grid-conditional-row-selectors/hierarchical-grid-conditional-row-selectors.component';
3232
import { HGridCustomKBNavigationComponent } from './hierarchical-grid-custom-kb-navigation/hierarchical-grid-custom-kb-navigation-sample.component';
33+
import { HierarchicalGridDisableSummariesComponent } from './hierarchical-grid-disable-summaries/hierarchical-grid-disable-summaries.component';
3334
import { HGridDisplayDensitySampleComponent } from './hierarchical-grid-display-density/hierarchical-grid-density.component';
3435
import { HGridEditingEventsComponent } from './hierarchical-grid-editing-events/hierarchical-grid-editing-events.component';
3536
import { HGridEditingStyleComponent } from './hierarchical-grid-editing-style/hierarchical-grid-editing-style.component';
@@ -180,6 +181,7 @@ import { HGridSummaryExportComponent } from './hgrid-summary-export/hgrid-summar
180181
HGridRowDragBaseComponent,
181182
HGridMultiRowDragComponent,
182183
HGridCustomKBNavigationComponent,
184+
HierarchicalGridDisableSummariesComponent,
183185
HGridRowReorderComponent,
184186
HGridResizeLineStylingComponent,
185187
HierarchicalGridColumnHidingToolbarStyleComponent,

0 commit comments

Comments
 (0)