Skip to content

Commit 854498f

Browse files
georgianastasovgeorgianastasov
committed
feat(summaries): add disabled summaries grid sample
1 parent 6042681 commit 854498f

6 files changed

Lines changed: 162 additions & 0 deletions

File tree

‎src/app/grid/grid-disabled-summaies/grid-disabled-summaies.component.html‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
<div class="grid__wrapper">
2+
<igx-grid
3+
#grid1
4+
[data]="data"
5+
[autoGenerate]="false"
6+
height="600px"
7+
width="100%"
8+
>
9+
<igx-column field="ProductID" header="Product ID">
10+
</igx-column>
11+
<igx-column
12+
field="ProductName"
13+
header="Product Name"
14+
[hasSummary]="true"
15+
>
16+
</igx-column>
17+
<igx-column
18+
field="UnitPrice"
19+
header="Unit Price"
20+
dataType="number"
21+
[hasSummary]="true"
22+
[disabledSummaries]="['count', 'sum', 'average']"
23+
>
24+
</igx-column>
25+
<igx-column
26+
field="UnitsInStock"
27+
header="Units In Stock"
28+
dataType="number"
29+
[hasSummary]="true"
30+
[summaries]="discontinuedSummary"
31+
[disabledSummaries]="['total', 'totalDiscontinued']"
32+
>
33+
</igx-column>
34+
<igx-column
35+
field="Discontinued"
36+
header="Discontinued"
37+
[dataType]="'boolean'"
38+
[hasSummary]="true"
39+
>
40+
</igx-column>
41+
<igx-column field="OrderDate" [dataType]="'date'" [hasSummary]="true">
42+
</igx-column>
43+
</igx-grid>
44+
<div class="action__buttons">
45+
<button igxButton="contained" (click)="disableDefaultSummaries()">
46+
Disable Min and Max summaries for the Price column
47+
</button>
48+
<button igxButton="contained" (click)="disableCustomSummaries()">
49+
Disable Products and Discontinued Products summaries
50+
</button>
51+
</div>
52+
</div>

‎src/app/grid/grid-disabled-summaies/grid-disabled-summaies.component.scss‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
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+
}

