Skip to main content

jQuery multiselect widgets

While working on CrissCross I've experimented with various different jQuery MultiSelect widgets. That is, web page controls that let users easily select multiple items from a list - here's a quick round up:

Eric Hynds jQuery UI MultiSelect Widget

Description ... Demos ... GitHub

This one is rendered as a DropDown and I think overall its my favourite,  it has ThemeRoller support and there is an extra plugin that lets users do a search within the list. Here's what it looks like while 'dropped down':

Quasipartikel jQuery UI Multiselect

Description ... Blogpost ... GitHub

This one renders as a 'two listbox' layout and also has ThemeRoller support. Looks like this:

Odyniec selectList

Description ... Demos ... GitHub

This one has an ingenious design that makes it a lot more lightweight than the ones above.

With large lists (> 500 items) and slow browsers (IE6,IE7,IE8) the multiselects above can take a long time to render, simply because they are built by adding lots of components to the DOM. In some cases they will even hit the browsers javascript execution limit, which give the user one of those 'A script on this page is running slowly' messages. Although thats only a problem with large lists and outdated browsers, sometimes you have to support those.

The Odyniec selectList just adds a few simple components onto an existing Html Select element to make it into a multiselect - that means it takes much less time to render.

Basically, it adds an interactive list of chosen items under the original Select, like this:

LoopJ jQuery TokenInput

Description ... Demos ... GitHub

The TokenInput is a 'tokeniser' - you type a bit, it shows matching results and then you choose one. Then you type again, it shows matching results again, etc. This is the sort of control that is used for selecting 'tags', but it also works well as a general Multiselect if you have a very large number of items. Users dont have to scroll through the list, they just tap a few keys and then select.

The TokenInput can use a local source for the data (a javascript array) or a remote ajax source. Because it only renders the list items as they are needed, it also works well with large lists in browsers with slow javascript. It looks like this:


Popular posts from this blog

Copying data to Salesforce Sandboxes using TalenD

A common problem with Salesforce Developer Sandboxes is that they are blank. Really you're going to want some data in there, so there are various strategies for copying data from your live instance to the Sandbox. There are some paid-for solutions - SFXOrgData , Salesforce Partial Data Sandboxes - but if you've got a decent ETL tool you can build your own. There are a bunch of free ETL tools for Salesforce: JitterBit Data Loader is good for quick ad-hoc tasks but the free version makes it difficult to manage specific ETL projects or share projects with other users Pentaho Community Edition - an open source edition of the enterprise version Apatar was a free open source Salesforce ETL which still works but development seems to have stopped since 2011 TalenD Open Studio is an open source ETL tool For the task of copying data from live to a Sandbox, either Pentaho or TalenD Open Studio could be used, depending on preference. Here's a good comparison of the dif

SSRS multi-value parameters with less fail

SSRS supports multi-value parameters, which is nice, but there are a few issues with them. This is how I deal with them. Two of the problems with SSRS multi-value parameters are: You have to jump through a few hoops to get them to work with stored procedures The (Select All) option, as shown above The reason the (Select All) option is a problem is that it is a really inelegant way of saying 'this parameter does not matter to me'. If you have a list with hundreds of values, passing all of them as a default option just seems wrong. Also, if your report shows the user which items they selected, printing the whole list when they choose (Select All) is excessive. So in this post I'm going to show my particular way of: Jumping through the hoops to get Multi-Value params in a stored procedure Adding a single '--All--' value that the report interprets as meaning all the options. Getting Multi-Value params to work with Stored Procedures This is

Remote Desktop on High DPI screens

Scott Hanselman wrote a nice blog post back in January about some of the issues you might face running Windows on a High DPI screen like that of a Surface Pro or Lenova Yoga. I'm kindof mystified that he didn't mention Remote Desktop though because thats been the number one problem for me on High DPI screens. That said, if you remote into very recent Server OS's like Windows Server 2012 R2, then apparently Remote Desktop will sort out the DPI scaling automatically. Perhaps Scott hadn't noticed the Remote Desktop issue because he only remotes into Server 2012 R2. Certainly if I was Scott, I wouldn't remote into anything less than that. But, in practice, I regularly have to remote into Server 2008 machines and yes even Server 2003. If you do that from a high DPI screen, the remote desktop is rendered at regular pixel size, which makes everything tiny. Its hard to show screenshots of High DPI screens that correctly convey the pixel size, so I've photoshoppe