Skip to content

Commit 715b1fb

Browse files
Tsvetomir-HrTsvetomir-Hr
committed
kb(Grid): add kb for refreshing a custom filter menu
1 parent 469b130 commit 715b1fb

File tree

1 file changed

+201
-0
lines changed

1 file changed

+201
-0
lines changed

‎knowledge-base/grid-custom-filter-menu.md‎

Lines changed: 201 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,201 @@
1+
---
2+
title: How to Refresh Filter Menu Context After Programmatic Changes
3+
description: Learn how to refresh filter menu context after programmatic changes with a custom component
4+
type: how-to
5+
page_title: How to Refresh Filter Menu Context After Programmatic Changes
6+
slug: grid-kb-custom-filter-menu
7+
tags: grid, blazor, custom, filter, filtermenu
8+
res_type: kb
9+
ticketid: 1669381
10+
---
11+
12+
## Environment
13+
<table>
14+
<tbody>
15+
<tr>
16+
<td>Product</td>
17+
<td>Grid for Blazor</td>
18+
</tr>
19+
</tbody>
20+
</table>
21+
22+
## Description
23+
24+
When using the TelerikGrid in Blazor applications, it's common to implement custom `FilterMenu` for enhanced filtering capabilities. However, integrating an [AutoComplete]({%slug autocomplete-overview%}) component with `StringOperators` within a [`FilterMenuTemplate`]({%slug grid-templates-filter%}#filter-menu-template) for dynamic filtering based on user input does not work as expected. The AutoComplete component does not consider the selection from the dropdown list of `StringOperators` within the `FilterMenuTemplate`.
25+
26+
This knowledge base article also answers the following questions:
27+
- How to integrate AutoComplete with `StringOperators` in a TelerikGrid `FilterMenuTemplate`?
28+
- How to refresh a custom `FilterMenuTemplate` in TelerikGrid?
29+
- How to refresh a `FilterMenuTemplate` context after programmatic changes?
30+
31+
## Solution
32+
33+
To achieve the desired behavior, encapsulate the content of the `FilterMenuTemplate` in a custom component and refresh this component upon selection change in the dropdown list. Below is an example demonstrating this approach:
34+
35+
<div class="skip-repl"></div>
36+
````Home.razor
37+
@using Telerik.DataSource
38+
<TelerikGrid Data="@Countries"
39+
FilterMode="GridFilterMode.FilterMenu"
40+
PageSize="25">
41+
<GridColumns>
42+
<GridColumn Field="@(nameof(Country.CountryName))">
43+
<FilterMenuTemplate>
44+
<CustomFilterMenu @bind-FilterOperator="@FilterOperator"
45+
@bind-SelectedCountry="@SelectedCountry"
46+
Countries="@Countries"
47+
FilterOperators="@FilterOperators" />
48+
</FilterMenuTemplate>
49+
<FilterMenuButtonsTemplate Context="filterContext">
50+
<TelerikButton OnClick="@(async _ => await FilterAsync(filterContext))" Class="k-button-solid-primary">Filter</TelerikButton>
51+
<TelerikButton OnClick="@(async _ => await ClearFilterAsync(filterContext))">Clear</TelerikButton>
52+
</FilterMenuButtonsTemplate>
53+
</GridColumn>
54+
</GridColumns>
55+
</TelerikGrid>
56+
57+
@code {
58+
private IEnumerable<StringFilterOperator> FilterOperators { get; set; } = Enum.GetValues(typeof(StringFilterOperator)).Cast<StringFilterOperator>().ToList();
59+
private StringFilterOperator FilterOperator { get; set; } = StringFilterOperator.StartsWith;
60+
61+
private string SelectedCountry { get; set; } = null!;
62+
63+
private async Task FilterAsync(FilterMenuTemplateContext filterContext)
64+
{
65+
FilterHandler(filterContext.FilterDescriptor);
66+
await filterContext.FilterAsync();
67+
}
68+
69+
private async Task ClearFilterAsync(FilterMenuTemplateContext filterContext)
70+
{
71+
SelectedCountry = string.Empty;
72+
73+
FilterHandler(filterContext.FilterDescriptor);
74+
filterContext.FilterDescriptor.FilterDescriptors.Clear();
75+
await filterContext.ClearFilterAsync();
76+
}
77+
private void FilterHandler(CompositeFilterDescriptor filterDescriptor)
78+
{
79+
var model = string.Empty;
80+
object? value = null;
81+
82+
value = SelectedCountry;
83+
model = nameof(Country.CountryName);
84+
85+
filterDescriptor.FilterDescriptors.Clear();
86+
filterDescriptor.FilterDescriptors.Add(new FilterDescriptor(model, Telerik.DataSource.FilterOperator.IsEqualTo, value));
87+
}
88+
89+
private List<Country> Countries { get; set; } = new List<Country>()
90+
{
91+
new Country { Id = 1, CountryName = "Albania" },
92+
new Country { Id = 2, CountryName = "Andorra" },
93+
new Country { Id = 3, CountryName = "Armenia" },
94+
new Country { Id = 4, CountryName = "Austria" },
95+
new Country { Id = 5, CountryName = "Azerbaijan" },
96+
new Country { Id = 6, CountryName = "Belarus" },
97+
new Country { Id = 7, CountryName = "Belgium" },
98+
new Country { Id = 8, CountryName = "Bosnia & Herzegovina" },
99+
new Country { Id = 9, CountryName = "Bulgaria" },
100+
new Country { Id = 10, CountryName = "Croatia" },
101+
new Country { Id = 11, CountryName = "Cyprus" },
102+
new Country { Id = 12, CountryName = "Czech Republic" },
103+
new Country { Id = 13, CountryName = "Denmark" },
104+
new Country { Id = 14, CountryName = "Estonia" },
105+
new Country { Id = 15, CountryName = "Finland" },
106+
new Country { Id = 16, CountryName = "France" },
107+
new Country { Id = 17, CountryName = "Georgia" },
108+
new Country { Id = 18, CountryName = "Germany" },
109+
new Country { Id = 19, CountryName = "Greece" },
110+
new Country { Id = 20, CountryName = "Hungary" },
111+
new Country { Id = 21, CountryName = "Iceland" },
112+
new Country { Id = 22, CountryName = "Ireland" },
113+
new Country { Id = 23, CountryName = "Italy" },
114+
new Country { Id = 24, CountryName = "Kosovo" },
115+
new Country { Id = 25, CountryName = "Latvia" },
116+
new Country { Id = 26, CountryName = "Liechtenstein" },
117+
new Country { Id = 27, CountryName = "Lithuania" },
118+
new Country { Id = 28, CountryName = "Luxembourg" },
119+
new Country { Id = 29, CountryName = "Macedonia" },
120+
new Country { Id = 30, CountryName = "Malta" },
121+
new Country { Id = 31, CountryName = "Moldova" },
122+
new Country { Id = 32, CountryName = "Monaco" },
123+
new Country { Id = 33, CountryName = "Montenegro" },
124+
new Country { Id = 34, CountryName = "Netherlands" },
125+
new Country { Id = 35, CountryName = "Norway" },
126+
new Country { Id = 36, CountryName = "Poland" },
127+
new Country { Id = 37, CountryName = "Portugal" },
128+
new Country { Id = 38, CountryName = "Romania" },
129+
new Country { Id = 39, CountryName = "Russia" },
130+
new Country { Id = 40, CountryName = "San Marino" },
131+
new Country { Id = 41, CountryName = "Serbia" },
132+
new Country { Id = 42, CountryName = "Slovakia" },
133+
new Country { Id = 43, CountryName = "Slovenia" },
134+
new Country { Id = 44, CountryName = "Spain" },
135+
new Country { Id = 45, CountryName = "Sweden" },
136+
new Country { Id = 46, CountryName = "Switzerland" },
137+
new Country { Id = 47, CountryName = "Turkey" },
138+
new Country { Id = 48, CountryName = "Ukraine" },
139+
new Country { Id = 49, CountryName = "United Kingdom" },
140+
new Country { Id = 50, CountryName = "Vatican City" }
141+
};
142+
public class Country
143+
{
144+
public int Id { get; set; }
145+
public string CountryName { get; set; } = null!;
146+
}
147+
}
148+
````
149+
````CustomFilterMenu.razor
150+
@using Telerik.DataSource
151+
@using Microsoft.AspNetCore.Components
152+
@using static Home
153+
154+
Current filter operator: @FilterOperator
155+
156+
<TelerikDropDownList Value="@FilterOperator"
157+
ValueChanged="@( (StringFilterOperator newValue) => OnFilterOperatorChanged(newValue) )"
158+
Data="@FilterOperators"
159+
Width="160px">
160+
</TelerikDropDownList>
161+
162+
<TelerikAutoComplete ScrollMode="@DropDownScrollMode.Virtual"
163+
Value="@SelectedCountry"
164+
ValueChanged="@( (string selectedCountry) => HandleSelectedCountryChange(selectedCountry) )"
165+
TItem="Country"
166+
Data="@Countries"
167+
ValueField="CountryName"
168+
Width="300px"
169+
PageSize="20"
170+
Filterable="true"
171+
ItemHeight="35"
172+
FilterOperator="@FilterOperator">
173+
</TelerikAutoComplete>
174+
175+
@code {
176+
[Parameter] public EventCallback<StringFilterOperator> FilterOperatorChanged { get; set; }
177+
[Parameter] public EventCallback<string> SelectedCountryChanged { get; set; }
178+
[Parameter] public StringFilterOperator FilterOperator { get; set; }
179+
[Parameter] public string SelectedCountry { get; set; } = null!;
180+
[Parameter] public IEnumerable<Country> Countries { get; set; } = null!;
181+
[Parameter] public IEnumerable<StringFilterOperator> FilterOperators { get; set; } = null!;
182+
183+
private async Task OnFilterOperatorChanged(StringFilterOperator newValue)
184+
{
185+
FilterOperator = newValue;
186+
await FilterOperatorChanged.InvokeAsync(newValue);
187+
}
188+
189+
private async Task HandleSelectedCountryChange(string newValue)
190+
{
191+
SelectedCountry = newValue;
192+
await SelectedCountryChanged.InvokeAsync(newValue);
193+
}
194+
}
195+
````
196+
197+
## See Also
198+
199+
- [DropDownList Overview]({%slug components/dropdownlist/overview%})
200+
- [Grid FilterMenu Documentation]({%slug grid-filter-menu%})
201+
- [Feedback Portal - Expose a Method to Refresh the FilterMenu](https://feedback.telerik.com/blazor/1584289-expose-a-method-to-refresh-the-filtermenu-from-the-code)

0 commit comments

Comments
 (0)