From c8d61e18e2e7d065c0f3cb4df0efa08c0bcf91c5 Mon Sep 17 00:00:00 2001 From: MonikaKirkova Date: Fri, 26 Apr 2024 15:46:11 +0300 Subject: [PATCH 1/3] Add tree grid summary topic --- doc/en/components/grids/_shared/summaries.md | 21 ++++++++++++++++++-- docfx/en/components/toc.json | 2 +- 2 files changed, 20 insertions(+), 3 deletions(-) diff --git a/doc/en/components/grids/_shared/summaries.md b/doc/en/components/grids/_shared/summaries.md index bb9dbb9b9..a5778ffba 100644 --- a/doc/en/components/grids/_shared/summaries.md +++ b/doc/en/components/grids/_shared/summaries.md @@ -639,13 +639,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"` @@ -897,9 +907,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 c5d2805d1..877256bde 100644 --- a/docfx/en/components/toc.json +++ b/docfx/en/components/toc.json @@ -818,7 +818,7 @@ "status": "" }, { - "exclude": ["Angular", "React", "WebComponents", "Blazor"], + "exclude": ["Angular"], "name": "Summaries", "href": "grids/tree-grid/summaries.md", "status": "" From 4a2e7d4a0a71ed2406b4a1e0eafed7a81693fb2b Mon Sep 17 00:00:00 2001 From: MonikaKirkova Date: Tue, 4 Jun 2024 23:04:09 +0300 Subject: [PATCH 2/3] Change code snippets for TreeGrid --- doc/en/components/grids/_shared/summaries.md | 296 ++++++++++++++++++- 1 file changed, 288 insertions(+), 8 deletions(-) diff --git a/doc/en/components/grids/_shared/summaries.md b/doc/en/components/grids/_shared/summaries.md index a5778ffba..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; + } +} +``` + @@ -730,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. @@ -801,6 +1080,7 @@ public summaryFormatter( `sample="/{ComponentSample}/data-summary-formatter", height="650", alt="{Platform} {ComponentTitle} data summary formatter"` + From 3a790344a0ff672708ac484a5afd2c0bf1448cef Mon Sep 17 00:00:00 2001 From: MonikaKirkova <47036441+MonikaKirkova@users.noreply.github.com> Date: Wed, 5 Jun 2024 17:19:17 +0300 Subject: [PATCH 3/3] Update docfx/en/components/toc.json Co-authored-by: Riva Ivanova <49126110+RivaIvanova@users.noreply.github.com> --- docfx/en/components/toc.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docfx/en/components/toc.json b/docfx/en/components/toc.json index 7eb32d576..54eac2fb5 100644 --- a/docfx/en/components/toc.json +++ b/docfx/en/components/toc.json @@ -822,7 +822,7 @@ "exclude": ["Angular"], "name": "Summaries", "href": "grids/tree-grid/summaries.md", - "status": "" + "status": "NEW" }, { "exclude": ["Angular"],