Multiselection WebListBox on touch devices (iPhone)

I need a listbox in my web app that lets the user select multiple rows.

While that works in a Desktop browser, by using modifier keys, this isn’t so easy on a touch pad device (iPhone, iPad etc.), as there are no modifier keys there.

How do others solve this?

My idea was to make every tap into the listbox invert that row’s selection state. But that’s not so easy because the Frontend deselects all other rows (which I do not want to happen) before my Event code is invoked to undo that. This would lead to a lot of flicker. Is there a way to modify the click handler of the Listbox to keep it from deselecting all rows?

I had a look at the framework.js. For touch devices, it installs special handlers:


The touchend function then checks for modifier keys.

var selectType; if (event.shiftKey === true) { selectType = 2; } else { if (Xojo.platform == 1) { if (event.metaKey === true) { selectType = 3; } else { selectType = 1; } } else { if (event.ctrlKey === true) { selectType = 3; } else { selectType = 1; } } }

If it sets selectType to 3, it means it’ll toggle the targeted row. That’s what I want to happen.

Now, if I could inject my own handler that intercepts Xojo’s touchend handler, modify the event to include the meta/ctrl keys, and then pass that on to Xojo’s handler, I’d get the effect I want.

But how would I program that? I am not experienced enough with JS to understand how I’d add another function and intercept the framework’s handler. Can that be done?

Instead of MultiSelection, what I do is have a CellClick change the value of a particular Cell, so it appears either Checked or Unchecked. The two values that Cell can have are the following:

[___] [ ? ]

I guess you can change the background of a row’s cells by looking at that cell value.

Good idea, Ralph.

The only ugly effect with that is that it also selects the row. I wonder if that can be prevented somehow.

[quote=436913:@Thomas Tempelmann]Good idea, Ralph.

The only ugly effect with that is that it also selects the row. I wonder if that can be prevented somehow.[/quote]
Perhaps you can use the WebListBox.Selected method to get around this, and not even bother with changing the background colors. Have each CellClick use that method for its row.

I could not get that working - setting the Selected(row) to false from within the CellClick event leaves the row selected regards on every other click into the cell.

I think that was why I eventually went with the fake checkbox method I mentioned above.