Skip to content

865221: Add documentation for Filter feature. #3947

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.

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 6 commits into
base: development
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
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
10 changes: 9 additions & 1 deletion blazor/datagrid/excel-like-filter.md
Original file line number Diff line number Diff line change
Expand Up @@ -826,6 +826,14 @@ public class OrderData
{% endhighlight %}
{% endtabs %}

## Add current selection to filter

By default, the CheckBox/Excel filter can only filter the selected items. If filtering is done multiple times on the same column, the previously filtered values in the column will be cleared. Now, it is possible to retain those previous values by using the "Add current selection to filter" option. This checkbox is displayed when data is searched in the search bar of the CheckBox or Excel filter type.

The following image describes the above mentioned behavior.

![AddCurrentSelectionToFilter in Blazor DataGrid](./images/blazor-datagrid-add-current-selection-to-filter.png)

{% previewsample "https://blazorplayground.syncfusion.com/embed/VDBfNLDBsuTLPqvx?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}

N> You can refer to our [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) feature tour page for its groundbreaking feature representations. You can also explore our [Blazor DataGrid example](https://blazor.syncfusion.com/demos/datagrid/overview?theme=bootstrap4) to understand how to present and manipulate data.
N> You can refer to our [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) feature tour page for its groundbreaking feature representations. You can also explore our [Blazor DataGrid example](https://blazor.syncfusion.com/demos/datagrid/overview?theme=bootstrap4) to understand how to present and manipulate data.
48 changes: 48 additions & 0 deletions blazor/datagrid/filtering.md
Original file line number Diff line number Diff line change
Expand Up @@ -461,15 +461,63 @@ Operator |Description |Supported Types
StartsWith |Checks whether the value begins with the specified value. |String
EndsWith |Checks whether the value ends with the specified value. |String
Contains |Checks whether the value contains the specified value. |String
DoesNotStartWith |Checks whether the value does not begin with the specified value. |String
DoesNotEndWith |Checks whether the value does not end with the specified value. |String
DoesNotContain |Checks whether the value does not contain the specified value. |String
Equal |Checks whether the value is equal to the specified value. |String | Number | Boolean | Date
NotEqual |Checks for values not equal to the specified value. |String | Number | Boolean | Date
GreaterThan |Checks whether the value is greater than the specified value. |Number | Date
GreaterThanOrEqual |Checks whether a value is greater than or equal to the specified value. |Number | Date
LessThan |Checks whether the value is less than the specified value. |Number | Date
LessThanOrEqual |Checks whether the value is less than or equal to the specified value. |Number | Date
IsNull |Returns the values that are null. |String | Number | Date
IsNotNull |Returns the values that are not null. |String | Number | Date
IsEmpty |Returns the values that are empty. |String
IsNotEmpty |Returns the values that are not empty. |String
between |Filter the values based on the range between the start and end specified values. |Number | Date

> By default, the **Operator** value is **Equal** in [Columns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridFilterSettings.html#Syncfusion_Blazor_Grids_GridFilterSettings_Columns) property of **GridFilterSettings** component.

## Wildcard and LIKE operator filter
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

check the casing of Like operator


**Wildcard** and **LIKE** filter operators filter value based on the given string pattern, and they apply to string-type columns. But it will work slightly differently.

### Wildcard filtering

The **Wildcard** filter can process one or more search patterns using the “*” symbol, retrieving values matching the specified patterns.

* The **Wildcard** filter option is supported for the DataGrid that has all search options.

Operator |Description
-----|-----|
a*b | Everything that starts with “a” and ends with “b”.
a* | Everything that starts with “a”.
*b | Everything that ends with “b”.
a | Everything that has an “a” in it.
ab* | Everything that has an “a” in it, followed by anything, followed by a “b”, followed by anything.

The following GIF represent a Wildcard operator filtering.

![Blazor DataGrid with Wildcard operator filtering](./images/blazor-datagrid-wildcard-operator-filtering.gif)

### LIKE filtering
The LIKE filter can process single search patterns using the “%” symbol, retrieving values matching the specified patterns. The following Grid features support LIKE filtering on string-type columns:

* Filter Menu
* Filter Bar using the [Operator](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.FilterSettings.html#Syncfusion_Blazor_Grids_FilterSettings_Operator) property within the [GridFilterSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_FilterSettings) configuration.
* Custom Filter of Excel filter type.

**For example**
Operator |Description
-----|-----|
%ab% | Returns all the value that are contains “ab” character.
ab% | Returns all the value that are ends with “ab” character.
%ab | Returns all the value that are starts with “ab” character.

The following GIF represent a LIKE operator filtering.

![Blazor DataGrid with LIKE operator filtering](./images/blazor-datagrid-like-operator-filtering.gif)

## Filtering with case sensitivity

The Syncfusion Blazor Grid provides the flexibility to enable or disable case sensitivity during filtering. This feature is useful when you want to control whether filtering operations should consider the case of characters. It can be achieved by using the [EnableCaseSensitivity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridFilterSettings.html#Syncfusion_Blazor_Grids_GridFilterSettings_EnableCaseSensitivity) property of [GridFilterSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_FilterSettings) component.
Expand Down
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.