2 repeaters updating/interacting with each other for a Multi-Select. (dropdown + pills)

repeater-widget
#1

Hi all,

So i’m trying to build a multi-select dropdown with some autosuggest functionality. I am part of the way there, but can’t seem to figure out a couple of tricky pieces:

  1. The “X” inside the pills that appear when a selection is made, clears all of the selections in the dropdown. I can’t seem to figure out how to get it to specifically deselect the pill that’s being removed. I have it working in one direction, where selecting in the dropdown makes the correct pill appear, but can’t get it to work in the other direction, where removing the pill deselects that specific option in the dropdown.

  2. The autosuggest does not retain the selected state as you type something else or try to make another selection. For example, if you select blue, but then type ‘b’ to maybe look for black, the blue now shows unselected again.

Here’s my file: Multi-Select.rp (73.7 KB)

Does anybody have any tips on how I can achieve these things?
Thank you in advance to anyone who takes the time to help!

-Danny

#2

Hi!

This is all fixable.

  • When you choose or unchoose the checkbox, update the Selected column to true or false
  • OnItemLoad, check the checkbox if Item.Selected is true. You don’t need to uncheck it, as it’s unchecked by default in the repeater row. Keep in mind every time the repeater redraws (e.g., as it does upon applying a filter) each repeater row returns to its default state and OnItemLoad runs again, so you must have OnItemLoad code to select the checkbox (just like you have code to set the text of the checkbox). This is also why, upon autosuggest, the checkboxes become unchecked, because applying a filter forces the repeater to redraw, and there is no OnItemLoad code to check it.
  • Because you have code in OnItemLoad that now checks the checkbox, do NOT do anything in the OnSelect or OnUnselect code of the checkbox.

Here are the changes I put into your file

  • Removed code from the selection-changed events of the checkbox
  • Added OnItemLoad code that selects the checkbox if Item.Selected is true.
  • Covered the checkbox with a hotspot and put all code in that hotspot
  • The hotspot, instead of directly checking the checkbox, instead toggles the value in the Selected column using ! Item.Selected, the ! meaning NOT, so true becomes not true (false) and vice-versa. Note that when you update a row, OnItemLoad runs, which in turn sets the checkbox appropriately.
  • The hotspot, after updating the list repeater, then updates the associated column in the other repeater using the new value of Item.Selected.
  • Initialized all values in the Selected column to false

I recently wrote a Medium article on the repeater that goes into painful detail on what exactly happens when the repeater redraws, and which events cause the repeater to redraw, that may help understand what’s going on with your setup.

Here is the updated file: Multi-Select.rp (71.6 KB)

Multi-select text input component
#3

Thank you! This worked perfectly for my needs.

closed #4

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.

2 Repeaters, Filtering with checkboxes