locked
Html client: Can I call "use read-only" controls programmatically? RRS feed

  • Question

  • Note that my question is not about settings the controls read-only, because this is answer succinctly by Dave Baker already here:

    http://social.msdn.microsoft.com/Forums/vstudio/en-US/a6d74c79-25ef-46fc-ab10-2852fe7c8ca1/ls-html-view-and-edit-screen?forum=lightswitch

    It makes textboxes read-only, and that's very useful,  but I want that a textbox is transformed into a label (which is done when you check "use read-only control" in the designer window).


    paul van bladel


    Friday, January 24, 2014 5:11 PM

Answers

  • I can't think of an obvious way to do this. The controls on the screen are created once. You would have to replace that element of the DOM with a different control and force a re-render. It might be doable, but I don't know of a straight forward property on the LS object model that will do it for you.

    Normally, if you don't have too many where download size comes into play, the way I have seen this done is to add both controls to the screen - one hidden and one visible - and then toggle between them.


    Patrick Baker (Visual Studio LightSwitch Test Lead)

    • Marked as answer by Angie Xu Friday, February 7, 2014 8:33 AM
    Friday, January 24, 2014 5:35 PM
    Moderator

All replies

  • I can't think of an obvious way to do this. The controls on the screen are created once. You would have to replace that element of the DOM with a different control and force a re-render. It might be doable, but I don't know of a straight forward property on the LS object model that will do it for you.

    Normally, if you don't have too many where download size comes into play, the way I have seen this done is to add both controls to the screen - one hidden and one visible - and then toggle between them.


    Patrick Baker (Visual Studio LightSwitch Test Lead)

    • Marked as answer by Angie Xu Friday, February 7, 2014 8:33 AM
    Friday, January 24, 2014 5:35 PM
    Moderator
  • LightSwitch's API for screen.findContentItem('myControl').isReadOnly adds several CSS classes and properties to make a control appear non-functional.  One of the CSS properties it uses called "pointer-events" is set to none, which in theory makes the control non-responsive to pointer clicks.  Pointer-events, unfortunately, is browser-finicky, won't suppress children, and doesn't work well with textbox inputs.

    It is easy to add in-line styling to inactivate a textbox, for instance:

    $('.ui-input-text').addClass('ui-disabled')
    .prop('disabled','true')
    .css('opacity','1.0');

    ..would disable all textbox inputs on the DOM (although you would probably do this on a more select basis), while cascading the ui-disabled CSS to make the control appear greyed-out.  Any other stylistic changes in addition to this would be appended to the .css() function. 

    Friday, January 24, 2014 8:03 PM