[NoBrainer] Using JayData with jQuery select2 plugin in LightSwitch HTML

In this post I quickly describe how you can use the select2 plugin with LightSwitch HTML client and present data from ODATA sources via jaydata.

LightSwitch has builtin capabilities for selecting related entities via the ‘Modal Data Picker’ control. You can also have drop down or choice lists with static data, however they lack the convenient search and filter mechanisms which render them unusable with large data sets. Luckily there is a plugin called ‘select2’ that does enhance the standard select boxes with searching and other gimmicks for you. And the good thing is you can even combine it with jaydata to grab other data sources and have server side sorting and filtering applied without the hassle of coding ODATA REST calls manually.
So below you find a snippet which renders a ‘select2’ box and have jaydata query some data source and load it into the control. The search term from the ‘select2’ control is send over to jaydata which will pass it as a parameter to the ODATA service and have filtering applied on the server (it will generate a ‘$filter’ query string for you).
Grabbing the effectively selected data is then done via the “change” event and inserted into ‘contentItem.value’ (via grabSelectedValue() which is not shown here). And there you are – that’s all.

Note: ‘select2’ is not really jQuery mobile aware. So when using it with LightSwitch you have to define the control with ‘data-role: none’. Otherwise it will render in a pretty ugly way.

In case your browser does not render the Gist correctly you can view the code directly at: https://gist.github.com/dfch/f2d1df81136f1dff6b10.

Trackbacks

  1. […] can use this controller as a regular LightSwitch ODATA source, and even better in combination with select2 and jaydata to query user information on the fly. Configuration data is currently read from the web.config and […]

  2. […] use this controller with select2 and JayData as we already did in a different scenario described in [NoBrainer] Using JayData with jQuery select2 plugin in LightSwitch HTML. At this point: many thanks to Igor Vaynberg for this great […]

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: