Skip to content

Commit 1e40806

Browse files
kb(grid):added kb on how to pre-set checkbox filter on initial load (#587)
* kb(grid):added kb on how to pre-set checkbox filter on initial load * Update knowledge-base/grid-pre-select-checkbox-filter.md Co-authored-by: Dimo Dimov <[email protected]> * Update knowledge-base/grid-pre-select-checkbox-filter.md Co-authored-by: Dimo Dimov <[email protected]> * Update knowledge-base/grid-pre-select-checkbox-filter.md Co-authored-by: Dimo Dimov <[email protected]> * Update knowledge-base/grid-pre-select-checkbox-filter.md Co-authored-by: Dimo Dimov <[email protected]> * kb(grid):fixed steps Co-authored-by: Dimo Dimov <[email protected]>
1 parent 1492876 commit 1e40806

File tree

2 files changed

+85
-0
lines changed

2 files changed

+85
-0
lines changed
Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
---
2+
title: How to pre-set a checkbox filter with a filter descriptor?
3+
description:
4+
type: how-to
5+
page_title: How to pre-set a checkbox list filter using a filter descriptor?
6+
slug: grid-pre-select-checkbox-filter
7+
position:
8+
tags: grid,checkbox,filter
9+
ticketid: 1541980
10+
res_type: kb
11+
---
12+
13+
## Environment
14+
<table>
15+
<tbody>
16+
<tr>
17+
<td>Product</td>
18+
<td>Grid for Blazor</td>
19+
</tr>
20+
</tbody>
21+
</table>
22+
23+
24+
## Description
25+
How can I pre-set a checkbox filter using a filter descriptor? How to set checkbox filter on Grid first load? How can I statically specify the checkbox list content? How to set checkbox filter on the first initialization of the Grid?
26+
27+
## Solution
28+
To pre-select checkbox filter in the Grid using a filter descriptor:
29+
30+
1. Use the [OnStateInit](https://docs.telerik.com/blazor-ui/components/grid/state#events) event of the Grid.
31+
2. Create a new `GridState` instance.
32+
3. Add a new `CompositeFilterDescriptor` instance to the `FilterDescriptors` collection in the state.
33+
4. Apply the new state to the current Grid state.
34+
35+
>caption The result from the code snippet below.
36+
37+
![](images/grid-pre-select-checkbox-filter-screenshot.PNG)
38+
39+
````Razor
40+
@*Grid with pre-set checkbox filter on initial load.*@
41+
42+
<TelerikGrid Data="@MyData" FilterMode="@GridFilterMode.FilterMenu" FilterMenuType="@FilterMenuType.CheckBoxList"
43+
OnStateInit="@((GridStateEventArgs<SampleData> args) => OnStateInitHandler(args))">
44+
<GridColumns>
45+
<GridColumn Field="@(nameof(SampleData.Id))" Width="120px" />
46+
<GridColumn Field="@(nameof(SampleData.Name))" Title="Employee Name" />
47+
</GridColumns>
48+
</TelerikGrid>
49+
50+
@code {
51+
async Task OnStateInitHandler(GridStateEventArgs<SampleData> args)
52+
{
53+
var state = new GridState<SampleData>
54+
{
55+
FilterDescriptors = new List<Telerik.DataSource.FilterDescriptorBase>()
56+
{
57+
new Telerik.DataSource.CompositeFilterDescriptor()
58+
{
59+
FilterDescriptors = new Telerik.DataSource.FilterDescriptorCollection()
60+
{
61+
new Telerik.DataSource.FilterDescriptor() { Member = "Id", Value = 1, MemberType = typeof(int) },
62+
new Telerik.DataSource.FilterDescriptor() { Member = "Id", Value = 2, MemberType = typeof(int) },
63+
new Telerik.DataSource.FilterDescriptor() { Member = "Id", Value = 3, MemberType = typeof(int) },
64+
},
65+
LogicalOperator = Telerik.DataSource.FilterCompositionLogicalOperator.Or
66+
}
67+
},
68+
};
69+
70+
args.GridState = state;
71+
}
72+
73+
public IEnumerable<SampleData> MyData = Enumerable.Range(1, 30).Select(x => new SampleData
74+
{
75+
Id = x,
76+
Name = "name " + x,
77+
});
78+
79+
public class SampleData
80+
{
81+
public int Id { get; set; }
82+
public string Name { get; set; }
83+
}
84+
}
85+
````
Loading

0 commit comments

Comments
 (0)