Skip to content

Update filtering topic for React 19 #1514

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: vnext
Choose a base branch
from
Open

Update filtering topic for React 19 #1514

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
9f0f5d8
Update filtering topic for React v19
MarielaTihova May 5, 2025
a81f221
Resolving PR comments
MarielaTihova May 9, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
69 changes: 32 additions & 37 deletions doc/en/components/grids/_shared/filtering.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,14 +68,14 @@ Property `Filterable` enables you to specify the following options:
```

```tsx
<{ComponentSelector} data={this.nwindData} autoGenerate="false" ref={this.gridRef} allowFiltering="true">
<IgrColumn field="ProductName" dataType="String"></IgrColumn>
<IgrColumn field="UnitPrice" data-type="Number" filterable="false"></IgrColumn>
<{ComponentSelector} data={nwindData} autoGenerate={false} ref={gridRef} allowFiltering={true}>
<IgrColumn field="ProductName" dataType="string"></IgrColumn>
<IgrColumn field="UnitPrice" dataType="number" filterable={false}></IgrColumn>
</{ComponentSelector}>
```

<!-- ComponentStart: Grid, TreeGrid, HierarchicalGrid -->
To enable the [Advanced filtering](advanced-filtering.md) however, you need to set the `AllowAdvancedFiltering` input property to **true**.7
To enable the [Advanced filtering](advanced-filtering.md) however, you need to set the `AllowAdvancedFiltering` input property to **true**
<!-- ComponentEnd: Grid, TreeGrid, HierarchicalGrid -->

<!-- Angular -->
Expand All @@ -98,7 +98,7 @@ To enable the [Advanced filtering](advanced-filtering.md) however, you need to s

<!-- React -->
```tsx
<{ComponentSelector} data={nwindData} autoGenerate="false" ref={gridRef} allowAdvancedFiltering="true">
<{ComponentSelector} data={nwindData} autoGenerate={false} ref={gridRef} allowAdvancedFiltering={true}>
</{ComponentSelector}>
```
<!-- end: React -->
Expand Down Expand Up @@ -141,10 +141,10 @@ The filtering feature is enabled for the `{ComponentName}` component by setting

<!-- React -->
```tsx
<{ComponentSelector} autoGenerate="false" allowFiltering="true">
<IgrColumn field="ProductName" dataType="String"></IgrColumn>
<IgrColumn field="Price" dataType="Number"></IgrColumn>
<IgrColumn field="Discontinued" dataType="Boolean" filterable="false"></IgrColumn>
<{ComponentSelector} autoGenerate={false} allowFiltering={true}>
<IgrColumn field="ProductName" dataType="string"></IgrColumn>
<IgrColumn field="Price" dataType="number"></IgrColumn>
<IgrColumn field="Discontinued" dataType="boolean" filterable={false}></IgrColumn>
</{ComponentSelector}>
```
<!-- end: React -->
Expand Down Expand Up @@ -389,37 +389,32 @@ constructor() {
```

```tsx
private filteringExpressions: IgrFilteringExpressionsTree;

constructor(props: any) {
super(props);

const gridFilteringExpressionsTree = { operator: FilteringLogic.And } as IgrFilteringExpressionsTree;
const productFilteringExpressionsTree = {
fieldName: "ProductName",
conditionName: "contains",
ignoreCase: true,
searchVal: "Chai"
} as IgrFilteringExpression;

const quantityFilteringExpressionsTree = {
fieldName: "QuantityPerUnit",
conditionName: "contains",
ignoreCase: true,
searchVal: "1"
} as IgrFilteringExpression;

gridFilteringExpressionsTree.filteringOperands = [ productFilteringExpressionsTree, quantityFilteringExpressionsTree ];
this.filteringExpressions = gridFilteringExpressionsTree;
}
const filteringExpressions: IgrFilteringExpressionsTree = {
operator: FilteringLogic.And,
filteringOperands: [
{
fieldName: "ProductName",
conditionName: "contains",
ignoreCase: true,
searchVal: "Chai"
},
{
fieldName: "QuantityPerUnit",
conditionName: "contains",
ignoreCase: true,
searchVal: "1"
},
],
};

public render(): JSX.Element {
return (<{ComponentSelector}
filteringExpressionsTree={this.filteringExpressions}
return (
<{ComponentSelector}
filteringExpressionsTree={filteringExpressions}
аllowFiltering={true}
filterMode="quickFilter">
</{ComponentSelector}>);
}
</{ComponentSelector}>
);

```

### Filtering logic
Expand Down