‎src/app/grid/grid-disabled-summaies/grid-disabled-summaies.component.ts‎

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
import {
2+
Component,
3+
ViewChild,
4+
OnInit
5+
} from "@angular/core";
6+
import {
7+
IgxGridComponent,
8+
IgxNumberSummaryOperand,
9+
IgxSummaryResult,
10+
IgxColumnComponent,
11+
IgxButtonDirective
12+
} from "igniteui-angular";
13+
import { DATA } from "../../data/nwindData";
14+
import { IgxPreventDocumentScrollDirective } from "../../directives/prevent-scroll.directive";
15+
16+
class DiscontinuedSummary {
17+
public operate(
18+
data?: any[],
19+
allData = [],
20+
fieldName = ""
21+
): IgxSummaryResult[] {
22+
const result = [];
23+
24+
result.push({
25+
key: "products",
26+
label: "Products",
27+
summaryResult: data.length
28+
});
29+
30+
result.push({
31+
key: "total",
32+
label: "Total Items",
33+
summaryResult: IgxNumberSummaryOperand.sum(data)
34+
});
35+
36+
result.push({
37+
key: "discontinued",
38+
label: "Discontinued Products",
39+
summaryResult: allData
40+
.map((r) => r["Discontinued"])
41+
.filter((rec) => rec).length
42+
});
43+
44+
result.push({
45+
key: "totalDiscontinued",
46+
label: "Total Discontinued Items",
47+
summaryResult: IgxNumberSummaryOperand.sum(
48+
allData
49+
.filter((rec) => rec["Discontinued"])
50+
.map((r) => r[fieldName])
51+
)
52+
});
53+
54+
return result;
55+
}
56+
}
57+
58+
@Component({
59+
selector: "app-grid-summary-sample",
60+
styleUrls: ["./grid-disabled-summaies.component.scss"],
61+
templateUrl: "grid-disabled-summaies.component.html",
62+
imports: [
63+
IgxPreventDocumentScrollDirective,
64+
IgxGridComponent,
65+
IgxColumnComponent,
66+
IgxButtonDirective
67+
]
68+
})
69+
export class GridDisabledSummariesComponent implements OnInit{
70+
@ViewChild("grid1", { static: true }) public grid1: IgxGridComponent;
71+
72+
public data: any[];
73+
74+
public discontinuedSummary = DiscontinuedSummary;
75+
76+
constructor() {}
77+
78+
public ngOnInit(): void {
79+
this.data = DATA;
80+
}
81+
82+
public disableDefaultSummaries() {
83+
this.grid1.getColumnByName('UnitPrice').disabledSummaries = ['min', 'max'];
84+
}
85+
86+
public disableCustomSummaries() {
87+
this.grid1.getColumnByName('UnitsInStock').disabledSummaries = ['products', 'discontinued'];
88+
}
89+
}

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -74,6 +74,7 @@ export const gridsRoutesData = {
7474
'grid-multi-cell-selection': { displayName: 'Grid Multi cell selection', parentName: 'Grid' },
7575
'grid-multi-cell-selection-style': { displayName: 'Grid Multi Cell Selection Style', parentName: 'Grid' },
7676
'grid-selection-custom-summaries': { displayName: 'Grid Selection Based Summaries', parentName: 'Grid' },
77+
'grid-disabled-summaries': { displayName: 'Grid Disabled Summaries', parentName: 'Grid' },
7778
'grid-multi-row-layout': { displayName: 'Grid Multi Row Layout', parentName: 'Grid' },
7879
'grid-multi-row-layout-configuration': { displayName: 'Grid Multi Row Layout Configuration', parentName: 'Grid' },
7980
'grid-multi-row-layout-styling': { displayName: 'Grid Multi Row Layout Styling', parentName: 'Grid' },

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

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ import { GridCustomFilteringComponent } from './grid-custom-filtering/grid-custo
1414
import { GridCustomKBNavigationComponent } from './grid-custom-kb-navigation/grid-custom-kb-navigation-sample.component';
1515
import { CustomRemotePagingGridSampleComponent } from './grid-custom-remote-paging-sample/custom-remote-paging-sample.component';
1616
import { GridCustomSummariesSelectionComponent } from './grid-custom-summaries-selection/grid-custom-summaries-selection.component';
17+
import { GridDisabledSummariesComponent } from './grid-disabled-summaies/grid-disabled-summaies.component';
1718
import { GridDisplayDensitySampleComponent } from './grid-displaydensity-sample/grid-displaydensity-sample.component';
1819
import { GridEditingSampleComponent } from './grid-editing-sample/grid-editing-sample.component';
1920
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 = [
585586
data: gridsRoutesData['grid-selection-custom-summaries'],
586587
path: 'grid-selection-custom-summaries'
587588
},
589+
{
590+
component: GridDisabledSummariesComponent,
591+
data: gridsRoutesData['grid-disabled-summaries'],
592+
path: 'grid-disabled-summaries'
593+
},
588594
{
589595
component: GridMultiRowLayoutStylingComponent,
590596
data: gridsRoutesData['grid-multi-row-layout-styling'],

‎src/app/grid/grids.module.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,7 @@ import { GridCustomFilteringComponent } from './grid-custom-filtering/grid-custo
4040
import { GridCustomKBNavigationComponent } from './grid-custom-kb-navigation/grid-custom-kb-navigation-sample.component';
4141
import { CustomRemotePagingGridSampleComponent } from './grid-custom-remote-paging-sample/custom-remote-paging-sample.component';
4242
import { GridCustomSummariesSelectionComponent } from './grid-custom-summaries-selection/grid-custom-summaries-selection.component';
43+
import { GridDisabledSummariesComponent } from './grid-disabled-summaies/grid-disabled-summaies.component';
4344
import { GridDisplayDensitySampleComponent } from './grid-displaydensity-sample/grid-displaydensity-sample.component';
4445
import { GridEditingEventsComponent } from './grid-editing-events/grid-editing-events.component';
4546
import { GridEditingLifecycleComponent } from './grid-editing-lifecycle-sample/grid-editing-lifecycle.component';
@@ -272,6 +273,7 @@ import { GridCascadingCombosComponent } from './grid-cascading-combos/grid-casca
272273
GridExternalExcelStyleFilteringComponent,
273274
GridExternalOutletComponent,
274275
GridCustomSummariesSelectionComponent,
276+
GridDisabledSummariesComponent,
275277
GridMultiRowLayoutStylingComponent,
276278
PinningStylingComponent,
277279
GridGroupByStylingComponent,

0 commit comments

Comments
 (0)