Skip to content

Commit 91f0b02

Browse files
committed
docs(grid): updating the README for the grid
1 parent dd3a11c commit 91f0b02

File tree

1 file changed

+34
-20
lines changed
  • projects/igniteui-angular/grids/grid

1 file changed

+34
-20
lines changed

projects/igniteui-angular/grids/grid/README.md

Lines changed: 34 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ The grid is exported as as an `NgModule`, thus all you need to do in your applic
1919

2020
import { IgxGridModule } from 'igniteui-angular';
2121
// Or
22-
import { IgxGridModule } from 'igniteui-angular/grid';
22+
import { IgxGridModule } from 'igniteui-angular/grids/grid';
2323

2424
@NgModule({
2525
imports: [
@@ -31,12 +31,14 @@ import { IgxGridModule } from 'igniteui-angular/grid';
3131
export class AppModule {}
3232
```
3333

34-
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.
34+
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.
3535

3636
```typescript
37-
import { IgxGridComponent } from 'igniteui-angular/grid';
38-
// Or
39-
import { IgxGridComponent } from 'igniteui-angular'
37+
import { IgxGridComponent } from 'igniteui-angular/grids/grid';
38+
// Per-feature entry points (examples):
39+
// import { IgxPaginatorModule } from 'igniteui-angular/paginator';
40+
// import { IgxButtonModule } from 'igniteui-angular/button-group';
41+
// import { IgxIconModule } from 'igniteui-angular/icon';
4042
...
4143

4244
@ViewChild('myGrid', { read: IgxGridComponent })
@@ -377,27 +379,39 @@ Here is a list of all public methods exposed by **IgxGridColumnComponent**:
377379

378380
## Filtering Conditions
379381

380-
You will need to import the appropriate condition types from the `igniteui-angular` package.
382+
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.
381383

382384
```typescript
383385
import {
384-
STRING_FILTERS,
385-
NUMBER_FILTERS,
386-
DATE_FILTERS,
387-
BOOLEAN_FILTERS
388-
} from 'igniteui-angular/main';
386+
IgxStringFilteringOperand,
387+
IgxNumberFilteringOperand,
388+
IgxDateFilteringOperand,
389+
IgxBooleanFilteringOperand
390+
} from 'igniteui-angular';
391+
392+
// Example: quick filter a column (string contains)
393+
this.grid.filter('Name', 'John', IgxStringFilteringOperand.instance().condition('contains'));
394+
395+
// Example: number greater than
396+
this.grid.filter('Quantity', 10, IgxNumberFilteringOperand.instance().condition('greaterThan'));
397+
398+
// Clear filter
399+
this.grid.clearFilter('Name');
389400
```
390401

391-
### String types
402+
### Available condition names (common examples)
392403

393-
|Name|Signature|Description|
394-
|--- |--- |--- |
395-
|`contains`|`(target: string, searchVal: string, ignoreCase?: boolean)`|Returns true if the `target` contains the `searchVal`.|
396-
|`startsWith`|`(target: string, searchVal: string, ignoreCase?: boolean)`|Returns true if the `target` starts with the `searchVal`.|
397-
|`endsWith`|`(target: string, searchVal: string, ignoreCase?: boolean)`|Returns true if the `target` ends with the `searchVal`.|
398-
|`doesNotContain`|`(target: string, searchVal: string, ignoreCase?: boolean)`|Returns true if `searchVal` is not in `target`.|
399-
|`equals`|`(target: string, searchVal: string, ignoreCase?: boolean)`|Returns true if `searchVal` matches `target`.|
400-
|`doesNotEqual`|`(target: string, searchVal: string, ignoreCase?: boolean)`|Returns true if `searchVal` does not match `target`.|
404+
- String: `contains`, `startsWith`, `endsWith`, `doesNotContain`, `equals`, `doesNotEqual`, `empty`, `notEmpty`
405+
- Number: `equals`, `doesNotEqual`, `greaterThan`, `greaterThanOrEqualTo`, `lessThan`, `lessThanOrEqualTo`, `between`
406+
- Date: `equals`, `doesNotEqual`, `before`, `after`, `today`, `yesterday`, `thisMonth`
407+
- Boolean: `true`, `false`
408+
409+
Use them via the corresponding operand, for example:
410+
411+
```typescript
412+
const contains = IgxStringFilteringOperand.instance().condition('contains');
413+
this.grid.filter('Name', 'Ann', contains);
414+
```
401415
|`null`|`(target: any)`|Returns true if `target` is `null`.|
402416
|`notNull`|`(target: any)`|Returns true if `target` is not `null`.|
403417
|`empty`|`(target: any)`|Returns true if `target` is either `null`, `undefined` or a string of length 0.|

0 commit comments

Comments
 (0)