Skip to content

Commit a2d6392

Browse files
svdimitryordan-mitevdimodi
authored
KB: Add a KB on programatically filtering a Grid column bound to bool? by the null values (#2270)
* docs(kb): add a kb for filtering a Grid column bound to a nullable bool by the null values * Update knowledge-base/grid-state-filter-nullable-bool.md Co-authored-by: Yordan <60105689+yordan-mitev@users.noreply.github.com> * Update knowledge-base/grid-state-filter-nullable-bool.md Co-authored-by: Yordan <60105689+yordan-mitev@users.noreply.github.com> * Update knowledge-base/grid-state-filter-nullable-bool.md Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com> * Update knowledge-base/grid-state-filter-nullable-bool.md Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com> * Update knowledge-base/grid-state-filter-nullable-bool.md Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com> * docs(kb): polish the example as feedback suggested * docs(kb): polishing * docs(kb): add steps for the solution * docs(kb): apply feedback * minor updates * polish Grid filter bool by null KB * polish Grid filter bool by null KB 2 * Update knowledge-base/grid-state-filter-nullable-bool.md --------- Co-authored-by: Yordan <60105689+yordan-mitev@users.noreply.github.com> Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com>
1 parent fb77b1a commit a2d6392

File tree

1 file changed

+125
-0
lines changed

1 file changed

+125
-0
lines changed

‎knowledge-base/grid-state-filter-nullable-bool.md

Lines changed: 125 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,125 @@
1+
---
2+
title: Filter Nullable Bool Grid Column by Null Value
3+
description: Learn how to filter Grid column bound to nullable boolean values programmatically. Discrover one of the many features of the Grid State.
4+
type: how-to
5+
page_title: How to Programatically Filter Nullable Bool Grid Column by Null Value
6+
slug: grid-kb-filter-nullable-bool
7+
tags: telerik, blazor, grid, filter, state
8+
res_type: kb
9+
ticketid: 1658561
10+
---
11+
12+
## Environment
13+
14+
<table>
15+
<tbody>
16+
<tr>
17+
<td>Product</td>
18+
<td>Grid for Blazor <br /> TreeList for Blazor</td>
19+
</tr>
20+
</tbody>
21+
</table>
22+
23+
## Description
24+
25+
This KB article explains how to programmatically filter a Grid column bound to a `bool?` by the `null` values.
26+
27+
## Solution
28+
29+
To filter a Grid column bound to a `bool?` by the `null` values:
30+
31+
1. Get the current [Grid state]({%slug grid-state%}).
32+
1. Create a `CompositeFilterDescriptor` for the desired column. Add a child [`FilterDescriptor`]({%slug components/grid/filtering%}) with an `Operator` property that is equal to `FilterOperator.IsNull`.
33+
1. Add the new `CompositeFilterDescriptor` to the `FilterDescriptors` property of the Grid state.
34+
1. Use the Grid `SetStateAsync` method to update the Grid state.
35+
36+
Alternative options are to:
37+
38+
* Customize the Grid filter state in the [Grid `OnStateInit` event]({%slug grid-state%}#onstateinit).
39+
* [Use a Grid filter template to enable filtering by `null` from the Grid's UI]({%slug grid-kb-filterrow-bool-customization%}).
40+
41+
>caption Fitler bool? Grid column by null
42+
43+
````CSHTML
44+
@using Telerik.DataSource
45+
46+
<TelerikButton ThemeColor="@ThemeConstants.Button.ThemeColor.Primary"
47+
OnClick="@SetGridFilter">Filter On Leave By Null</TelerikButton>
48+
49+
<TelerikGrid @ref="@GridRef"
50+
Data="@GridData"
51+
Pageable="true"
52+
FilterMode="@GridFilterMode.FilterMenu"
53+
Height="400px">
54+
<GridColumns>
55+
<GridColumn Field="@(nameof(SampleData.Id))" Width="120px" />
56+
<GridColumn Field="@(nameof(SampleData.Name))" Title="Employee Name" />
57+
<GridColumn Field="@(nameof(SampleData.Team))" />
58+
<GridColumn Field="@(nameof(SampleData.IsOnLeave))" Title="On Leave" />
59+
</GridColumns>
60+
</TelerikGrid>
61+
62+
@code {
63+
private TelerikGrid<SampleData>? GridRef { get; set; }
64+
65+
private List<SampleData> GridData { get; set; } = new();
66+
67+
private async Task SetGridFilter()
68+
{
69+
GridState<SampleData> currentState = GridRef!.GetState();
70+
71+
currentState.FilterDescriptors = new List<IFilterDescriptor>()
72+
{
73+
new CompositeFilterDescriptor()
74+
{
75+
FilterDescriptors = new FilterDescriptorCollection() {
76+
// Use the IsNull filter operator when filtering by null values.
77+
new FilterDescriptor()
78+
{
79+
Member = nameof(SampleData.IsOnLeave),
80+
MemberType = typeof(bool?),
81+
Operator = FilterOperator.IsNull
82+
}
83+
}
84+
}
85+
};
86+
87+
await GridRef.SetStateAsync(currentState);
88+
}
89+
90+
protected override void OnInitialized()
91+
{
92+
GridData = Enumerable.Range(1, 30).Select(x => new SampleData
93+
{
94+
Id = x,
95+
Name = $"Name {x}",
96+
Team = $"Team {x % 4 + 1}",
97+
IsOnLeave = GetRandomNullableBool(x)
98+
}).ToList();
99+
}
100+
101+
private bool? GetRandomNullableBool(int index)
102+
{
103+
if (index % 5 == 0)
104+
{
105+
return null;
106+
}
107+
108+
return Random.Shared.Next(2) == 0 ? false : true;
109+
}
110+
111+
public class SampleData
112+
{
113+
public int Id { get; set; }
114+
public string Name { get; set; } = string.Empty;
115+
public string Team { get; set; } = string.Empty;
116+
public bool? IsOnLeave { get; set; }
117+
public DateTime HireDate { get; set; }
118+
}
119+
}
120+
````
121+
122+
## See Also
123+
124+
* [FilterMenu: Filter From Code]({%slug grid-filter-menu%}#filter-from-code)
125+
* [Working with the Grid State]({%slug grid-state%})

0 commit comments

Comments
 (0)