locked
LS2013 HTML Client - multiple Tap actions from a List item RRS feed

  • Question

  • I'm exploring ways to use the List control to display data where each list item contains multiple links as opposed to the entire list item being a single tap. Something like the following:

    In the above example the main list item should not allow tapping, but the [Summary] and [Details] anchors rendered as custom controls should instead allowing clicking.

    I've attempted a number of ways with no success:

    • .removeClass("ui-btn ui-btn-up-a") on the LI items in the postRender()
    • .prop("disabled", true).addClass("ui-state-disabled") on the LI items in the postRender()

    I must be missing something simple.... any ideas?

    Thanks in advance


    Regards, Xander.  mhinteractive.net/blog



    • Edited by novascape Thursday, August 1, 2013 4:47 AM changed title
    Thursday, August 1, 2013 4:27 AM

Answers

  • I ran into something that may be similar...  It won't follow an anchor link, but the click event for the anchor still works.  So in the render method for the anchor custom control, you can have something like:

    var link = $("<a>Details</a>");
    link.on("click", function() {
      alert("Aha!  Click event works!");
    });
    $(element).append(link);

    Thursday, August 22, 2013 8:46 PM

All replies

  • Actually, if I replace the Summary and Details anchors (custom controls) with Buttons then it works. This example gives you 3 x tap/click events:

    1. The main list item tap event
    2. A click event under the [Summary] button
    3. A click event under the [Detail] button

    Not sure how well it would work from a user perspective, but it does offer some options, probably needs more experimenting...


    Regards, Xander. mhinteractive.net/blog


    • Edited by novascape Thursday, August 1, 2013 8:46 AM formatting
    Thursday, August 1, 2013 4:38 AM
  • If you don't want the list item to be actionable, then just clear the Item Tap action property in the property sheet for the List control.

    Justin Anderson, LightSwitch Development Team

    Thursday, August 1, 2013 9:15 AM
    Moderator
  • I did try that, and although it clears the tap action so nothing happens, the list item still shows the select hand cursor when you mouse over and the anchors are not clickable. I guess it makes sense that the list item is still selectable when it does not have a tap action and that somehow overrides the anchors...

    So the only way to do this out of the box seems to be with buttons...


    Regards, Xander. My Blog

    Thursday, August 1, 2013 9:30 AM
  • I ran into something that may be similar...  It won't follow an anchor link, but the click event for the anchor still works.  So in the render method for the anchor custom control, you can have something like:

    var link = $("<a>Details</a>");
    link.on("click", function() {
      alert("Aha!  Click event works!");
    });
    $(element).append(link);

    Thursday, August 22, 2013 8:46 PM
  • I ran into something that may be similar...  It won't follow an anchor link, but the click event for the anchor still works.  So in the render method for the anchor custom control, you can have something like:

    var link = $("<a>Details</a>");
    link.on("click", function() {
      alert("Aha!  Click event works!");
    });
    $(element).append(link);


    That is slick, I like it :)

    Unleash the Power - Get the LightSwitch HTML Client book

    http://LightSwitchHelpWebsite.com

    Thursday, August 22, 2013 8:57 PM