From 91f0b022f3c240207317e43c7d64041442968144 Mon Sep 17 00:00:00 2001 From: Konstantin Dinev Date: Mon, 1 Dec 2025 14:23:48 +0200 Subject: [PATCH 1/4] docs(grid): updating the README for the grid --- .../igniteui-angular/grids/grid/README.md | 54 ++++++++++++------- 1 file changed, 34 insertions(+), 20 deletions(-) diff --git a/projects/igniteui-angular/grids/grid/README.md b/projects/igniteui-angular/grids/grid/README.md index 71bbfaba920..0fed4be6c37 100644 --- a/projects/igniteui-angular/grids/grid/README.md +++ b/projects/igniteui-angular/grids/grid/README.md @@ -19,7 +19,7 @@ The grid is exported as as an `NgModule`, thus all you need to do in your applic import { IgxGridModule } from 'igniteui-angular'; // Or -import { IgxGridModule } from 'igniteui-angular/grid'; +import { IgxGridModule } from 'igniteui-angular/grids/grid'; @NgModule({ imports: [ @@ -31,12 +31,14 @@ import { IgxGridModule } from 'igniteui-angular/grid'; export class AppModule {} ``` -Each of the components, directives and helper classes in the _IgxGridModule_ can be imported either through the _grid_ sub-package or through the main bundle in _igniteui-angular_. While you don't need to import all of them to instantiate and use the grid, you usually will import them (or your editor will auto-import them for you) when declaring types that are part of the grid API. +Each of the components, directives and helper classes in the _IgxGridModule_ can be imported through the per-package entry points. Prefer subpath imports for optimal tree-shaking and smaller bundles. ```typescript -import { IgxGridComponent } from 'igniteui-angular/grid'; -// Or -import { IgxGridComponent } from 'igniteui-angular' +import { IgxGridComponent } from 'igniteui-angular/grids/grid'; +// Per-feature entry points (examples): +// import { IgxPaginatorModule } from 'igniteui-angular/paginator'; +// import { IgxButtonModule } from 'igniteui-angular/button-group'; +// import { IgxIconModule } from 'igniteui-angular/icon'; ... @ViewChild('myGrid', { read: IgxGridComponent }) @@ -377,27 +379,39 @@ Here is a list of all public methods exposed by **IgxGridColumnComponent**: ## Filtering Conditions -You will need to import the appropriate condition types from the `igniteui-angular` package. +Use the filtering operand classes to apply conditions programmatically. Import the operand that matches your column data type and use its built-in condition names. ```typescript import { - STRING_FILTERS, - NUMBER_FILTERS, - DATE_FILTERS, - BOOLEAN_FILTERS -} from 'igniteui-angular/main'; + IgxStringFilteringOperand, + IgxNumberFilteringOperand, + IgxDateFilteringOperand, + IgxBooleanFilteringOperand +} from 'igniteui-angular'; + +// Example: quick filter a column (string contains) +this.grid.filter('Name', 'John', IgxStringFilteringOperand.instance().condition('contains')); + +// Example: number greater than +this.grid.filter('Quantity', 10, IgxNumberFilteringOperand.instance().condition('greaterThan')); + +// Clear filter +this.grid.clearFilter('Name'); ``` -### String types +### Available condition names (common examples) -|Name|Signature|Description| -|--- |--- |--- | -|`contains`|`(target: string, searchVal: string, ignoreCase?: boolean)`|Returns true if the `target` contains the `searchVal`.| -|`startsWith`|`(target: string, searchVal: string, ignoreCase?: boolean)`|Returns true if the `target` starts with the `searchVal`.| -|`endsWith`|`(target: string, searchVal: string, ignoreCase?: boolean)`|Returns true if the `target` ends with the `searchVal`.| -|`doesNotContain`|`(target: string, searchVal: string, ignoreCase?: boolean)`|Returns true if `searchVal` is not in `target`.| -|`equals`|`(target: string, searchVal: string, ignoreCase?: boolean)`|Returns true if `searchVal` matches `target`.| -|`doesNotEqual`|`(target: string, searchVal: string, ignoreCase?: boolean)`|Returns true if `searchVal` does not match `target`.| +- String: `contains`, `startsWith`, `endsWith`, `doesNotContain`, `equals`, `doesNotEqual`, `empty`, `notEmpty` +- Number: `equals`, `doesNotEqual`, `greaterThan`, `greaterThanOrEqualTo`, `lessThan`, `lessThanOrEqualTo`, `between` +- Date: `equals`, `doesNotEqual`, `before`, `after`, `today`, `yesterday`, `thisMonth` +- Boolean: `true`, `false` + +Use them via the corresponding operand, for example: + +```typescript +const contains = IgxStringFilteringOperand.instance().condition('contains'); +this.grid.filter('Name', 'Ann', contains); +``` |`null`|`(target: any)`|Returns true if `target` is `null`.| |`notNull`|`(target: any)`|Returns true if `target` is not `null`.| |`empty`|`(target: any)`|Returns true if `target` is either `null`, `undefined` or a string of length 0.| From 084d96b8fd8779671594131da961fa7be01b5938 Mon Sep 17 00:00:00 2001 From: Konstantin Dinev Date: Tue, 2 Dec 2025 11:16:47 +0200 Subject: [PATCH 2/4] Update projects/igniteui-angular/grids/grid/README.md Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> --- projects/igniteui-angular/grids/grid/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/projects/igniteui-angular/grids/grid/README.md b/projects/igniteui-angular/grids/grid/README.md index 0fed4be6c37..b57ddb1bdac 100644 --- a/projects/igniteui-angular/grids/grid/README.md +++ b/projects/igniteui-angular/grids/grid/README.md @@ -37,7 +37,7 @@ Each of the components, directives and helper classes in the _IgxGridModule_ can import { IgxGridComponent } from 'igniteui-angular/grids/grid'; // Per-feature entry points (examples): // import { IgxPaginatorModule } from 'igniteui-angular/paginator'; -// import { IgxButtonModule } from 'igniteui-angular/button-group'; +// import { IgxButtonModule } from 'igniteui-angular/button'; // import { IgxIconModule } from 'igniteui-angular/icon'; ... From 8b33b2393e0414359926da787635044987da487b Mon Sep 17 00:00:00 2001 From: Konstantin Dinev Date: Tue, 2 Dec 2025 11:38:50 +0200 Subject: [PATCH 3/4] chore(*): fixing table with conditions --- .../igniteui-angular/grids/grid/README.md | 22 +++++++++++-------- 1 file changed, 13 insertions(+), 9 deletions(-) diff --git a/projects/igniteui-angular/grids/grid/README.md b/projects/igniteui-angular/grids/grid/README.md index b57ddb1bdac..55d6a6c03ef 100644 --- a/projects/igniteui-angular/grids/grid/README.md +++ b/projects/igniteui-angular/grids/grid/README.md @@ -399,12 +399,20 @@ this.grid.filter('Quantity', 10, IgxNumberFilteringOperand.instance().condition( this.grid.clearFilter('Name'); ``` -### Available condition names (common examples) +### String types -- String: `contains`, `startsWith`, `endsWith`, `doesNotContain`, `equals`, `doesNotEqual`, `empty`, `notEmpty` -- Number: `equals`, `doesNotEqual`, `greaterThan`, `greaterThanOrEqualTo`, `lessThan`, `lessThanOrEqualTo`, `between` -- Date: `equals`, `doesNotEqual`, `before`, `after`, `today`, `yesterday`, `thisMonth` -- Boolean: `true`, `false` +|Name|Signature|Description| +|--- |--- |--- | +|`contains`|`(target: string, searchVal: string, ignoreCase?: boolean)`|Returns true if the `target` contains the `searchVal`.| +|`startsWith`|`(target: string, searchVal: string, ignoreCase?: boolean)`|Returns true if the `target` starts with the `searchVal`.| +|`endsWith`|`(target: string, searchVal: string, ignoreCase?: boolean)`|Returns true if the `target` ends with the `searchVal`.| +|`doesNotContain`|`(target: string, searchVal: string, ignoreCase?: boolean)`|Returns true if `searchVal` is not in `target`.| +|`equals`|`(target: string, searchVal: string, ignoreCase?: boolean)`|Returns true if `searchVal` matches `target`.| +|`doesNotEqual`|`(target: string, searchVal: string, ignoreCase?: boolean)`|Returns true if `searchVal` does not match `target`.| +|`null`|`(target: any)`|Returns true if `target` is `null`.| +|`notNull`|`(target: any)`|Returns true if `target` is not `null`.| +|`empty`|`(target: any)`|Returns true if `target` is either `null`, `undefined` or a string of length 0.| +|`notEmpty`|`(target: any)`|Returns true if `target` is not `null`, `undefined` or a string of length 0.| Use them via the corresponding operand, for example: @@ -412,10 +420,6 @@ Use them via the corresponding operand, for example: const contains = IgxStringFilteringOperand.instance().condition('contains'); this.grid.filter('Name', 'Ann', contains); ``` -|`null`|`(target: any)`|Returns true if `target` is `null`.| -|`notNull`|`(target: any)`|Returns true if `target` is not `null`.| -|`empty`|`(target: any)`|Returns true if `target` is either `null`, `undefined` or a string of length 0.| -|`notEmpty`|`(target: any)`|Returns true if `target` is not `null`, `undefined` or a string of length 0.| ### Number types From da583800b2101e164711b7b0f32ef68bf1348d21 Mon Sep 17 00:00:00 2001 From: Konstantin Dinev Date: Tue, 2 Dec 2025 15:11:42 +0200 Subject: [PATCH 4/4] Update projects/igniteui-angular/grids/grid/README.md --- projects/igniteui-angular/grids/grid/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/projects/igniteui-angular/grids/grid/README.md b/projects/igniteui-angular/grids/grid/README.md index 55d6a6c03ef..ded963893d6 100644 --- a/projects/igniteui-angular/grids/grid/README.md +++ b/projects/igniteui-angular/grids/grid/README.md @@ -387,7 +387,7 @@ import { IgxNumberFilteringOperand, IgxDateFilteringOperand, IgxBooleanFilteringOperand -} from 'igniteui-angular'; +} from 'igniteui-angular/core'; // Example: quick filter a column (string contains) this.grid.filter('Name', 'John', IgxStringFilteringOperand.instance().condition('contains'));