locked
Change css style on text tap RRS feed

  • Question

  • I'm working on a HTML Client Lightswitch Project.

    I have a View Details Screen with several Text Controls representing a term in a contract. Each of them can have a couple of paragraphs describing things like "LaborResponsibility", "UnilateralRescission", "LiabilityLimitation", etc.

    In order to save some screen space, I'm handling each _postRender event to set their CSS properties "overflow", "text-overflow" and "white-space" so that their content only take one line and show ellipsis at the end.

    Now I want to handle the Item Tap event for each text so that I can toggle those CSS styles and see/hide the term's integral text on each tap.

    The problem is that, contrary to the post render event, where the handler function receives "element" and "contentItem" as parameters, the _Tap_Execute handler receives the entire "screen".

    How can I address the element being tapped so that I can change its style?

    Monday, January 27, 2014 5:23 PM

Answers

    • Marked as answer by João_Luiz Wednesday, January 29, 2014 1:28 PM
    Monday, January 27, 2014 8:54 PM
  • There ought to be a number of ways you could use jQuery to select the DOM node of a textbox in the Tap event.

    I would also suggest the following:

    In the user-customization.css file, let's add two CSS classes:

    .ui-textbox-expanded {
    white-space:pre-line;
    text-overflow:auto;
    overflow:none
    }
    
    .ui-textbox-collapsed {
    white-space:nowrap;
    text-overflow:ellipsis;
    overflow:hidden 
    }

    Then, in the postRender method:

    $(element).addClass('ui-textbox-expanded ui-textbox-collapsed');
    
    $(element).click(function() {
               $(this).toggleClass('ui-textbox-collapsed');
               });
               // textbox expands and collapses with mouse click 
    
    // alternatively:
    $(element).hover(function() { 
               $(this).toggleClass('ui-textbox-collapsed'); }, 
               function() {
                           $(this).toggleClass('ui-textbox-collapsed')
                }); // expand and collapse on mousein-mouseout

    • Marked as answer by João_Luiz Wednesday, January 29, 2014 1:28 PM
    Tuesday, January 28, 2014 2:38 PM

All replies

    • Marked as answer by João_Luiz Wednesday, January 29, 2014 1:28 PM
    Monday, January 27, 2014 8:54 PM
  • There ought to be a number of ways you could use jQuery to select the DOM node of a textbox in the Tap event.

    I would also suggest the following:

    In the user-customization.css file, let's add two CSS classes:

    .ui-textbox-expanded {
    white-space:pre-line;
    text-overflow:auto;
    overflow:none
    }
    
    .ui-textbox-collapsed {
    white-space:nowrap;
    text-overflow:ellipsis;
    overflow:hidden 
    }

    Then, in the postRender method:

    $(element).addClass('ui-textbox-expanded ui-textbox-collapsed');
    
    $(element).click(function() {
               $(this).toggleClass('ui-textbox-collapsed');
               });
               // textbox expands and collapses with mouse click 
    
    // alternatively:
    $(element).hover(function() { 
               $(this).toggleClass('ui-textbox-collapsed'); }, 
               function() {
                           $(this).toggleClass('ui-textbox-collapsed')
                }); // expand and collapse on mousein-mouseout

    • Marked as answer by João_Luiz Wednesday, January 29, 2014 1:28 PM
    Tuesday, January 28, 2014 2:38 PM
  • You guys are great; very good stuff here!

    By the way, ADefwebserver, I received your book on Lightswitch HTML Client, through Amazon, a couple of days ago. I still have not reached the end but I'm enjoying it very much. It is surely the most up to date on this slippery topic. I also have a pair of suggestions for a 2nd edition that I intend to send you via your site.

    I like both answers so far but, considering Lighswitch was – initially, at least – aimed at the "citizen developer" and their creators took the trouble of providing an Item Tap handling method for the Text Control, wouldn't there be an easier way to reach the tapped element from Item Tap?

    Tuesday, January 28, 2014 3:47 PM

  • I like both answers so far but, considering Lighswitch was – initially, at least – aimed at the "citizen developer" and their creators took the trouble of providing an Item Tap handling method for the Text Control, wouldn't there be an easier way to reach the tapped element from Item Tap?

    Not necessarily, citizen developer... In keeping with MVVM principles, the Item Tap_execute method is better used for imperative programming routines while the postRender is more suitable for declarative routines. Although jQuery is a hybrid of both, jQuery's effect of altering certain CSS classes of a DOM node emphasizes its declarative usage (as in this case).  This distinction is arbitrary to be sure, but programming in LightSwitch is just difficult enough to nudge the novice programmer into becoming more and more proficient.
    Tuesday, January 28, 2014 4:15 PM
  • These things really seem counter intuitive to me. I mean, so many clever work arounds, tweaks and squeezes... and that event handling function hanging there...

    Anyway, I'll try the declarative / imperative criteria and see if it helps me putting some "R" into this not that RAD tool.

    I have adopted LittleBobbyTables's solution im my prototype. Simple and effective. But I'm seriously considering the use of ADefwebserver's more visually appealing, though complex, solution if these UI ideas are approved and get into production.

    Thank you very much, guys.

    Wednesday, January 29, 2014 1:30 PM