You should do this in client side. There you must use JavaScript or JQuery along with CSS. And, you should know that a GridView
is ultimately converted to a HTML table in client side. Here's a tip for you to try out. Follow these steps.
Assumption - Each row in your GridView has a row number and a hiddenfield to indicate whether it's selected or not (You can easily do this when you load data).
Create two CSS classes named SelectedRow
and DefaultRow
(You may use any name you like for these classes).
When you load the table for the first time all rows should have the CSS class DefaultRow
and hidden field value set to 0 (or any value you prefer to indicate the rows are not selected).
Write JavaScript or JQuery to handle first row (TR) click (You won't press Shift at this stage) and change the CSS class of that row (TR) to SelectedRow
and the hidden field value to 1. And, save this first row number in a separate hidden field to easily identify the first row selected.
NOTE: In this same function you should set rest of the rows CSS class to DefaultRow
. This is just to clear all selections if the user just clicks without Shift key.
- Now. write JavaScript or JQuery to handle Shift + Click on HTML row and change the CSS class of that row (TR) and all other rows (+ or - based on the first row number) from first row selected (Row number you just saved in your hidden field) to
SelectedRow
. At this stage you should set all hidden field values of selected rows to 1.
Here's an example to handle Shift + Click event in JQuery
$(document).click(function(e) {
if (e.shiftKey) {
alert("shift+click")
}
});
- Now you can read your hidden field values from your code behind and do any processing you like on the selected rows.
Hope you understand the logic here. :)