Extending GridView by allowing Multiple Selections and Multi Column Sort

Multiple selections and changing selected row color:

Gridview provides built in support for single row selection. Selecting multiple rows from the Gridview control is not difficult at all, however it will be nice if we can change the background Color of the selected row and can easily identify multiple selected rows. To implement this idea I searched on the internet but unfortunately couldn’t find any easy and optimal way to accomplish the task. There can be many solutions to implement the same idea however I believe the approach I am using is very easy and efficient.

 The HTML below shows a Gridview control with Data from Northwind Employees table. 

 <asp:GridView ID="DataGV" runat="server"  AutoGenerateColumns="False" cellpadding="4"

  GridLines="Horizontal" BackColor="White" BorderColor="#336666" BorderStyle="Double"

  BorderWidth="3px" Font-Bold="True" Font-Names="Verdana" Font-Size="X-Small"  Height="1px"

  Width="100%" AllowSorting="True" HorizontalAlign="Center" DataKeyNames="EmployeeID" 

  DataSourceID="SqlDataSource1" AllowPaging="True" PageSize="50">

           <RowStyle BackColor="White" ForeColor="#333333" />

            <Columns>

               <asp:TemplateField HeaderText="Select">

                <ItemTemplate>

                               <asp:CheckBox ID="CheckBox1" runat="server"/>

      <asp:Label ID="LBLEmpID" runat="server" Text='<%# container.dataitem("EmployeeID") %>'

            Visible="false"></asp:Label>

                  </ItemTemplate>

                    <HeaderStyle HorizontalAlign="Left" />

                    <FooterStyle HorizontalAlign="Left" />

                </asp:TemplateField>                                  

                <asp:TemplateField HeaderText="Name"  SortExpression="LastName">

                    <HeaderStyle HorizontalAlign="Left" />

                    <ItemTemplate>

                        <asp:Label ID="LblName" runat="server" Text='<%# trim(Eval ("LastName")) + ", " + trim( Eval ("FirstName"))%>'></asp:Label>

                    </ItemTemplate>

                </asp:TemplateField>           

                  <asp:BoundField DataField="Title" HeaderText="Title" SortExpression="Title" >

                     <HeaderStyle HorizontalAlign="Left" />

                </asp:BoundField>                 

                        <asp:BoundField DataField="City" HeaderText="City" SortExpression="City" >

                     <HeaderStyle HorizontalAlign="Left" />

                </asp:BoundField>               

                <asp:TemplateField HeaderText="HireDate" SortExpression="HireDate">

                      <ItemStyle HorizontalAlign="Right" />

                    <HeaderStyle HorizontalAlign="Right" />

                    <ItemTemplate>

                        <asp:Label ID="LblHireDate" runat="server" Text='<%# Bind("HireDate", "{0:d}") %>'></asp:Label>

                    </ItemTemplate>                       

                </asp:TemplateField>     

              </Columns>  

            <HeaderStyle BackColor="White" Font-Bold="True" ForeColor="Black" Font-Size="Small" VerticalAlign="Top"/>

            <AlternatingRowStyle BackColor="#D6E3F7" />

                        <FooterStyle BackColor="#009900" Font-Bold="True" ForeColor="White" Font-Size="Small" HorizontalAlign="Right" />  

                   <PagerSettings PageButtonCount="30" Mode="NumericFirstLast" NextPageText="" PreviousPageText="" Position="TopAndBottom" />

            <PagerStyle BackColor="Silver" ForeColor="White" HorizontalAlign="Center" Font-Names="Verdana" Font-Size="Small" />  

        </asp:GridView>

Now all you need to do is to paste these 5 lines of code in RowDataBound evenet handler of your Gridview control.

If e.Row.RowType = DataControlRowType.DataRow Then    '1

Dim Chk As CheckBox = e.Row.FindControl("CheckBox1")    '2

Page.ClientScript.RegisterStartupScript(Me.GetType(), "MyScript", " function HighlightSelected(colorcheckboxselected, RowState) { if (colorcheckboxselected.checked) colorcheckboxselected.parentElement.parentElement.style.backgroundColor='#FFAA63'; else { if (RowState=='0') colorcheckboxselected.parentElement.parentElement.style.backgroundColor='white'; else colorcheckboxselected.parentElement.parentElement.style.backgroundColor='#D6E3F7'; } }", True)    '3

Chk.Attributes.Add("onclick", "HighlightSelected(this,'" + Convert.ToString(e.Row.RowState) + "' );")    '4

End If    '5

The code also accounts for Alternating Row. If you are not using Alternating Row in your Gridview, you can easily modify the code accordingly. 

Multi column sort:

Gridview provides built in support for single column sorting. In some situations multiple column sort can be very helpful for the users e.g. sorting employees by Hire Date and then by Last name or City name. Again implementing multiple columns sort is quite simple task.

I implemented multiple sort by Checkboxlist, Label and button controls. The label displays the sorting criteria user selects by checking/unchecking Checkboxes, and Click event handler of button implements the multiple sort.  I wrote the following code in button’s click event handler.

         If ViewState("Direction") = SortDirection.Ascending Then

            ViewState("Direction") = SortDirection.Descending

        Else

            ViewState("Direction") = SortDirection.Ascending

        End If

         DataGV.Sort(SortingLBL.Text, ViewState("Direction"))

I also wanted to show the sort direction in which the columns were sorted so I added the following code in Grridview Sorting event handler to change the text/value property of the button.

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here