Complex Filter for Drop Down List Options

[Lee]

 

I have a request for a group of dropdown lists with complex filtering in the lists. The issue is that they don't want any previously selected options to be erased when filtering. My actual list can have thousands of options but for the sake of example I'm going to make it shorter:
Let's say the lists are called "favorite fruit 1" and "favorite fruit 2". Someone already chose "Banana" in favorite fruit 1. Now they want to filter the options by "Color: Red" and "Fiber: above 4g". They want the selected option for favorite fruit 1 to remain "Banana" but the list of options available for favorite fruit 1 and 2 to both contain only fibrous red fruits. (Again, I over simplified it for example. This makes more sense when you have thousands of options). Is there a way to do this?

The layout would be something like this:

<select id="color"></select>
<select id="fiber"></select>

<select id="fruit1" value="1"></select> <!--Bananas is selected-->
<select id="fruit2"></select>

 

My dataSource would be something like this:

[
  {
    fruitId: 1,
    fruitName: "Banana",
    color: "Yellow",
    fiber: "below 4g",
    potassium: "high"
  },
  {
    fruitId: 2,
    fruitName: "Apple",
    color: "Red",
    fiber: "above 4g",
    potassium: "low"
  },
  ...
]

[Neli]

Hello Lee,

I am not sure that I understand the scenario correctly. However, as far as I understand the issue is that you need to filter the values in a DropDownList by multiple properties or by field different than the dataTextField. If this is the case I would suggest taking a look at the KnowledgeBase article linked below: 

- https://docs.telerik.com/kendo-ui/knowledge-base/dropdownlist-filter-multiple-properties

If this is not the exact issue could you please try to describe the steps I need to follow in the example linked here to simulate the scenario - https://dojo.telerik.com/@NeliK/AHUZiSib.

Looking forward to your reply. 

Regards,
Neli
Progress Telerik

[Lee]

Hello, here is a clearer picture of what I'm trying to achieve: Dojo

[Neli]

Hi Lee,

Thank you very much for the Dojo example.

Could you please also provide steps that we can follow to demonstrate the issue? For example - Don't lose the selected value banana (or any other selected value) when filtering but don't show it in the list unless it matches. - this is the default behavior in the component, thus I am not sure what is the expected customized behavior. When Banana is selected, the value will not be cleared or changed. Below is a screenshot that demonstrates that the Banana is still present while searching for 'apple'. It will not be cleared or changed also if the data is filtered in the rest of the DropDownLists. 

Could you please take a look at the Cascading DropDownList demo linked below and let me know if the functionality is close to what you are tyring to achieve?

- https://demos.telerik.com/kendo-ui/dropdownlist/cascadingdropdownlist

Regards,

Neli

[Lee]

The cascading dropdown list is close but still not exactly what Im looking for. To use that deno as an example, once a user selects a product, then changes an option above, the selected product should not disappear. Also, for that example to be like what I need, there would be 3 product boxes, all controlled by the same two filters.

Back in my fruit example, if one box contains banana, that selected value should not go away when they start playing with the filter dropdowns. It should only remove it from being displayed as an option in the list. The reason is they might want banana to be left alone but still need to select the other two fruits. Or, they might want to change all 3 fruits. We cant assume either way so we leave anything selected still selected while filtering the choices available. 

I Updated the Dojo. I hope that clarifies things.

[Neli]

Hi Lee,

Regarding the cascading DropDownLists - once a different item in the parent DroDownList is selected, the values in the child DropDownList wil be changed accodringly. Thus, it seems that the cascading DropDownList will not suits your requirements.

Regarding the scenario with your example, could you please let me know even in the example, at what steps the Banana dissapears on your side? As mentioned in my previous reply, the Banana item remain selected even if it is not in the list with the filtered items. it will be removed only after a different item is selected. It will also not be removed when the rest of the DropDownLists are filtered. Could you please confirm on your side in which DropDownList what filter you apply or what are the exacts steps so the 'Banana' goes away? We need to be able to replicate the exactly same behavior in order to try to find a solution to prevent it.

Regards,

Neli

[Lee]

The banana should not go away as the selected value until a user specifically chooses something else, however, while the options are filtered, it should not be displayed in the list as something to select. That means, if the user manually chooses Apple, they will not be able to switch back to banana while filtered but until they actually open the list and click, Apple, banana remains the value.

[Neli]

Hi Lee,

I am afraid that such behavior could not be achieved easily. When the dataSource is filtered it will display all relevant results including the already selected item (if it is a part of the filtered results).

The only possible option I could think of is if you try to find and hide the needed items according to the requirements of the application. In the Dojo linked here the selected item will be hidden from the list with the results - https://dojo.telerik.com/@NeliK/enAxICUL.

For demonstration purpose, you can comment the line for hiding the element and uncomment $(x).addClass('custom') that will only change the color of the text instead of hiding the element. 

However such an approach is not supported out-of-the-box and the exact logic will be up to you. 

I remain at your disposal in case you have additional questions.

Regards,

Neli