From 2f8d2a3dc74f58a7170b26a4bfbfe6d77c366d68 Mon Sep 17 00:00:00 2001 From: Tsvetomir Hristov <106250052+Tsvetomir-Hr@users.noreply.github.com> Date: Mon, 2 Dec 2024 13:50:43 +0200 Subject: [PATCH 1/3] kb(Grid): add kb for refreshing a custom filter menu --- knowledge-base/grid-custom-filter-menu.md | 201 ++++++++++++++++++++++ 1 file changed, 201 insertions(+) create mode 100644 knowledge-base/grid-custom-filter-menu.md diff --git a/knowledge-base/grid-custom-filter-menu.md b/knowledge-base/grid-custom-filter-menu.md new file mode 100644 index 0000000000..16600539a0 --- /dev/null +++ b/knowledge-base/grid-custom-filter-menu.md @@ -0,0 +1,201 @@ +--- +title: How to Refresh Filter Menu Context After Programmatic Changes +description: Learn how to refresh filter menu context after programmatic changes with a custom component +type: how-to +page_title: How to Refresh Filter Menu Context After Programmatic Changes +slug: grid-kb-custom-filter-menu +tags: grid, blazor, custom, filter, filtermenu +res_type: kb +ticketid: 1669381 +--- + +## Environment + + + + + + + +
ProductGrid for Blazor
+ +## Description + +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`. + +This knowledge base article also answers the following questions: +- How to integrate AutoComplete with `StringOperators` in a TelerikGrid `FilterMenuTemplate`? +- How to refresh a custom `FilterMenuTemplate` in TelerikGrid? +- How to refresh a `FilterMenuTemplate` context after programmatic changes? + +## Solution + +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: + +
+````Home.razor +@using Telerik.DataSource + + + + + + + + Filter + Clear + + + + + +@code { + private IEnumerable FilterOperators { get; set; } = Enum.GetValues(typeof(StringFilterOperator)).Cast().ToList(); + private StringFilterOperator FilterOperator { get; set; } = StringFilterOperator.StartsWith; + + private string SelectedCountry { get; set; } = null!; + + private async Task FilterAsync(FilterMenuTemplateContext filterContext) + { + FilterHandler(filterContext.FilterDescriptor); + await filterContext.FilterAsync(); + } + + private async Task ClearFilterAsync(FilterMenuTemplateContext filterContext) + { + SelectedCountry = string.Empty; + + FilterHandler(filterContext.FilterDescriptor); + filterContext.FilterDescriptor.FilterDescriptors.Clear(); + await filterContext.ClearFilterAsync(); + } + private void FilterHandler(CompositeFilterDescriptor filterDescriptor) + { + var model = string.Empty; + object? value = null; + + value = SelectedCountry; + model = nameof(Country.CountryName); + + filterDescriptor.FilterDescriptors.Clear(); + filterDescriptor.FilterDescriptors.Add(new FilterDescriptor(model, Telerik.DataSource.FilterOperator.IsEqualTo, value)); + } + + private List Countries { get; set; } = new List() +{ + new Country { Id = 1, CountryName = "Albania" }, + new Country { Id = 2, CountryName = "Andorra" }, + new Country { Id = 3, CountryName = "Armenia" }, + new Country { Id = 4, CountryName = "Austria" }, + new Country { Id = 5, CountryName = "Azerbaijan" }, + new Country { Id = 6, CountryName = "Belarus" }, + new Country { Id = 7, CountryName = "Belgium" }, + new Country { Id = 8, CountryName = "Bosnia & Herzegovina" }, + new Country { Id = 9, CountryName = "Bulgaria" }, + new Country { Id = 10, CountryName = "Croatia" }, + new Country { Id = 11, CountryName = "Cyprus" }, + new Country { Id = 12, CountryName = "Czech Republic" }, + new Country { Id = 13, CountryName = "Denmark" }, + new Country { Id = 14, CountryName = "Estonia" }, + new Country { Id = 15, CountryName = "Finland" }, + new Country { Id = 16, CountryName = "France" }, + new Country { Id = 17, CountryName = "Georgia" }, + new Country { Id = 18, CountryName = "Germany" }, + new Country { Id = 19, CountryName = "Greece" }, + new Country { Id = 20, CountryName = "Hungary" }, + new Country { Id = 21, CountryName = "Iceland" }, + new Country { Id = 22, CountryName = "Ireland" }, + new Country { Id = 23, CountryName = "Italy" }, + new Country { Id = 24, CountryName = "Kosovo" }, + new Country { Id = 25, CountryName = "Latvia" }, + new Country { Id = 26, CountryName = "Liechtenstein" }, + new Country { Id = 27, CountryName = "Lithuania" }, + new Country { Id = 28, CountryName = "Luxembourg" }, + new Country { Id = 29, CountryName = "Macedonia" }, + new Country { Id = 30, CountryName = "Malta" }, + new Country { Id = 31, CountryName = "Moldova" }, + new Country { Id = 32, CountryName = "Monaco" }, + new Country { Id = 33, CountryName = "Montenegro" }, + new Country { Id = 34, CountryName = "Netherlands" }, + new Country { Id = 35, CountryName = "Norway" }, + new Country { Id = 36, CountryName = "Poland" }, + new Country { Id = 37, CountryName = "Portugal" }, + new Country { Id = 38, CountryName = "Romania" }, + new Country { Id = 39, CountryName = "Russia" }, + new Country { Id = 40, CountryName = "San Marino" }, + new Country { Id = 41, CountryName = "Serbia" }, + new Country { Id = 42, CountryName = "Slovakia" }, + new Country { Id = 43, CountryName = "Slovenia" }, + new Country { Id = 44, CountryName = "Spain" }, + new Country { Id = 45, CountryName = "Sweden" }, + new Country { Id = 46, CountryName = "Switzerland" }, + new Country { Id = 47, CountryName = "Turkey" }, + new Country { Id = 48, CountryName = "Ukraine" }, + new Country { Id = 49, CountryName = "United Kingdom" }, + new Country { Id = 50, CountryName = "Vatican City" } +}; + public class Country + { + public int Id { get; set; } + public string CountryName { get; set; } = null!; + } +} +```` +````CustomFilterMenu.razor +@using Telerik.DataSource +@using Microsoft.AspNetCore.Components +@using static Home + +Current filter operator: @FilterOperator + + + + + + + +@code { + [Parameter] public EventCallback FilterOperatorChanged { get; set; } + [Parameter] public EventCallback SelectedCountryChanged { get; set; } + [Parameter] public StringFilterOperator FilterOperator { get; set; } + [Parameter] public string SelectedCountry { get; set; } = null!; + [Parameter] public IEnumerable Countries { get; set; } = null!; + [Parameter] public IEnumerable FilterOperators { get; set; } = null!; + + private async Task OnFilterOperatorChanged(StringFilterOperator newValue) + { + FilterOperator = newValue; + await FilterOperatorChanged.InvokeAsync(newValue); + } + + private async Task HandleSelectedCountryChange(string newValue) + { + SelectedCountry = newValue; + await SelectedCountryChanged.InvokeAsync(newValue); + } +} +```` + +## See Also + +- [DropDownList Overview]({%slug components/dropdownlist/overview%}) +- [Grid FilterMenu Documentation]({%slug grid-filter-menu%}) +- [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) From 48f8e9b8c842d8dd5391ac9e9331f8c2c1bd4946 Mon Sep 17 00:00:00 2001 From: Tsvetomir Hristov <106250052+Tsvetomir-Hr@users.noreply.github.com> Date: Mon, 2 Dec 2024 17:15:13 +0200 Subject: [PATCH 2/3] chore: update example and apply suggested changes --- knowledge-base/grid-custom-filter-menu.md | 40 ++++++++++++++--------- 1 file changed, 24 insertions(+), 16 deletions(-) diff --git a/knowledge-base/grid-custom-filter-menu.md b/knowledge-base/grid-custom-filter-menu.md index 16600539a0..7ffbd18359 100644 --- a/knowledge-base/grid-custom-filter-menu.md +++ b/knowledge-base/grid-custom-filter-menu.md @@ -1,10 +1,10 @@ --- -title: How to Refresh Filter Menu Context After Programmatic Changes +title: How to Refresh Filter Menu After Programmatic Changes description: Learn how to refresh filter menu context after programmatic changes with a custom component type: how-to -page_title: How to Refresh Filter Menu Context After Programmatic Changes +page_title: How to Refresh Filter Menu After Programmatic Changes slug: grid-kb-custom-filter-menu -tags: grid, blazor, custom, filter, filtermenu +tags: blazor, grid, filter, filtermenu res_type: kb ticketid: 1669381 --- @@ -21,20 +21,21 @@ ticketid: 1669381 ## Description -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`. +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). This knowledge base article also answers the following questions: - How to integrate AutoComplete with `StringOperators` in a TelerikGrid `FilterMenuTemplate`? -- How to refresh a custom `FilterMenuTemplate` in TelerikGrid? -- How to refresh a `FilterMenuTemplate` context after programmatic changes? +- How to refresh the contents of `FilterMenuTemplate` in a TelerikGrid? +- How to refresh a `FilterMenuTemplate` after programmatic changes? ## Solution -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: +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:
````Home.razor @using Telerik.DataSource + @@ -62,7 +63,7 @@ To achieve the desired behavior, encapsulate the content of the `FilterMenuTempl private async Task FilterAsync(FilterMenuTemplateContext filterContext) { - FilterHandler(filterContext.FilterDescriptor); + AddFilterDescriptor(filterContext.FilterDescriptor); await filterContext.FilterAsync(); } @@ -70,11 +71,11 @@ To achieve the desired behavior, encapsulate the content of the `FilterMenuTempl { SelectedCountry = string.Empty; - FilterHandler(filterContext.FilterDescriptor); + AddFilterDescriptor(filterContext.FilterDescriptor); filterContext.FilterDescriptor.FilterDescriptors.Clear(); await filterContext.ClearFilterAsync(); } - private void FilterHandler(CompositeFilterDescriptor filterDescriptor) + private void AddFilterDescriptor(CompositeFilterDescriptor filterDescriptor) { var model = string.Empty; object? value = null; @@ -151,33 +152,40 @@ To achieve the desired behavior, encapsulate the content of the `FilterMenuTempl @using Microsoft.AspNetCore.Components @using static Home -Current filter operator: @FilterOperator - + + Width="200px"> + + + + + + + @code { [Parameter] public EventCallback FilterOperatorChanged { get; set; } [Parameter] public EventCallback SelectedCountryChanged { get; set; } [Parameter] public StringFilterOperator FilterOperator { get; set; } - [Parameter] public string SelectedCountry { get; set; } = null!; - [Parameter] public IEnumerable Countries { get; set; } = null!; + [Parameter] public string SelectedCountry { get; set; } = string.Empty; + [Parameter] public IEnumerable Countries { get; set; } = Enumerable.Empty(); [Parameter] public IEnumerable FilterOperators { get; set; } = null!; private async Task OnFilterOperatorChanged(StringFilterOperator newValue) From a94c0ba155a78932d82967df7c442cb25ab81c61 Mon Sep 17 00:00:00 2001 From: Tsvetomir Hristov <106250052+Tsvetomir-Hr@users.noreply.github.com> Date: Tue, 3 Dec 2024 11:29:27 +0200 Subject: [PATCH 3/3] chore: bold text with strong tag --- knowledge-base/grid-custom-filter-menu.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/knowledge-base/grid-custom-filter-menu.md b/knowledge-base/grid-custom-filter-menu.md index 7ffbd18359..55578f22f0 100644 --- a/knowledge-base/grid-custom-filter-menu.md +++ b/knowledge-base/grid-custom-filter-menu.md @@ -152,7 +152,7 @@ To achieve the desired behavior, encapsulate the content of the `FilterMenuTempl @using Microsoft.AspNetCore.Components @using static Home - + - +