Making the LightSwitch Flip Switch Read-Only

The LightSwitch HTML Client provides the jQuery Mobile Flip Switch control for use with True/False, Yes/No, and other boolean values.  However, there is no corresponding read-only “Viewer” control, unlike the case with Date Pickers, Phone editors, and many other specialized controls.

Here’s a quick tip – if you would like to make the Flip Switch read-only, use the following code in the PostRender method:

setTimeout(function () {
$(element).find("select").slider("disable");
$(element).find("div").removeClass("ui-disabled");
}, 0);

We have to wrap the code in a timeout because the Flip Switch hasn’t been initialized when the postRender fires.  The removeClass call is to prevent the styling from looking disabled (dimmed out) – if you prefer the disabled look, just leave that line out.

4 thoughts on “Making the LightSwitch Flip Switch Read-Only

    • Because it’s contained in a panel which hasn’t yet been opened, the slider probably hasn’t been rendered yet by jQuery Mobile when its postRender event fires. So you’ll probably have to change the code so that it runs _after_ the panel is rendered. A good place might be after the code that opens the panel.

      As an example, you might have something like this:


      var myFlipSwitch;

      myapp.BrowseCustomers.Customer_ItemTap_execute = function (screen) {
      $('#ItemDetailsPanel').panel('open');
      $(myFlipSwitch).find("select").slider("disable");
      $(myFlipSwitch).find("div").removeClass("ui-disabled");
      };

      myapp.BrowseCustomers.IsIt_postRender = function (element, contentItem) {
      myFlipSwitch = element;
      };

Comments are closed.