Duplicated
Last Updated: 18 Oct 2024 10:13 by Andrea
Andrea
Created on: 16 Oct 2024 10:05
Category: Filter
Type: Bug Report
0
Issue in FilterField ValueTemplate when edit an existing filter

Hi, in a my application I save the filters to db, and I permit the user to edit this.
The ValueTemplate (in FilterField component) works perfectly on insert, but not when I update the value of an existing FilterDescriptor (the CompositeFilterDescriptor is not updated).
I've gone deeper, and I think that missing a call to FilterChanged method in the TelerikFilter (from the child).
When the TelerikFilter render a FilterField this set the FilterChanged method that is used any time that you change something in the filter, but with a custom component this call missing.

I think that you must expose the FilterChanged (that now is private) or in TelerikFilter, or better in in context (FilterFieldValueTemplateContext) that you use in the FilterField.ValueTemplate, to force the update in the parent component.

To test this, you can use your code in https://blazorrepl.telerik.com/wIuhlcYV35fUROFX47 and add a new FilterDescriptor in the OnInitialized method, or you can test it with the code below (based on your own).

thanks
--
Andrea Dottor
@using Telerik.Blazor.Components
@using Telerik.DataSource
@using Telerik.DataSource.Extensions
@{
    var firstFilter = (Telerik.DataSource.FilterDescriptor?)FilterValue?.FilterDescriptors.FirstOrDefault();

    if (firstFilter is not null)
    {
        <div>
            firstFilter value:  @firstFilter.Value
        </div>
    }
}
    


<TelerikFilter Value="@FilterValue" ValueChanged="@OnValueChanged">
    <FilterFields>
        @foreach (var f in FilterFields)
        {
            if (nameof(Food.Price) == f.Name)
            {
                <FilterField Name="@f.Name" Type="@f.Type" Label="@f.Label" >
                    <ValueTemplate>
                        <TelerikNumericTextBox Value="@((decimal?)context.FilterDescriptor.Value)"
                                               ValueChanged="@( (decimal? value) => NumericValueChanged(context.FilterDescriptor, value) )">
                        </TelerikNumericTextBox>
                    </ValueTemplate>
                </FilterField>
            }
            else
            {
                <FilterField Name="@f.Name" Type="@f.Type" Label="@f.Label" />
            }
        }
    </FilterFields>
</TelerikFilter>

<TelerikGrid Data="@GridData"
             Height="400px">
    <GridColumns>
        <GridColumn Field="@(nameof(Food.Id))" />
        <GridColumn Field="@(nameof(Food.Name))" />
        <GridColumn Field="@(nameof(Food.Price))" />
        <GridColumn Field="@(nameof(Food.IsAvailable))" />
    </GridColumns>
</TelerikGrid>



@code {
    private List<Food> GridData { get; set; } = new();

    private List<Food> InitialData { get; set; } = new();

    private CompositeFilterDescriptor FilterValue { get; set; } = new();

    private List<string> Suggestions { get; set; } = new() { "Pasta", "Burger", "Pizza", "Kebab", "Steak", "Ice Cream" };

    private void OnFilterValueChanged(FilterDescriptor fd, string value)
    {
        fd.Value = value;

        ProcessGridData();
    }

    private void NumericValueChanged(FilterDescriptor fd, decimal? value)
    {
        fd.Value = value;
        var a = FilterValue;


        ProcessGridData();
    }

    private void OnValueChanged(CompositeFilterDescriptor value)
    {

        FilterValue = value;
        ProcessGridData();
    }

    private void ProcessGridData()
    {
        CompositeFilterDescriptor filter = FilterValue;

        var dataSourceRequest = new DataSourceRequest { Filters = new List<IFilterDescriptor> { filter } };

        var dataSourceResult = InitialData.ToDataSourceResult(dataSourceRequest);

        GridData = dataSourceResult.Data.Cast<Food>().ToList();
    }

    protected override void OnInitialized()
    {
        FilterValue.FilterDescriptors.Add(new FilterDescriptor { Member = nameof(Food.Price), Operator = FilterOperator.IsEqualTo, Value = Convert.ToDecimal(0), MemberType = typeof(decimal) });
        LoadData();
        base.OnInitialized();
    }

    private void LoadData()
    {
        InitialData = new List<Food>
        {
            new Food { Id = 1, Name = "Pasta", Price = 13.99m, IsAvailable = true},
            new Food { Id = 2, Name = "Burger", Price = 11.99m, IsAvailable = false},
            new Food { Id = 3, Name = "Pizza", Price = 16.99m, IsAvailable = true},
            new Food { Id = 4, Name = "Kebab", Price = 9.99m, IsAvailable = true },
            new Food { Id = 5, Name = "Steak", Price = 22.99m, IsAvailable = false },
            new Food { Id = 6, Name = "Salad", Price = 6.99m, IsAvailable = true},
            new Food { Id = 6, Name = "Ice Cream", Price = 4.99m, IsAvailable = true }
        };

        ProcessGridData();
    }

    public class Food
    {
        public int Id { get; set; }
        public string Name { get; set; } = string.Empty;
        public decimal Price { get; set; }
        public bool IsAvailable { get; set; }
    }

    public List<MyFilterField> FilterFields = new List<MyFilterField>
    {
        new MyFilterField { Name = nameof(Food.Price), Type = typeof(double?), Label = "Price" },
        new MyFilterField { Name = nameof(Food.Id), Type = typeof(int), Label = "Id" },
        new MyFilterField { Name = nameof(Food.Name), Type = typeof(string), Label = "Name" },
        new MyFilterField { Name = nameof(Food.IsAvailable), Type = typeof(bool), Label = "Is Available" }
    };

    public class MyFilterField
    {
        required public string Name { get; set; }
        required public Type Type { get; set; }
        required public string Label { get; set; }
    }

}

 

Duplicated
This item is a duplicate of an already existing item. You can find the original item here:
2 comments
Andrea
Posted on: 18 Oct 2024 10:13
Hello Dimo,
the problem is just the same (I had searched for ValueTemaplate and did not find that message). In my post you can find some more technical details about the cause.
I add my vote on that bug.

For the moment I use a tricky/dirty solution, and I call the FilterChanged method via reflection...works but is not the best solution

ADMIN
Dimo
Posted on: 18 Oct 2024 10:03

Hello Andrea,

It looks like your scenario falls in the scope of this bug report. Let me know if I am missing something.

Regards,
Dimo
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.