diff --git a/en/components/grids_templates/summaries.md b/en/components/grids_templates/summaries.md index f4c37b6c4..805169276 100644 --- a/en/components/grids_templates/summaries.md +++ b/en/components/grids_templates/summaries.md @@ -116,55 +116,6 @@ All available column data types could be found in the official [Column types top ``` } -**@@igComponent summaries** can be customized further by using the [`disabledSummaries`]({environment:angularApiUrl}/classes/igxcolumncomponent.html#disabledSummaries) property, which allows you to exclude specific summary functions for a column. This property accepts an array of strings representing the keys of the summaries to disable. - -@@if (igxName === 'IgxGrid') { -For example, to disable the `count`, `min`, and `max` summaries for a `ReorderLevel` column, you can set the `disabledSummaries` property to `['count', 'min', 'max']`: - -```html -<@@igSelector #grid1 [data]="data" [autoGenerate]="false" height="800px" width="800px" (columnInit)="initColumn($event)"> - - - - - -``` -} -@@if (igxName === 'IgxTreeGrid') { -For example, to disable the `count`, `min`, and `max` summaries for a `Units` column, you can set the `disabledSummaries` property to `['count', 'min', 'max']`: - -```html -<@@igSelector #grid1 [data]="data" [autoGenerate]="false" height="800px" width="800px" (columnInit)="initColumn($event)"> - - - - - -``` -} -@@if (igxName === 'IgxHierarchicalGrid') { -For example, to disable the `count`, `min`, and `max` summaries for a `Grammy Nominations` column, you can set the `disabledSummaries` property to `['count', 'min', 'max']`: - -```html - - - - -
- -
- - - - - - - -``` -} - -In this example, the numeric column will display only the remaining summaries, such as `average` and `sum`, while excluding the disabled ones. This approach ensures that you can tailor the summary results displayed for each column to better suit your application's requirements. - The other way to enable/disable summaries for a specific column or a list of columns is to use the public method [`enableSummaries`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#enableSummaries)/[`disableSummaries`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#disableSummaries) of the **@@igSelector**. @@if (igxName === 'IgxGrid') { @@ -377,59 +328,6 @@ export class HGridSummarySampleComponent implements OnInit { ``` } -**@@igComponent summaries** also support customization when using the [`disabledSummaries`]({environment:angularApiUrl}/classes/igxcolumncomponent.html#disabledSummaries) property alongside custom summaries. This property allows you to exclude specific custom summary, offering precise control over which summaries are displayed for a given column. For example, to disable a custom summary like `test` while keeping others active, you can use the `disabledSummaries` property and set it to `['test']`: - -@@if (igxName === 'IgxGrid') { -```html - <@@igSelector #grid1 [data]="data" [autoGenerate]="false" height="800px" width="800px" (columnInit)="initColumn($event)"> - - - - - - - - - -``` - -In this example, the `UnitsInStock` column uses the custom `MySummary` class but excludes the `test` summary function by specifying it in the `disabledSummaries` property. This configuration allows for even greater flexibility, enabling you to disable custom summaries to suit your application's specific needs. -} - -@@if (igxName === 'IgxTreeGrid') { -```html -<@@igSelector #grid1 [data]="data" [autoGenerate]="false" height="800px" width="800px" (columnInit)="initColumn($event)"> - - - - - - -``` - -In this example, the `Units` column uses the custom `MySummary` class but excludes the `test` summary function by specifying it in the `disabledSummaries` property. This configuration allows for even greater flexibility, enabling you to disable custom summaries to suit your application's specific needs. -} - -@@if (igxName === 'IgxHierarchicalGrid') { -```html - - - - -
- -
- - - - - - -``` - -In this example, the `Grammy Nominations` column uses the custom `MySummary` class but excludes the `test` summary function by specifying it in the `disabledSummaries` property. This configuration allows for even greater flexibility, enabling you to disable custom summaries to suit your application's specific needs. -} - ### Custom summaries, which access all data Now you can access all @@igComponent data inside the custom column summary. Two additional optional parameters are introduced in the IgxSummaryOperand `operate` method. As you can see in the code snippet below the operate method has the following three parameters: @@ -534,7 +432,115 @@ When a default summary is defined, the height of the summary area is calculated } +## Disable Summaries + +The [`disabledSummaries`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#disabledSummaries) property provides precise control over the summary functions displayed for each column in the grid. This property is particularly useful when you want to remove unnecessary or less relevant summaries, ensuring that only meaningful and context-specific results are presented to users. It accepts an array of strings, such as `['count', 'min', 'max']`, where each string corresponds to a **summary key** that should be excluded from the column's displayed summaries. +This property can also be modified **dynamically at runtime** through code, providing flexibility to adapt the grid's summaries to changing application states or user actions. + +Below are examples demonstrating the use of the `disabledSummaries` property for different columns and different summaries. + +@@if (igxName === 'IgxGrid') { +```html + + + + + + +``` +For `UnitPrice`, default summaries like `count`, `sum`, and `average` are disabled, leaving others like `min` and `max` active. + +For `UnitsInStock`, custom summaries such as `total` and `totalDiscontinued` are excluded using the `disabledSummaries` property. +} +@@if (igxName === 'IgxTreeGrid') { +```html + + + + + + +``` +For `Units`, custom summaries such as `totalDelivered` and `totalNotDelivered` are excluded using the `disabledSummaries` property. + +For `UnitPrice`, default summaries like `count`, `sum`, and `average` are disabled, leaving others like `min` and `max` active. +} +@@if (igxName === 'IgxHierarchicalGrid') { +```html + + + +
+ +
+ + + + +``` +For `Photo`, custom summaries such as `singersWithAwards` and `awards` are excluded using the `disabledSummaries` property. + +For `GrammyNominations` default summaries like `count`, `sum`, and `average` are disabled, leaving others like `min` and `max` active. +} + +At runtime, summaries can also be dynamically disabled using the `disabledSummaries` property. For example, you can set or update the property on specific columns programmatically to adapt the displayed summaries based on user actions or application state changes. + +@@if (igxName === 'IgxGrid') { + + +} +@@if (igxName === 'IgxTreeGrid') { + + +} +@@if (igxName === 'IgxHierarchicalGrid') { + + +} ## Formatting summaries By default, summary results, produced by the built-in summary operands, are localized and formatted according to the grid [`locale`]({environment:angularApiUrl}/classes/igxgridcomponent.html#locale) and column [`pipeArgs`]({environment:angularApiUrl}/classes/igxcolumncomponent.html#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`]({environment:angularApiUrl}/classes/igxcolumncomponent.html#summaryFormatter) property.