Skip to content

Commit 2c5fb56

Browse files
author
pipeline
committed
sample(EJ2-2881): Aggregation sample added
1 parent e9eca35 commit 2c5fb56

File tree

7 files changed

+207
-12
lines changed

7 files changed

+207
-12
lines changed

‎index.html

Lines changed: 0 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -38,15 +38,6 @@
3838
<ng-app class="e-view audjust-sb-header animate-sb-header"></ng-app>
3939
</div>
4040

41-
<script>
42-
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
43-
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
44-
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
45-
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
46-
47-
ga('create', 'UA-233131-15', 'auto');
48-
ga('send', 'pageview');
49-
</script>
5041
</body>
5142
<script src="dist/main.bundle.js"></script>
5243

‎src/common/samplelist.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ export let samplesList: any = [
1414
'name': 'Chart', 'category': 'Datavisualization', 'order': '01', 'path': 'chart', 'samples': chartAppRoutes
1515
},
1616
{
17-
'name': 'Grid', 'category': 'Grids', 'order': '02', 'path': 'grid', 'samples': gridRouteConfig
17+
'name': 'Grid', 'category': 'Grids', 'order': '02', 'path': 'grid', 'samples': gridRouteConfig, 'type': 'update'
1818
},
1919
{
2020
'name': 'Form-Validator', 'category': 'Editors', 'order': '03', 'path': 'form-validator', 'samples': formValidatorAppRoutes

‎src/grid/aggregatedefault.component.ts

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import { Component, OnInit } from '@angular/core';
2+
import { orderData } from './data';
3+
import { AggregateService } from '@syncfusion/ej2-ng-grids';
4+
5+
@Component({
6+
selector: 'ej2-gridaggregate',
7+
templateUrl: 'aggregatedefault.html',
8+
providers: [AggregateService]
9+
})
10+
export class AggregateComponent implements OnInit {
11+
public data: Object[];
12+
13+
public ngOnInit(): void {
14+
this.data = orderData;
15+
}
16+
}

‎src/grid/aggregatedefault.html

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
<div class="control-section">
2+
<ej-grid [dataSource]="data" [allowPaging]="true">
3+
<e-columns>
4+
<e-column field='CustomerName' headerText='Customer Name' width='150'></e-column>
5+
<e-column field='Freight' headerText='Freight' width='150' format='C2' textAlign="right"></e-column>
6+
<e-column field='OrderDate' headerText='Order Date' width='150' format="yMd" textAlign="right"></e-column>
7+
<e-column field='ShipCountry' headerText='Ship Country' width='150'></e-column>
8+
</e-columns>
9+
<e-aggregates>
10+
<e-aggregate>
11+
<e-columns>
12+
<e-column type="sum" field="Freight" format="C2">
13+
<template #footerTemplate let-data>Sum: {{data.sum}}</template>
14+
</e-column>
15+
</e-columns>
16+
</e-aggregate>
17+
<e-aggregate>
18+
<e-columns>
19+
<e-column type="average" field="Freight" format="C2">
20+
<template #footerTemplate let-data>Average: {{data.average}}</template>
21+
</e-column>
22+
</e-columns>
23+
</e-aggregate>
24+
</e-aggregates>
25+
</ej-grid>
26+
27+
<div id="description">
28+
<p>The Grid supports aggregates which will be displayed at the footer, group footer and group caption of the Grid. The
29+
aggregate configurations can be provided by the <code><a target="_blank" class="code"
30+
href="http://ej2.syncfusion.com/documentation/grid/api-grid.html">
31+
aggregates
32+
</a></code> property.</p>
33+
<p>The built-in aggregates are,</p>
34+
<ul>
35+
<li><code>sum</code></li>
36+
<li><code>average</code></li>
37+
<li><code>min</code></li>
38+
<li><code>max</code></li>
39+
<li><code>count</code></li>
40+
<li><code>truecount</code></li>
41+
<li><code>falsecount</code></li>
42+
<li><code>custom</code> - Requires the <code><a target="_blank" class="code"
43+
href="http://ej2.syncfusion.com/documentation/grid/api-aggregateColumn.html#customaggregate-string">
44+
customAggregate
45+
</a></code> property to perform aggregation. The custom aggregate value can be accessed inside template using the
46+
key <code>custom</code></li>
47+
</ul>
48+
<p>
49+
In this demo, the <code><a target="_blank" class="code"
50+
href="http://ej2.syncfusion.com/documentation/grid/api-aggregateColumn.html#footertemplate-string">
51+
footerTemplate</a></code> property is used to display four different aggregates in the Grid footer. In the first
52+
aggregate row, the <code>sum</code> aggregate type is used by setting the <code><a target="_blank" class="code"
53+
href="http://ej2.syncfusion.com/documentation/grid/api-aggregateColumn.html#type-string---string">
54+
type</a></code> and the <code><a target="_blank" class="code"
55+
href="http://ej2.syncfusion.com/documentation/grid/api-aggregateColumn.html#field-string">
56+
field</a></code> property is set as <strong><i>Freight</i></strong> which will be used to perform aggregation. The
57+
aggregate value is accessed inside the <code><a target="_blank" class="code"
58+
href="http://ej2.syncfusion.com/documentation/grid/api-aggregateColumn.html#footertemplate-string">
59+
footerTemplate</a></code> using its <code><a target="_blank" class="code"
60+
href="http://ej2.syncfusion.com/documentation/grid/api-aggregateColumn.html#type-string---string">
61+
type</a></code> name (<code>sum</code>). The aggregate value will be formatted based on its <code><a target="_blank" class="code"
62+
href="http://ej2.syncfusion.com/documentation/grid/api-aggregateColumn.html#format-string---numberformatoptions---dateformatoptions">
63+
format</a></code> value(<strong><i>C2</i></strong>) before displayed.
64+
</p>
65+
66+
<p style="font-weight: 500">Injecting Module</p>
67+
<p>
68+
Grid component features are segregated into individual feature-wise modules. To use aggregate feature, we need to inject
69+
<code>AggregateService</code> into the <code>@NgModule.providers</code> section.
70+
</p>
71+
</div>
72+
</div>

‎src/grid/aggregategroup.component.ts

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import { Component, OnInit } from '@angular/core';
2+
import { categoryData } from './data';
3+
import { AggregateService, GroupService } from '@syncfusion/ej2-ng-grids';
4+
5+
@Component({
6+
selector: 'ej2-gridaggregategroup',
7+
templateUrl: 'aggregategroup.html',
8+
providers: [AggregateService, GroupService]
9+
})
10+
export class AggregateGroupComponent implements OnInit {
11+
public data: Object[];
12+
public groupSettings: { [x: string]: Object } = { showDropArea: false, columns: ['CategoryName'] };
13+
14+
public ngOnInit(): void {
15+
this.data = categoryData;
16+
}
17+
}

‎src/grid/aggregategroup.html

Lines changed: 93 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
<div class="control-section">
2+
<ej-grid [dataSource]="data" [allowPaging]="true" [allowGrouping]="true" [groupSettings]="groupSettings">
3+
<e-columns>
4+
<e-column field='CategoryName' headerText='Category Name' width='170'></e-column>
5+
<e-column field='ProductName' headerText='Product Name' width='150'></e-column>
6+
<e-column field='QuantityPerUnit' headerText='Quantity per unit' width='180' textAlign="right"></e-column>
7+
<e-column field='UnitsInStock' headerText='Units In Stock' width='150' textAlign="right"></e-column>
8+
<e-column field='Discontinued' width='170' textAlign="center" [displayAsCheckBox]="true" type="boolean"></e-column>
9+
</e-columns>
10+
<e-aggregates>
11+
<e-aggregate>
12+
<e-columns>
13+
<e-column type="sum" field="UnitsInStock">
14+
<template #groupFooterTemplate let-data>Total units: {{data.sum}}</template>
15+
</e-column>
16+
</e-columns>
17+
</e-aggregate>
18+
<e-aggregate>
19+
<e-columns>
20+
<e-column type="truecount" field="Discontinued">
21+
<template #groupFooterTemplate let-data>Discontinued: {{data.truecount}}</template>
22+
</e-column>
23+
</e-columns>
24+
</e-aggregate>
25+
<e-aggregate>
26+
<e-columns>
27+
<e-column type="max" field="UnitsInStock">
28+
<template #groupCaptionTemplate let-data>Maximum: {{data.max}}</template>
29+
</e-column>
30+
</e-columns>
31+
</e-aggregate>
32+
</e-aggregates>
33+
</ej-grid>
34+
35+
<div id="description">
36+
<p>The Grid supports aggregates which will be displayed at the footer, group footer and group caption of the Grid.
37+
The aggregate configurations can be provided by the <code><a target="_blank" class="code"
38+
href="http://ej2.syncfusion.com/documentation/grid/api-grid.html">
39+
aggregates
40+
</a></code> property.</p>
41+
<p>The built-in aggregates are,</p>
42+
<ul>
43+
<li><code>sum</code></li>
44+
<li><code>average</code></li>
45+
<li><code>min</code></li>
46+
<li><code>max</code></li>
47+
<li><code>count</code></li>
48+
<li><code>truecount</code></li>
49+
<li><code>falsecount</code></li>
50+
<li><code>custom</code> - Requires the <code><a target="_blank" class="code"
51+
href="http://ej2.syncfusion.com/documentation/grid/api-aggregateColumn.html#customaggregate-string">
52+
customAggregate
53+
</a></code> property to perform aggregation.
54+
The custom aggregate value can be accessed inside template using the key <code>custom</code></li>
55+
</ul>
56+
<p>
57+
In this demo, the <code><a target="_blank" class="code"
58+
href="http://ej2.syncfusion.com/documentation/grid/api-aggregateColumn.html#groupfootertemplate-string">
59+
groupFooterTemplate</a></code> property is used to display group footer aggregation for the <strong><i>Unit In Stocks</i></strong> and <strong><i>Discontinued</i></strong> columns and <code><a target="_blank" class="code"
60+
href="http://ej2.syncfusion.com/documentation/grid/api-aggregateColumn.html#groupcaptiontemplate-string">
61+
groupCaptionTemplate</a></code> property is used to display group caption aggregation for the <strong><i>Unit In Stocks</i></strong> column.
62+
</p>
63+
<p> To enable group footer aggregation for <strong><i>Unit In Stocks</i></strong> column, the <code>sum</code> aggregate type is used by setting the <code><a target="_blank" class="code"
64+
href="http://ej2.syncfusion.com/documentation/grid/api-aggregateColumn.html#type-string---string">
65+
type</a></code> and the <code><a target="_blank" class="code"
66+
href="http://ej2.syncfusion.com/documentation/grid/api-aggregateColumn.html#field-string">
67+
field</a></code> property is set as <strong><i>UnitsInStock</i></strong> which will be used to perform aggregation.
68+
The aggregate value is accessed inside the <code><a target="_blank" class="code"
69+
href="http://ej2.syncfusion.com/documentation/grid/api-aggregateColumn.html#groupfootertemplate-string">
70+
groupFooterTemplate</a></code> using its <code><a target="_blank" class="code"
71+
href="http://ej2.syncfusion.com/documentation/grid/api-aggregateColumn.html#type-string---string">
72+
type</a></code> name (<code>sum</code>).
73+
</p>
74+
<p> To enable group caption aggregation for <strong><i>Unit In Stocks</i></strong> column, the <code>max</code> aggregate type is used by setting the <code><a target="_blank" class="code"
75+
href="http://ej2.syncfusion.com/documentation/grid/api-aggregateColumn.html#type-string---string">
76+
type</a></code> and the <code><a target="_blank" class="code"
77+
href="http://ej2.syncfusion.com/documentation/grid/api-aggregateColumn.html#field-string">
78+
field</a></code> property is set as <strong><i>UnitsInStock</i></strong> which will be used to perform aggregation.
79+
The aggregate value is accessed inside the<code><a target="_blank" class="code"
80+
href="http://ej2.syncfusion.com/documentation/grid/api-aggregateColumn.html#groupcaptiontemplate-string">
81+
groupCaptionTemplate</a></code> using its <code><a target="_blank" class="code"
82+
href="http://ej2.syncfusion.com/documentation/grid/api-aggregateColumn.html#type-string---string">
83+
type</a></code> name (<code>max</code>).
84+
</p>
85+
86+
<p style="font-weight: 500">Injecting Module</p>
87+
<p>
88+
Grid component features are segregated into individual feature-wise modules. To use aggregate feature, we need to inject
89+
<code>AggregateService</code> into the <code>@NgModule.providers</code> section. Since grouping feature is required
90+
to show group aggreations, we also need to inject <code>GroupService</code>.
91+
</p>
92+
</div>
93+
</div>

‎src/grid/grid.module.ts

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,8 @@ import { SearchComponent } from './searching.component';
2222
import { ScrollComponent } from './scrolling.component';
2323
import { GridLinesComponent } from './gridlines.component';
2424
import { DragAndDropComponent } from './draganddrop.component';
25+
import { AggregateComponent } from './aggregatedefault.component';
26+
import { AggregateGroupComponent } from './aggregategroup.component';
2527
import { SharedModule } from '../common/shared.module';
2628

2729
export const gridRouteConfig: Object[] = [
@@ -43,13 +45,17 @@ export const gridRouteConfig: Object[] = [
4345
{ 'path': 'grid/column/autowrap', component: AutoWrapComponent, name: 'AutoWrap Column cells', order: '03', category: 'Column' },
4446
{ 'path': 'grid/column/reorder', component: ReorderComponent, name: 'Reorder Columns', order: '03', category: 'Column' },
4547
{ 'path': 'grid/selection', component: SelectionComponent, name: 'Default Selection', order: '04', category: 'Selection' },
46-
{ 'path': 'grid/selectionapi', component: SelectionApiComponent, name: 'Selection API', order: '04', category: 'Selection'}
48+
{ 'path': 'grid/selectionapi', component: SelectionApiComponent, name: 'Selection API', order: '04', category: 'Selection'},
49+
{ 'path': 'grid/aggregatedefault', component: AggregateComponent, name: 'Default Aggregate', order: '05', category: 'Aggregate',
50+
type: 'new' },
51+
{ 'path': 'grid/aggregategroup', component: AggregateGroupComponent,
52+
name: 'Group and Caption aggregate', order: '05', category: 'Aggregate', type: 'new' }
4753
];
4854

4955
let declarations: Type<Object>[] = [DefaultComponent, GridLinesComponent,
5056
LocalDataComponent, DataBindingComponent, ShowHideComponent, MasterComponent, DetailComponent, ReorderComponent,
5157
GroupComponent, StackedHeaderComponent, AutoWrapComponent, SortComponent, PageComponent, FilterComponent, SelectionComponent,
52-
ScrollComponent, SearchComponent, SelectionApiComponent, DragAndDropComponent];
58+
ScrollComponent, SearchComponent, SelectionApiComponent, DragAndDropComponent, AggregateComponent, AggregateGroupComponent];
5359

5460
@NgModule({
5561
imports: [RouterModule.forChild(gridRouteConfig), CommonModule, HttpModule, ToolbarModule, GridModule, SharedModule],

0 commit comments

Comments
 (0)