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.

function searchData(svcUrl, data, searchTerm) {
var context = new LightSwitchApplication.ApplicationData({
name: 'oData',
oDataServiceHost: svcUrl
return context
.filter(function (entity) {
return entity.Name.startsWith(this.q);
}, { q: searchTerm })
.forEach(function (entity) {
data.results.push({ id: entity.Id, text: entity.Name });
function _addSelect2Control(svcUrl, $parentElement, $element, contentItem, options) {
try {
var items = { results : [] };
placeholder: options["placeholder"],
quietMillis: options["quietMillis"],
minimumInputLength: options["minimumInputLength"],
page_limit: options["page_limit"],
width: '90%',
query: function (query) {
items.length = 0;
var promise = searchData(svcUrl, items, query.term)
.then(function () {
dropdownCssClass: options["dropdownCssClass"]
.on("change", function (e) {
contentItem.value = getSelectedValues($parentElement);
} catch (e) {
console.log(e.message + " description: " + e.description);

In case your browser does not render the Gist correctly you can view the code directly at:


Leave a Reply

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

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

Facebook photo

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

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.