diff --git a/doc/en/components/grids/_shared/summaries.md b/doc/en/components/grids/_shared/summaries.md
index bb9dbb9b9..e2bdaff01 100644
--- a/doc/en/components/grids/_shared/summaries.md
+++ b/doc/en/components/grids/_shared/summaries.md
@@ -42,7 +42,7 @@ All available column data types could be found in the official [Column types top
`{ComponentName}` summaries are enabled per-column by setting `HasSummary` property to **true**. It is also important to keep in mind that the summaries for each column are resolved according to the column data type. In the `{ComponentName}` the default column data type is `string`, so if you want `number` or `date` specific summaries you should specify the `DataType` property as `number` or `date`. Note that the summary values will be displayed localized, according to the grid `Locale` and column `PipeArgs`.
-
+
```html
<{ComponentSelector} #grid1 [data]="data" [autoGenerate]="false" height="800px" width="800px" (columnInit)="initColumn($event)">
@@ -82,13 +82,13 @@ All available column data types could be found in the official [Column types top
<{ComponentSelector} autoGenerate="false" height="800px" width="800px">
-
+
```
-
+
@@ -155,9 +155,56 @@ All available column data types could be found in the official [Column types top
```
+
+
+```html
+<{ComponentSelector} #grid1 [data]="data" [autoGenerate]="false" height="800px" width="800px" (columnInit)="initColumn($event)">
+
+
+
+
+
+
+
+```
+
+
+```razor
+<{ComponentSelector}>
+
+
+
+
+```
+
+
+```html
+<{ComponentSelector} id="grid1" auto-generate="false" height="800px" width="800px">
+
+
+
+
+
+
+
+```
+
+
+```tsx
+<{ComponentSelector} autoGenerate="false" height="800px" width="800px">
+
+
+
+
+
+
+
+```
+
+
The other way to enable/disable summaries for a specific column or a list of columns is to use the public method `EnableSummaries`/`DisableSummaries` of the `{ComponentName}`.
-
+
```html
<{ComponentSelector} #grid [data]="data" [autoGenerate]="false" height="800px" width="800px" (columnInit)="initColumn($event)" >
@@ -253,7 +300,7 @@ function disableSummary() {
```
-
+
@@ -349,6 +396,98 @@ function disableSummary() {
```
+
+
+```html
+<{ComponentSelector} #treeGrid [data]="data" [autoGenerate]="false" height="800px" width="800px">
+
+
+
+
+
+
+
+
+
+```
+
+
+
+```html
+
+
+
+
+
+
+
+
+
+
+```
+```ts
+constructor() {
+ var treeGrid = this.treeGrid = document.getElementById('treeGrid') as {ComponentName};
+ var enableBtn = this.enableBtn = document.getElementById('enableBtn') as HTMLButtonElement;
+ var disableBtn = this.disableBtn = document.getElementById('disableBtn') as HTMLButtonElement;
+ treeGrid.data = this.data;
+ enableBtn.addEventListener("click", this.enableSummary);
+ disableBtn.addEventListener("click", this.disableSummary);
+}
+```
+
+
+
+```typescript
+public enableSummary() {
+ this.treeGrid.enableSummaries([
+ {fieldName: 'Name'},
+ {fieldName: 'Units'}
+ ]);
+}
+public disableSummary() {
+ this.treeGrid.disableSummaries(['Units']);
+}
+```
+
+
+```razor
+<{ComponentSelector} AutoGenerate="false" Data="OrdersTreeData" Name="treeGrid" @ref="treeGridRef" Id="treeGrid" PrimaryKey="ID">
+
+
+
+
+
+@code {
+ public async void DisableSummaries()
+ {
+ object[] disabledSummaries = { "Units" };
+ await this.treeGrid.DisableSummariesAsync(disabledSummaries);
+ }
+}
+```
+
+```tsx
+function enableSummary() {
+ treeGridRef.current.enableSummaries([
+ {fieldName: 'Name'},
+ {fieldName: 'Units'}
+ ]);
+}
+function disableSummary() {
+ treeGridRef.current.disableSummaries(['Units']);
+}
+
+
+
+
+
+
+
+
+```
+
+
## Custom {ComponentTitle} Summaries
@@ -402,7 +541,7 @@ class MySummary extends IgcNumberSummaryOperand {
}
}
```
-
+
```razor
//In JavaScript
@@ -434,6 +573,45 @@ class WebGridDiscontinuedSummary {
}
}
```
+
+
+
+```razor
+
+//In JavaScript
+class PtoSummary {
+ operate(data, allData, fieldName) {
+ const result = [];
+ result.push({
+ key: 'totalOnPTO',
+ label: 'Employees On PTO',
+ summaryResult: this.count(allData.filter((rec) => rec['OnPTO']).map(r => r[fieldName]))
+ });
+ result.push({
+ key: 'devs',
+ label: 'Developers',
+ summaryResult: this.count(allData.filter((rec) => rec[fieldName].includes('Developer') && rec['OnPTO']).map(r => r[fieldName]))
+ });
+ result.push({
+ key: 'tl',
+ label: 'Team Leads',
+ summaryResult: this.count(allData.filter((rec) => rec[fieldName].includes('Team Lead') && rec['OnPTO']).map(r => r[fieldName]))
+ });
+ result.push({
+ key: 'managers',
+ label: 'Managers/Directors',
+ summaryResult: this.count(allData.filter((rec) => (rec[fieldName].includes('Manager') || rec[fieldName].includes('Director')) && rec['OnPTO']).map(r => r[fieldName]))
+ });
+ result.push({
+ key: 'ceo',
+ label: 'CEO/President',
+ summaryResult: this.count(allData.filter((rec) => (rec[fieldName].includes('CEO') || rec[fieldName].includes('President')) && rec['OnPTO']).map(r => r[fieldName]))
+ });
+ return result;
+ }
+}
+```
+
As seen in the examples, the base classes expose the `Operate` method, so you can choose to get all default summaries and modify the result, or calculate entirely new summary results.
@@ -461,7 +639,7 @@ See [Custom summaries, which access all data](#custom-summaries-which-access-all
> [!Note]
> In order to calculate the summary row height properly, the {ComponentTitle} needs the `Operate` method to always return an array of `SummaryResult` with the proper length even when the data is empty.
-
+
And now let's add our custom summary to the column `UnitsInStock`. We will achieve that by setting the Summaries` property to the class we create below.
```html
@@ -524,7 +702,7 @@ igRegisterScript("WebGridCustomSummary", (event) => {
}
}, false);
```
-
+
And now let's add our custom summary to the column `GrammyAwards`. We will achieve that by setting the Summaries` property to the class we create below.
@@ -585,6 +763,62 @@ igRegisterScript("WebHierarchicalGridCustomSummary", (event) => {
```
+
+And now let's add our custom summary to the column `Title `. We will achieve that by setting the Summaries` property to the class we create below.
+
+```html
+<{ComponentSelector} #treeGrid [data]="data" [autoGenerate]="false" height="800px" width="800px">
+
+
+
+
+
+
+```
+
+
+
+```html
+
+
+
+
+
+```
+```ts
+constructor() {
+ var treeGrid = this.treeGrid = document.getElementById('treeGrid') as {ComponentName};
+ var column1 = this.column1 = document.getElementById('column1') as IgcColumnComponent;
+ treeGrid.data = this.data;
+ column1.summaries = this.mySummary;
+}
+```
+
+
+```typescript
+export class TreeGridComponent implements OnInit {
+ mySummary = MySummary;
+}
+```
+
+```razor
+<{ComponentSelector}
+ AutoGenerate="true"
+ Name="treeGrid"
+ @ref="treeGrid"
+ Data="EmployeesFlatData"
+ PrimaryKey="ID"
+ ColumnInitScript="WebTreeGridCustomSummary">
+
+
+// In Javascript
+igRegisterScript("WebTreeGridCustomSummary", (event) => {
+ if (event.detail.field === "Title") {
+ event.detail.summaries = PtoSummary;
+ }
+}, false);
+```
+
### Custom summaries, which access all data
Now you can access all {ComponentTitle} data inside the custom column summary. Two additional optional parameters are introduced in the SummaryOperand `Operate` method.
@@ -593,6 +827,7 @@ As you can see in the code snippet below the operate method has the following th
- allGridData - gives you the whole grid data source
- fieldName - current column field
+
```typescript
class MySummary extends IgxNumberSummaryOperand {
constructor() {
@@ -632,6 +867,49 @@ class WebGridDiscontinuedSummary {
}
}
```
+
+
+
+```typescript
+class MySummary extends IgxNumberSummaryOperand {
+ constructor() {
+ super();
+ }
+ operate(columnData: any[], allGridData = [], fieldName?): IgxSummaryResult[] {
+ const result = super.operate(allData.map(r => r[fieldName]));
+ result.push({ key: 'totalOnPTO', label: 'Employees On PTO', summaryResult: this.count(allData.filter((rec) => rec['OnPTO']).map(r => r[fieldName])) });
+ return result;
+ }
+}
+```
+
+```typescript
+class MySummary extends IgcNumberSummaryOperand {
+ constructor() {
+ super();
+ }
+ operate(columnData: any[], allGridData = [], fieldName?): IgcSummaryResult[] {
+ const result = super.operate(allData.map(r => r[fieldName]));
+ result.push({ key: 'totalOnPTO', label: 'Employees On PTO', summaryResult: this.count(allData.filter((rec) => rec['OnPTO']).map(r => r[fieldName])) });
+ return result;
+ }
+}
+```
+
+```razor
+class PtoSummary {
+ operate(data, allData, fieldName) {
+ const result = [];
+ result.push({
+ key: 'totalOnPTO',
+ label: 'Employees On PTO',
+ summaryResult: this.count(allData.filter((rec) => rec['OnPTO']).map(r => r[fieldName]))
+ });
+ return result;
+ }
+}
+```
+
@@ -639,13 +917,23 @@ class WebGridDiscontinuedSummary {
`sample="/{ComponentSample}/data-summaries-custom", height="650", alt="{Platform} {ComponentTitle} data summary custom"`
+
+
`sample="/{ComponentSample}/data-summary-options", height="650", alt="{Platform} {ComponentTitle} data summary options"`
-
+
+
+
+
+
+`sample="/{ComponentSample}/data-summaries-custom", height="650", alt="{Platform} {ComponentTitle} data summary custom"`
+
+
+
`sample="/{ComponentSample}/data-summary-options", height="650", alt="{Platform} {ComponentTitle} data summary options"`
@@ -720,6 +1008,7 @@ When a default summary is defined, the height of the summary area is calculated
`sample="/{ComponentSample}/data-summary-template", height="650", alt="{Platform} {ComponentTitle} data summary template"`
+
## Formatting summaries
By default, summary results, produced by the built-in summary operands, are localized and formatted according to the grid `Locale` and column `PipeArgs`. When using custom operands, the `Locale` and `PipeArgs` are not applied. If you want to change the default appearance of the summary results, you may format them using the `SummaryFormatter` property.
@@ -791,6 +1080,7 @@ public summaryFormatter(
`sample="/{ComponentSample}/data-summary-formatter", height="650", alt="{Platform} {ComponentTitle} data summary formatter"`
+
@@ -897,9 +1187,16 @@ Then set the related CSS properties for that class:
### Demo
-`sample="/{ComponentSample}/groupby-summary-styling", height="710", alt="{Platform} {ComponentTitle} groupby summary styling"`
+
+`sample="/{ComponentSample}/groupby-summary-styling", height="710", alt="{Platform} {ComponentTitle} groupby summary styling"`
+
+
+
+`sample="/{ComponentSample}/data-summary-options-styling", height="710", alt="{Platform} {ComponentTitle} summary styling"`
+
+
```html
<{ComponentSelector} id="hierarchicalGrid">
diff --git a/docfx/en/components/toc.json b/docfx/en/components/toc.json
index ab6ecb6b7..62b8a2c0c 100644
--- a/docfx/en/components/toc.json
+++ b/docfx/en/components/toc.json
@@ -819,10 +819,10 @@
"status": ""
},
{
- "exclude": ["Angular", "React", "WebComponents", "Blazor"],
+ "exclude": ["Angular"],
"name": "Summaries",
"href": "grids/tree-grid/summaries.md",
- "status": ""
+ "status": "NEW"
},
{
"exclude": ["Angular"],