Skip to content

Commit 25d019e

Browse files
github-actions[bot]Tsvetomir-Hr
github-actions[bot]
and
Tsvetomir-Hr
authored
Merge grid-kb-custom-filtermenu-2595 into production (#2602)
* kb(Grid): add kb for refreshing a custom filter menu * chore: update example and apply suggested changes * chore: bold text with strong tag --------- Co-authored-by: Tsvetomir Hristov <[email protected]>
1 parent 2fc0fb8 commit 25d019e

File tree

1 file changed

+209
-0
lines changed

1 file changed

+209
-0
lines changed

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

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