This is a migrated thread and some comments may be shown as answers.

Clear Combobox Filter

3 Answers 872 Views
ComboBox
This is a migrated thread and some comments may be shown as answers.
Eugene
Top achievements
Rank 1
Eugene asked on 01 Jun 2020, 05:56 PM

Is there a way to reset filter for combo box?

I have two comboboxes with filters. I want to reset filter for second combobox when value in first combo box is changed.

3 Answers, 1 is accepted

Sort by
0
Svetoslav Dimitrov
Telerik team
answered on 02 Jun 2020, 06:17 AM

Hello Eugene,

You could use the OnChange event (more information here: https://docs.telerik.com/blazor-ui/components/combobox/events#onchange) for the ComboBox which resets the value for the second ComboBox. In its event handler you can set the property to which the Value or @bind-Value is bound to null. I have created a short code snippet to illustrate that. You can find more examples of the core concept here: https://docs.telerik.com/blazor-ui/knowledge-base/dropdown-cascading

 

Selected value: @selectedValue
<br />

<TelerikComboBox Data="@myComboData" TextField="MyTextField" ValueField="MyValueField" @bind-Value="selectedValue"
                 OnChange="@OnChangeHandler"
                 Placeholder="Select an item..." ClearButton="true" Filterable="true">
</TelerikComboBox>

<br />

@SelectedValue
<br />

<TelerikComboBox Data="@Data"
                 Filterable="true"
                 Placeholder="Find product by typing part of its name"
                 @bind-Value="@SelectedValue" TextField="ProductName" ValueField="ProductId">
</TelerikComboBox>

@code {

    void OnChangeHandler(object input)
    {
        int userInput = (int)input;

        SelectedValue = null;
    }
    IEnumerable<MyDdlModel> myComboData = Enumerable.Range(1, 20).Select(x => new MyDdlModel { MyTextField = "item " + x, MyValueField = x });

    int selectedValue { get; set; } = 3; //usually the current value should come from the model data

    //in a real case, the model is usually in a separate file
    //the model type and value field type must be provided to the dropdpownlist
    public class MyDdlModel
    {
        public int MyValueField { get; set; }
        public string MyTextField { get; set; }
    }

    //second combo

    public List<Product> Data { get; set; }
    public int? SelectedValue { get; set; }

    protected override void OnInitialized()
    {
        List<Product> products = new List<Product>();
        for (int i = 0; i < 20; i++)
        {
            products.Add(new Product()
            {
                ProductId = i,
                ProductName = $"Product {i}"
            });
        }

        Data = products;
        base.OnInitialized();
    }

    public class Product
    {
        public int ProductId { get; set; }
        public string ProductName { get; set; }
    }
}

 

Regards,
Svetoslav Dimitrov
Progress Telerik

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
0
Eugene
Top achievements
Rank 1
answered on 02 Jun 2020, 05:15 PM

In this example filter doesn't show how to reset the filter. Let me give you more details.

let's modify your example a little bit, just method OnChangeHandler

void OnChangeHandler(object input)
{
    int userInput = (int)input;
 
    //select "related" item in products
 
    //simplified logic how to find related item (match by id)
    SelectedValue = userInput;
 
    StateHasChanged();
}

 

So when user select any value in first combobox it will select related product in second combobox. Works good.

Then do next: type "product 5" in second combobox (it will filter the list to one value) - pick value from the list. (now combobox2 filter is active)

Then try to change first combobox to any value - "select related product" logic is not working any more for any product that doesn't match filter criteria "product 5". Looks like combobox2 filter is still active and filtering out data source.

Even if user click "clear filter" button on second combobox - filter is still active. The only way to make this example works - type something in second combobox and erase what you typed to see unfiltered "combo list" - then filter is gone and example works.

I attached animated gif that shows what I just described.

What I am looking is - when user change value in first combobox - "clear filter" in second combobox and select related product.

Please advice,

Thanks Eugene

 

0
Svetoslav Dimitrov
Telerik team
answered on 10 Jun 2020, 07:22 AM

Hello Eugene,

After discussions with our Dev team we have discovered this to be a bug. What happens is that when Data and Value are populated, firstly our logic for clearing the Value is applied for example selectedValue is 0, than the Value is set and selectedValue = 2, the ComboBox displays that successfully, but the value printed on the view remains 0. 

That being said, I have created a Bug Report on our Feedback Portal (link here: https://feedback.telerik.com/blazor/1471160-selection-should-not-reset-value-on-data-change). I have given a Vote on your behalf and you can Follow it for email notifications.

As attached file, you can see two examples on how this should work when the bug is fixed.

Regards,
Svetoslav Dimitrov
Progress Telerik

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
Tags
ComboBox
Asked by
Eugene
Top achievements
Rank 1
Answers by
Svetoslav Dimitrov
Telerik team
Eugene
Top achievements
Rank 1
Share this question
or