You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardexpand all lines: components/grid/filter/checkboxlist.md
+18-23
Original file line number
Diff line number
Diff line change
@@ -12,16 +12,14 @@ position: 15
12
12
13
13
You can change the [filter menu]({%slug grid-filter-menu%}) to show a list of checkboxes with the distinct values from the data source. This lets your users filter records by a commonly found value quickly, and select multiple values with ease. The behavior is similar to Excel filtering.
14
14
15
-
## Basic Setup
15
+
## Enabling CheckBoxList Filtering
16
16
17
-
To enable the checkbox list filtering in the grid:
17
+
To enable the CheckBoxList filtering in the Telerik Grid for Blazor:
18
18
19
-
1. Set the `FilterMode` parameter of the grid to `Telerik.Blazor.GridFilterMode.FilterMenu`
20
-
1. Set the `FilterMenuType` parameter of the grid to `Telerik.Blazor.FilterMenuType.CheckBoxList`. It defaults to `Menu` for the default behavior.
19
+
1. Set the `FilterMode` parameter to `GridFilterMode.FilterMenu`
20
+
1. Set the `FilterMenuType` parameter to `FilterMenuType.CheckBoxList`. It defaults to `Menu` for the default behavior.
21
21
22
-
You can also change the filter menu behavior for a particular column - its own `FilterMenuType` parameter can be either `Menu` or `CheckBoxList` regardless of the main grid parameter. This lets you mix both modes as necessary for your application - you can either have all grid columns use the same mode with a single setting, or override it for a few columns that need the less common mode.
23
-
24
-
>caption CheckList filter in the grid
22
+
>caption CheckList filter in the DataGrid
25
23
26
24
````CSHTML
27
25
@* Checkbox List Filter for the Name, Team and Vacation columns, the ID column overrides it to Menu *@
@@ -65,24 +63,21 @@ You can also change the filter menu behavior for a particular column - its own `
65
63
}
66
64
````
67
65
68
-
>caption The result from the snippet above
69
-
70
-
71
-
72
-
73
66
## Custom Data
74
67
75
-
By default, the grid takes the `Distinct` values from its `Data` to populate the checkbox list filter for each field.
76
-
77
-
When using the [`OnRead` event]({%slug components/grid/manual-operations%}) to customize the data operations and/or perform them on the server/service, the grid will only have the current page of data. This will limit the options the user will see so you may want to provide the full list.
68
+
By default, the Telerik Grid takes the `Distinct` values from its `Data` to populate the checkbox list filter for each field.
78
69
79
-
To customize the checkbox list behavior, you should use the [filter menu template]({%slug grid-templates-filter%}#filter-menu-template). To help you with that, we have exposed the `TelerikCheckBoxListFilter` component that you can place inside the `FilterMenuTemplate` to get the default grid UI. It provides the following settings:
70
+
Using the [`OnRead` event]({%slug components/grid/manual-operations%}) to customize or perform data operations on the server/service limits the Grid to the current page of data, restricting user options. You may want to provide the full list.
80
71
81
-
*`FilterDescriptor` - the filter descriptor where filters will be populated when checkboxes are selected. The component creates the necessary descriptors for you and reads existing ones. This makes it easy to plug into the grid without any additional code through two-way binding (`@bind-FilterDescriptor="@context.FilterDescriptor"`)..
72
+
To customize the CheckBoxList behavior, use the [Filter Menu Template]({%slug grid-templates-filter%}#filter-menu-template). Place the `TelerikCheckBoxListFilter`component inside the `FilterMenuTemplate` to get the default CheckBoxList filtering UI. The template provides the following settings:
82
73
83
-
*`Data` - the data that will be rendered in the checkbox list. This is where you can supply the desired options to change what the grid displays.
*`Field` - the field from the data that will be used to take the `Distinct` options. It must match the name and type of the column field for which this filter is defined. This lets you use the same models that the grid uses, or to define smaller models to reduce the data you fetch for the filter lists.
76
+
| Parameter | Description |
77
+
|---------------------|------------------|
78
+
|`FilterDescriptor`| The filter descriptor where filters populate when checkboxes are selected. The component creates and reads descriptors, allowing easy Grid integration through two-way binding (`@bind-FilterDescriptor="@context.FilterDescriptor"`). |
79
+
|`Data`| The data that renders in the checkbox list. Use this parameter to supply the desired options to change what the Grid displays. |
80
+
|`Field`| The field from the data used for distinct options must match the column field's name and type. This allows using the same models as the Grid or defining smaller models to reduce data fetched for filter lists. |
86
81
87
82
>caption Provide all filtering options when using OnRead
88
83
@@ -92,7 +87,7 @@ To customize the checkbox list behavior, you should use the [filter menu templat
92
87
93
88
Filter by selecting a few names. Then filter by the Teams field (the fields that use application-provided data).<br />
94
89
You will see you have all the options for the teams and all the options for the names.<br />
95
-
Now try to filter by the On Vacation column - it will use only the current grid data and you may have only a single option,
90
+
Now try to filter by the On Vacation column - it will use only the current Grid data and you may have only a single option,
96
91
depending on how you filter the data so you may never be able to get back all values.
97
92
98
93
@@ -147,7 +142,7 @@ depending on how you filter the data so you may never be able to get back all va
147
142
148
143
// this is just one example of getting distinct values from the full data source
149
144
// in a real case you'd probably call your data service here instead
150
-
// or apply further logic (such as tie the returned data to the data the grid will have according to your business logic)
145
+
// or apply further logic (such as tie the returned data to the data the Grid will have according to your business logic)
151
146
List<TeamNameFilterOption> data = AllGridData.OrderBy(z => z.Team).Select(z => z.Team).
152
147
Distinct().Select(t => new TeamNameFilterOption { Team = t }).ToList();
153
148
@@ -175,7 +170,7 @@ depending on how you filter the data so you may never be able to get back all va
175
170
176
171
async Task OnReadHandler(GridReadEventArgs args)
177
172
{
178
-
//typical data retrieval for the grid
173
+
//typical data retrieval for the Grid
179
174
var filteredData = await AllGridData.ToDataSourceResultAsync(args.Request);
180
175
args.Data = filteredData.Data as IEnumerable<Employee>;
181
176
args.Total = filteredData.Total;
@@ -184,7 +179,7 @@ depending on how you filter the data so you may never be able to get back all va
Copy file name to clipboardexpand all lines: components/grid/filter/filter-menu.md
+16-30
Original file line number
Diff line number
Diff line change
@@ -10,28 +10,18 @@ position: 10
10
10
11
11
# Grid Filter Menu
12
12
13
-
One of the [filter modes of the grid]({%slug components/grid/filtering%}) is a popup menu with filter options that you can open from the column headers.
13
+
The `FilterMenu`filter mode renders a button in the column header. When you click the button, a popup with filtering options appears. The popup allows you to apply two filter criteria, choose a suitable filter operator and buttons to apply, or clear the filter.
14
14
15
-
In this article:
15
+
## Enabling Filter Menu
16
16
17
-
*[Basics](#basics)
18
-
*[Filter From Code](#filter-from-code)
19
-
*[Customization](#customization)
20
-
21
-
## Basics
22
-
23
-
To enable the filter menu, set the `FilterMode` property of the grid to `Telerik.Blazor.GridFilterMode.FilterMenu`.
24
-
25
-
The grid will render a button in the column header that you click to get a popup with filtering options. The popup lets you choose filter operator, filter criteria, to apply and clear the filter.
26
-
27
-
The filter is applied only upon a button click, not upon input change. This may improve performance if you use [manual CRUD operations]({%slug components/grid/manual-operations%}) by reducing the number of requests compared to using the [Filter Row]({%slug grid-filter-row%}).
17
+
Set the `FilterMode` parameter of the Telerik Grid to `GridFilterMode.FilterMenu`.
@@ -143,6 +120,15 @@ You can override the default Filter Row behavior for each column through the fol
143
120
}
144
121
````
145
122
123
+
124
+
### FilterMenuType
125
+
126
+
You can switch between [CheckBoxList]({%slug grid-checklist-filter%}) and a `Menu` filtering layout for a particular `<GridColumn>` by setting the `FilterMenuType` to `FilterMenuType.Menu` or `FilterMenuType.CheckBoxList`.
127
+
128
+
### CheckBoxList
129
+
130
+
You can render a list of checkboxes instead of the default menu layout. Read the [CheckBoxList Filtering article]({%slug grid-checklist-filter%}) for more information...
131
+
146
132
### Filter Menu Template
147
133
148
134
The template will let you have full control over the Filter Row rendering and behavior. See how you can implement it and explore the example in the [Filter Menu Template]({%slug grid-templates-filter%}#filter-menu-template) article.
Copy file name to clipboardexpand all lines: components/grid/filter/filter-row.md
+12-26
Original file line number
Diff line number
Diff line change
@@ -10,29 +10,22 @@ position: 5
10
10
11
11
# Grid Filter Row
12
12
13
-
One of the [filter modes of the grid]({%slug components/grid/filtering%}) is a row of filter elements below the column headers.
13
+
The FilterRow filtering mode renders a row below the column headers, providing a UI where you can fill in the filter criteria.
14
14
15
-
In this article:
15
+
The Grid applies the filters as the user types in the filtering input.
16
16
17
-
*[Basics](#basics)
18
-
*[Filter From Code](#filter-from-code)
19
-
*[Customization](#customization)
17
+
## Enabling Filter Row
20
18
19
+
Set the `FilterMode` parameter of the Telerik Grid to `GridFilterMode.FilterRow`.
21
20
22
-
## Basics
23
-
24
-
To enable the filter row set the `FilterMode` property of the grid to `Telerik.Blazor.GridFilterMode.FilterRow`.
25
-
26
-
The grid will render a row below the column headers with UI that you can use to fill in the filter criteria. You can type in the input to execute the default operator as you type or click a button to choose a different filter operator (like `Contains`, `GreaterThan`, and so on). Filters are applied as the user types in the inputs. Once you enter the filter criteria, the clear button will be enabled to allow you to reset the filter state.
27
-
28
-
The default filter operator is `Contains` for `string` columns and `IsEqualTo` for numbers and dates. Boolean columns display a filtering drop down that effectively combines the filter operator and value.
21
+
> The default filter operator is `Contains` for `string` columns and `IsEqualTo` for numbers and dates. Boolean columns display a filtering drop down that effectively combines the filter operator and value.
The template will let you have full control over the Filter Row rendering and behavior. See how you can implement it and explore the example in the [Filter Row Template]({%slug grid-templates-filter%}#filter-row-template) article.
0 commit comments