Multiselection WebListBox on touch devices (iPhone)

  1. 6 months ago

    Thomas T

    17 May 2019 Pre-Release Testers, Xojo Pro Europe (Germany, Munich)
    Edited 6 months ago

    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:

    content.addEventListener('touchend',this,false);

    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?

  2. Ralph A

    17 May 2019 Santa Monica, California
    Edited 6 months ago

    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.

  3. Thomas T

    17 May 2019 Pre-Release Testers, Xojo Pro Europe (Germany, Munich)

    Good idea, Ralph.

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

  4. Ralph A

    17 May 2019 Santa Monica, California

    @ThomasTempelmann Good idea, Ralph.

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

    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.

  5. Thomas T

    17 May 2019 Pre-Release Testers, Xojo Pro Europe (Germany, Munich)

    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.

  6. Ralph A

    17 May 2019 Santa Monica, California

    @ThomasTempelmann 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.

or Sign Up to reply!