shift select on table for multiple row selection

shift select on table for multiple row selection

  

Its fairly common on lists (such as on outlook) to be able to click on a row of a table (or a check box on the row) and then hold down shift and click on a row above/below it to select all the rows in between.  Is there a way to detect or otherwise handle a shift click onto a table item such as a check box?

Solution

Hello Jason,


I'm not aware of this being possible "out of the box", and I didn't found a component that would replace the table to do that.


A possible solution would be to use jQuery to intercept the shift+click:

$(selector).click(function(event) {
    if (event.shiftKey) {
        //....
    } 
});


Where the 'selector' would be the <tr></tr> of the table line. The $(this).index() could be used inside to return the index of the row that was clicked.

Also, you would have to implement code to identify when the selection should be disabled, like when the user do some action or click without the shift pressed and so on.



Solution

Jason Herrington wrote:

Its fairly common on lists (such as on outlook) to be able to click on a row of a table (or a check box on the row) and then hold down shift and click on a row above/below it to select all the rows in between.  Is there a way to detect or otherwise handle a shift click onto a table item such as a check box?


Hi Jason,

Hope it helps,

http://jsfiddle.net/g8Rpe/