Filtering data in Dependent Dropdowns

Help Requests
1

I have a dropdown and a button, on button click I add another row with same dropdown and so on, these dropdowns are bound to the same data.

I need to make sure that user does not see the selected item in other dropdowns.

I am using repeater with filter to filter the dropdown data, its working fine, but it only filter the data for new dropdown which i am adding on button click.

I also want items to be updated in all dropdowns when selection changed in any dropdown, how do I do that???

1 Like
2

??? anyone tried this scenario

1 Like
3

Is this example https://codesandbox.io/s/aurelia-wysiwyd-template-k9h3e close to what you want to do?

1 Like
4

Thanks. yes, this is similar to what I want to do but problem is, in my case I do not have fixed number of dropdowns.

In this example there are 3 dropdowns but I can have n number. Any ideas?

1 Like
5

can you help give an example of how your setup + data might look like?

1 Like
6

I modified my code and provided you with the minimum code where the problem is.

<div>
  <div repeat.for="record of records" class="row col-xs-12">

    <div class="col-xs-3">
      <p><strong>System</strong></p>
      <select value.bind="records.key"  change.delegate="onChange()" style="width: 100%">
        <option model.bind="null">Choose...</option>
        <option repeat.for="system of systems |  filter: records" model.bind="system.id">${system.name} </option>
      </select>
    </div>
  
  </div>

  <div class="row">
    <button type="button" class="btn btn-primary btn-lg" click.trigger="addRecord()" >ADD </button>
  </div>
</div>

on add button click, record gets added to the “Records” Array and another row is displayed with same controls.

“Systems” array can have 1 - N number or records, which means user can add(click add button) up to N time, user should not be able to select same “System” in any row.

Hope that helps?

1 Like
7

I think you can use a signalable value converter: https://aurelia.io/docs/binding/value-converters#signalable-value-converters

The idea is to signal your filter (value converter) when the “System” dropdown selection is changed in any of the row. The value converter will then reevaluate the filter, and that should reflect the change for existing dropdowns as well.

Alternative:
I see this problem as a validation problem. I assume that every record should be unique in terms of selected “System” . If this assumption is true, then you can employ a custom validation rule (check for satisfies/satisfiesRule in https://aurelia.io/docs/plugins/validation#entity-validation) to check the entire records array for duplicate System value. If there is a duplicate value, your validation fails, and you show appropriate validation failure message to user. The advantage is that this gives the user flexibility to select a particular “System” value for a particular “record” (which was not the case if you filter out the previous selections already), and upon facing the validation failure, the user is free to choose a different value for a record. This is from my point of view is easy to implement (and less work for browser), and at the same time making the relation between record and system explicit (the intent is clear to the user).

2 Likes
9

Check this out

I still think the validation approach to be the cleaner solution though :slight_smile:

3 Likes
10

thanks a lot, i tried signalable value converter before posting the issue but had no luck. After looking at your sample I figured out the issue. I was not using the 3rd parameter(record) correctly, my selected value was going away every time the converter was called :).

Really appreciate your help, now that I have working solution, I will also try the second approach you suggested in you earlier post.

3 Likes