Add the ability to select rows in a table – TableDragSelect

Screen Shot 2013-07-28 at 3.33.36 PMIn a project that I’m working on I needed to change a dialog box where users selected multiple items to accommodate multiple columns. The original dialog used a select element to display and select the items. At first I thought “Oh, this will be easy. I just add some HTML to the option elements to make them look like multiple columns and we’ll be good”. Of course nothing is ever that simple. The problem being that an option element can not contain HTML, only text. So that left me with replacing the select box with a table. The only problem with that is how do you select the rows in the table. The usual strategy is to insert a column of checkboxes to make the selections. That wasn’t acceptable in this case though as it was possible for the table to contain over 1000 items. Selecting with checkboxes would be a nightmare. What was needed was to be able to do selections in the table as you would in the select element. Dragging and selecting items and using the shift and ctrl/cmd keys to refine the selection. Auto scrolling of the list would also be nice to have. I did a search and couldn’t find any examples of anyone doing this. I did find a post on StackOverflow by August Lilleaas with some example code for selecting the cells in a table. This provided a good start on what I hoped to accomplish.

So I dove in and started chipping away at the required functions and finally got something that seemed to be pretty close to the functionality that I wanted. The shift/cmd/ctrl selection works fine as does the drag select. Auto scrolling is working but needs a little more work but is serviceable for now. So I put this out here in hopes that it will help someone else who might be looking to add this functionality to their project.

Click here to get the code on GitHub.

Leave a Reply