Click here to Skip to main content
11,431,844 members (64,512 online)
Click here to Skip to main content

Extending GridView by allowing Multiple Selections and Multi Column Sort

, 13 Jun 2006 CPOL
Rate this:
Please Sign up or sign in to vote.
Extending GridView by allowing Multiple Selections, changing Selected row color 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 event 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.

         If ViewState("Direction") Is Nothing Then
         ElseIf ViewState("Direction") = SortDirection.Ascending Then
            MultipleSortBtn.Value = "Sort Descending"
         Else
            MultipleSortBtn.Value = "Sort Ascending"
        End If

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Ali Khan (OKC)
Web Developer
United States United States
I work for Hertz Corporation as System Developer /Analyst and have exposure to various development environments, web applications, databases, along with information and project management techniques.

Comments and Discussions

 
QuestionHow to identify the value of the selected row in datagrid Pin
pistolpinoy27-Jun-11 15:47
memberpistolpinoy27-Jun-11 15:47 
GeneralIt works fine! Pin
ricpue1-Jun-09 6:52
memberricpue1-Jun-09 6:52 
Questionfirefox problem Pin
Member 47090526-Dec-07 22:18
memberMember 47090526-Dec-07 22:18 
GeneralRe: firefox problem Pin
Tony Montana13-Feb-08 20:16
memberTony Montana13-Feb-08 20:16 
GeneralThans and I've Q Pin
ab_dc21-Nov-07 2:20
memberab_dc21-Nov-07 2:20 
Questionmultiple row selection Pin
lotusflower4-Sep-07 11:40
memberlotusflower4-Sep-07 11:40 
GeneralExtending method to update cells Pin
beish110-Aug-07 0:12
memberbeish110-Aug-07 0:12 
QuestionOnly CheckBox gets highlighted Pin
osapunova20-Jul-07 3:08
memberosapunova20-Jul-07 3:08 
AnswerRe: Only CheckBox gets highlighted Pin
osapunova20-Jul-07 8:07
memberosapunova20-Jul-07 8:07 
GeneralNice except after page load event fires IE 6 Pin
Tim Vandeweerd19-Nov-06 13:35
memberTim Vandeweerd19-Nov-06 13:35 
Questionrow style chahge on condition Pin
doddamani praveen25-Jul-06 5:48
memberdoddamani praveen25-Jul-06 5:48 
AnswerRe: row style chahge on condition Pin
Ali Khan (OKC)2-Aug-06 5:33
memberAli Khan (OKC)2-Aug-06 5:33 
GeneralThere is one problem Pin
dtarczynski11-Jul-06 3:12
memberdtarczynski11-Jul-06 3:12 
GeneralRe: There is one problem Pin
Ali Khan (OKC)11-Jul-06 5:53
memberAli Khan (OKC)11-Jul-06 5:53 
GeneralRe: There is one problem Pin
dtarczynski11-Jul-06 6:28
memberdtarczynski11-Jul-06 6:28 
GeneralExample Pin
ovidiosilva3-Jul-06 18:34
memberovidiosilva3-Jul-06 18:34 
GeneralRe: Example Pin
Ali Khan (OKC)11-Jul-06 6:01
memberAli Khan (OKC)11-Jul-06 6:01 
GeneralGood Job Pin
Jennifer R30-Jun-06 5:18
memberJennifer R30-Jun-06 5:18 
GeneralExcellent Article Pin
RobertPJ21-Jun-06 12:18
memberRobertPJ21-Jun-06 12:18 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web01 | 2.8.150428.2 | Last Updated 13 Jun 2006
Article Copyright 2006 by Ali Khan (OKC)
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid