diff --git a/jp/components/grids_templates/excel_style_filtering.md b/jp/components/grids_templates/excel_style_filtering.md index 47a73e40fa..83f855c820 100644 --- a/jp/components/grids_templates/excel_style_filtering.md +++ b/jp/components/grids_templates/excel_style_filtering.md @@ -338,6 +338,117 @@ Excel スタイル フィルタリングをオンにするには、2 つの入
+### Unique Column Values Strategy + +The list items inside the Excel Style Filtering dialog represent the unique values for the respective column. The @@igComponent generates these values based on its data source by default. In order to provide these unique values manually and load them on demand, we can take advantage of the @@igComponent's [`uniqueColumnValuesStrategy`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#uniquecolumnvaluesstrategy) input. This input is actually a method that provides three arguments: +- **column** - The respective column instance. +- **filteringExpressionsTree** - The filtering expressions tree, which is reduced based on the respective column. +- **done** - Callback that should be called with the newly generated column values when they are retrieved from the server. + +The developer can manually generate the necessary unique column values based on the information, that is provided by the **column** and the **filteringExpressionsTree** arguments and then invoke the **done** callback. + +> [!NOTE] +> When the [`uniqueColumnValuesStrategy`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#uniquecolumnvaluesstrategy) input is provided, the default unique values generating process in the excel style filtering will not be used. + +@@if (igxName === 'IgxGrid') { +```html + + ... + +``` + +```typescript +public columnValuesStrategy = (column: IgxColumnComponent, + columnExprTree: IFilteringExpressionsTree, + done: (uniqueValues: any[]) => void) => { + // Get specific column data. + this.remoteValuesService.getColumnData(column, columnExprTree, uniqueValues => done(uniqueValues)); +} +``` + +
+ +
+
+
+ +
+} +@@if (igxName === 'IgxTreeGrid') { +```html + + ... + +``` + +```typescript +public columnValuesStrategy = (column: IgxColumnComponent, + columnExprTree: IFilteringExpressionsTree, + done: (uniqueValues: any[]) => void) => { + // Get specific column data. + this.remoteValuesService.getColumnData(column, columnExprTree, uniqueValues => done(uniqueValues)); +} +``` + +
+ +
+
+
+ +
+} +@@if (igxName === 'IgxHierarchicalGrid') { +```html + + ... + + ... + + +``` + +```typescript +public singersColumnValuesStrategy = (column: IgxColumnComponent, + columnExprTree: IFilteringExpressionsTree, + done: (uniqueValues: any[]) => void) => { +// Get specific column data for the singers. +this.remoteValuesService.getColumnData( + null, "Singers", column, columnExprTree, uniqueValues => done(uniqueValues)); +} + +public albumsColumnValuesStrategy = (column: IgxColumnComponent, + columnExprTree: IFilteringExpressionsTree, + done: (uniqueValues: any[]) => void) => { +// Get specific column data for the albums of a specific singer. +const parentRowId = (column.grid as any).foreignKey; +this.remoteValuesService.getColumnData( + parentRowId, "Albums", column, columnExprTree, uniqueValues => done(uniqueValues)); +} +``` + +
+ +
+
+
+ +
+} + +In order to provide a custom loading template for the excel style filtering, we can use the `igxExcelStyleLoading` directive: + +```html +<@@igSelector [data]="data" [filterMode]="'excelStyleFilter'" [uniqueColumnValuesStrategy]="columnValuesStrategy"> + ... + + Loading ... + + +``` + ### API リファレンス