From cf9b1da85147f78b690be7bfecbf03b6633b10d7 Mon Sep 17 00:00:00 2001 From: KB Bot Date: Fri, 28 Feb 2025 16:35:39 +0000 Subject: [PATCH 1/2] Added new kb article grid-dynamically-updating-filtermenutemplate-value --- ...cally-updating-filtermenutemplate-value.md | 208 ++++++++++++++++++ 1 file changed, 208 insertions(+) create mode 100644 knowledge-base/grid-dynamically-updating-filtermenutemplate-value.md diff --git a/knowledge-base/grid-dynamically-updating-filtermenutemplate-value.md b/knowledge-base/grid-dynamically-updating-filtermenutemplate-value.md new file mode 100644 index 0000000000..9d9ed9f4bb --- /dev/null +++ b/knowledge-base/grid-dynamically-updating-filtermenutemplate-value.md @@ -0,0 +1,208 @@ +--- +title: FilterMenuTemplate Not Updating After Dynamic Value Change +description: Learn how to refresh and update the displayed value within a FilterMenuTemplate when its value changes dynamically in Grid for Blazor. +type: troubleshooting +page_title: Refreshing FilterMenuTemplate to Reflect Dynamic Value Changes in Blazor Grid +slug: grid-kb-dynamically-updating-filtermenutemplate-value +tags: grid, blazor, filtermenutemplate, dynamic, update, refresh, value +res_type: kb +ticketid: 1677674 +--- + +## Environment + + + + + + + + +
ProductGrid for Blazor
+ +## Description + +I have a custom `FilterMenuTemplate` for a column where a slider is shown. Although filtering works as expected, the span within the `FilterMenuTemplate` that is supposed to show the current selected value does not update when the slider value changes. + +## Cause + +The [`FilterMenuTemplate`](slug:grid-templates-filter#filter-menu-template) does not refresh automatically when the value bound to a control within it, such as a slider, changes dynamically. + +## Solution + +To resolve this issue, encapsulate the content of the `FilterMenuTemplate` in a separate Razor component. Then, refresh this component upon any value change in the Slider. This approach ensures that the displayed value updates dynamically to reflect the current selection. Follow the steps below to implement this solution: + +1. Create a separate Razor component (for example, `CustomFilterMenu.razor`) that will contain the `FilterMenuTemplate` content, including the slider and the span displaying the selected value. + +2. In your `CustomFilterMenu.razor`, define the necessary parameters and logic to handle the value change and update the display. + +3. Use this component within the `FilterMenuTemplate` of the desired column in your Grid. + +4. Ensure that any value change in the slider triggers the component's refresh to update the displayed value accordingly. + +`````RAZOR +@using Telerik.DataSource + + + + + + + + + + + + + @foreach (var size in Sizes) + { +
+ + + +
+ } + + + + + +@code { + private List GridData { get; set; } + + private string[] Sizes = new string[] { "XS", "S", "M", "L", "XL", null }; + + private double SelectedPrice { get; set; } + + private void OnPriceChanged(double value, FilterMenuTemplateContext context) + { + SelectedPrice = value; + context.FilterDescriptor.FilterDescriptors.Clear(); + context.FilterDescriptor.FilterDescriptors.Add(new FilterDescriptor(nameof(Product.Price), FilterOperator.IsGreaterThanOrEqualTo, value)); + } + + private bool IsCheckboxInCurrentFilter(CompositeFilterDescriptor filterDescriptor, string size) + { + if (size == null) + { + foreach (FilterDescriptor item in filterDescriptor.FilterDescriptors) + { + if (item.Operator == FilterOperator.IsNull) + { + return true; + } + } + return false; + } + return filterDescriptor.FilterDescriptors.Select(f => (f as FilterDescriptor).Value?.ToString()).ToList().Contains(size); + } + + private void UpdateCheckedSizes(bool isChecked, string itemValue, FilterMenuTemplateContext context) + { + var compositeFilterDescriptor = context.FilterDescriptor; + compositeFilterDescriptor.LogicalOperator = FilterCompositionLogicalOperator.Or; + + if (!isChecked) + { + compositeFilterDescriptor.FilterDescriptors.Remove(compositeFilterDescriptor.FilterDescriptors.First(x => + { + var fd = x as FilterDescriptor; + if ((fd.Operator == FilterOperator.IsNull && itemValue == null) || + (fd.Operator == FilterOperator.IsEqualTo && fd.Value?.ToString() == itemValue)) + { + return true; + } + else + { + return false; + } + })); + } + else + { + compositeFilterDescriptor.FilterDescriptors.Add(new FilterDescriptor() + { + Member = nameof(Product.Size), + MemberType = typeof(string), + Operator = itemValue == null ? FilterOperator.IsNull : FilterOperator.IsEqualTo, + Value = itemValue + }); + } + } + + protected override void OnInitialized() + { + GridData = Enumerable.Range(1, 70).Select(x => new Product + { + Id = x, + Size = Sizes[x % Sizes.Length], + Name = $"Product {x}", + Price = x + }).ToList(); + + base.OnInitialized(); + } +} +````` +`````RAZOR CustomPriceFilter.razor +@using Telerik.DataSource + + + @SelectedPrice + + + + +@code { + [Parameter] public double SelectedPrice { get; set; } + [Parameter] public EventCallback SelectedPriceChanged { get; set; } + [Parameter] public FilterMenuTemplateContext Context { get; set; } = null!; + + private async Task OnPriceChanged(double newValue) + { + SelectedPrice = newValue; + Context.FilterDescriptor.FilterDescriptors.Clear(); + Context.FilterDescriptor.FilterDescriptors.Add(new FilterDescriptor(nameof(Product.Price), FilterOperator.IsGreaterThanOrEqualTo, newValue)); + await SelectedPriceChanged.InvokeAsync(newValue); + // await Context.FilterAsync(); + } +} +````` +`````RAZOR Product.cs +public class Product + { + public int Id { get; set; } + public string? Name { get; set; } + public string Size { get; set; } + public double Price { get; set; } + } +````` +## See Also + +- [Grid Overview](slug:grid-overview) +- [Filtering in Grid](slug:components/grid/filtering) From f5509e5c8a71c7ea88b67f8dbf9919b6366f986b Mon Sep 17 00:00:00 2001 From: Hristian Stefanov Date: Fri, 7 Mar 2025 16:09:08 +0200 Subject: [PATCH 2/2] chore(Grid): add suggestions as per comments --- ...cally-updating-filtermenutemplate-value.md | 24 +++++++++---------- 1 file changed, 11 insertions(+), 13 deletions(-) diff --git a/knowledge-base/grid-dynamically-updating-filtermenutemplate-value.md b/knowledge-base/grid-dynamically-updating-filtermenutemplate-value.md index 9d9ed9f4bb..979a7e1238 100644 --- a/knowledge-base/grid-dynamically-updating-filtermenutemplate-value.md +++ b/knowledge-base/grid-dynamically-updating-filtermenutemplate-value.md @@ -1,10 +1,10 @@ --- -title: FilterMenuTemplate Not Updating After Dynamic Value Change +title: FilterMenuTemplate Not Updating After Dynamic Value Change description: Learn how to refresh and update the displayed value within a FilterMenuTemplate when its value changes dynamically in Grid for Blazor. type: troubleshooting page_title: Refreshing FilterMenuTemplate to Reflect Dynamic Value Changes in Blazor Grid slug: grid-kb-dynamically-updating-filtermenutemplate-value -tags: grid, blazor, filtermenutemplate, dynamic, update, refresh, value +tags: grid, blazor, filter, filtermenutemplate res_type: kb ticketid: 1677674 --- @@ -22,7 +22,7 @@ ticketid: 1677674 ## Description -I have a custom `FilterMenuTemplate` for a column where a slider is shown. Although filtering works as expected, the span within the `FilterMenuTemplate` that is supposed to show the current selected value does not update when the slider value changes. +I have a custom `FilterMenuTemplate` for a column where a slider is shown. Although filtering works as expected, the `` within the `FilterMenuTemplate` that is supposed to show the current selected value does not update when the slider value changes. ## Cause @@ -51,8 +51,7 @@ To resolve this issue, encapsulate the content of the `FilterMenuTemplate` in a - @@ -189,20 +188,19 @@ To resolve this issue, encapsulate the content of the `FilterMenuTemplate` in a Context.FilterDescriptor.FilterDescriptors.Clear(); Context.FilterDescriptor.FilterDescriptors.Add(new FilterDescriptor(nameof(Product.Price), FilterOperator.IsGreaterThanOrEqualTo, newValue)); await SelectedPriceChanged.InvokeAsync(newValue); - // await Context.FilterAsync(); } } ````` `````RAZOR Product.cs public class Product - { - public int Id { get; set; } - public string? Name { get; set; } - public string Size { get; set; } - public double Price { get; set; } - } +{ + public int Id { get; set; } + public string? Name { get; set; } + public string? Size { get; set; } + public double Price { get; set; } +} ````` ## See Also -- [Grid Overview](slug:grid-overview) +- [Grid Filter Templates](slug:grid-templates-filter) - [Filtering in Grid](slug:components/grid/filtering)