Here we are concerned with the behaviours of an <asp:GridView> as it relates to selection. This widget by default supports a lightweight selection system...but many people choose not to use it because of the way it looks. What it does is add an extra column to your grid with a hyperlink that says "select" for each row. This is a pretty gritty way to handle things; most users wish to allow for a selection click in any column, not just over a hyperlink. I will detail two different solutions. One in asp.net code-behind, and one in JQuery. The Asp.Net solution is preferable if your GridView has a manageable amount of rows (50-200) or paging; the JQuery solution has better performance on the client side and can manage thousands of records without slowdown.

For the asp solution, the first thing you are going to want to do is enable the OnSelectedIndexChanged event in your grid view's markup. This assures we can assign our event listener properly.

This code causes the OnSelectedIndexChanged postback event to be fired on each row's "onClick" event. The fact that it uses postbacks instead of everything on client side is why performance becomes an issue with many records.

Next, we are going to use a HiddenField as comma delimiter-ed buffer holding each of our selected rows. Go ahead and add

If Not selectionHolder.Value = "" And Not ctrlHeld And Not shiftHeld Then Dim count As Integer = 0 For Each Str As String In a If Not String.IsNullOrEmpty(Str) And Not count = 0 Then 'Str = Str.Remove(0, 1) Dim num As Integer = Integer.Parse(Str) If Not ctrlHeld Then gvList.Rows(num).BackColor = If(num Mod 2 = 0, ColorTranslator.FromHtml("#FFFFFF"), ColorTranslator.FromHtml("#FFFFd1")) gvList.Rows(num).ToolTip = "Click to select this row." End If End If count += 1 Next If Not ctrlHeld Then selectionHolder.Value = "" End If End If

If (shiftHeld) And a.Count > 0 Then Dim lastNum As Integer = Integer.Parse(a.Last) If (lastNum > gvList.SelectedIndex) Then For n As Integer = gvList.SelectedIndex To lastNum - 1 gvList.Rows(n).BackColor = ColorTranslator.FromHtml("#A1DCF2") gvList.Rows(n).ToolTip = String.Empty selectionHolder.Value += "," + n.ToString Next End If If (lastNum < gvList.SelectedIndex) Then For n As Integer = lastNum To gvList.SelectedIndex gvList.Rows(n).BackColor = ColorTranslator.FromHtml("#A1DCF2") gvList.Rows(n).ToolTip = String.Empty selectionHolder.Value += "," + n.ToString Next End If End If

and you are good! A suggestion would be to change the FromHtml BackColor to a Css class representing your selection.

Finally, here is the JQuery solution for the same thing. With this solution, you no longer need the OnSelectedIndexChanged event listener so remove it from your markup. Same with the OnRowDataBound. Instead, you want to assure your GridView has the ViewStateMode="Enabled" attribute set.

Next, you are going to want to include in your markup the appropriate references to JQuery if you don't have it already. Something like this in your header content:

Please note that you can remove the checkboxes in your application. They are redundant, but give the user an extra layer of control over their selection. If you want to have them, you need to make a column in your gridview have the checkboxes, something like this: <Columns>