Hold down [SHIFT] + click to select all boxes in between


#1

Hi,

This challenge is about selecting multiple items in a repeater. Please see attached file. What I am trying to achieve is to allow users to click a box, hold down [SHIFT] then click another box, all boxes in between should be selected as well. If they don’t hold down [SHIFT] , only the box being clicked is selected.

timegrid.rp (64.0 KB)

For example, if they clicked Monday 12 - 1 am and then hold down [SHIFT] key + click Wednesday 11 - 12 pm, all top 3 rows should be selected. If they clicked Monday 12 - 1 am and Wednesday 11 - 12 pm, only 2 boxes should be selected.

Thank you in advance for all of your expertise!

Jenny


#2

Hi!

This is a bit complicated, but I tried to document it.

Live sample

File: shift_click_to_select_range.rp (268.2 KB)


#3

Thank you for the detailed explanation. I am amazed at what you did! Thank you!


#4

Hi Joseph, I am wondering if it is possible to “remember” the selection so users can select multiple ranges. This is an image to simulate what it should look like:


#5

Hi J.o.sf!

One way to make it so that multiple selections can be made is to modify when the clearing behavior fires. Instead of having the selection clear when the repeater row’s OnClick action or the function_selectRange hotspot’s OnMove action is fired, you could create a “Clear” button to handle clearing of the selections. This should allow you to create multiple selections for the row, but still be able to clear all of the selections.

shift_click_to_select_range_edited.rp (270.4 KB)

I hope this helps!


#6

Most definitely! That’s ingenious! Thank you!


#7

I know this thread is over 4 years old but I’m posting this in case anyone else comes across it, I feel like this would be very helpful to others.

I needed something like this but the behavior wasn’t completely there, so I extended the logic so make the selection behave almost exactly like a file explorer like Windows File Explorer or Finder - shift can be used to grow and shrink the selection in both directions.

Additionally, selecting any item without holding shift will unselect everything else except the newly selected item. This can be disabled by removing the Fire Event interaction in highlighter in the clause CancelAllExceptClicked, but also remove the Set Selected: row in order for another click to deselect selected entries.
interaction_screenshot.

SelectableList.rp (65.4 KB)