Click here to Skip to main content
11,493,948 members (74,688 online)
Click here to Skip to main content

Multi-select ASP.NET datagrid

, 7 Mar 2004 577.6K 17K 164
Rate this:
Please Sign up or sign in to vote.
How to extend ASP.NET datagrid for multi-selection of data rows.

Sample image

Introduction

ASP.NET datagrid is a very powerful and flexible control, however some features like multi-select is not natively available. This article shows how easily this functionality can be achieved with a few simple tricks.

Background

One of the projects I was working on had a User Inteface requirement for multi-selection of grid rows. User wanted Hotmail or Yahoo style multi-selection facility along with highlighting the selection (hard part).

Using the code

After testing and applying some javascript and grid related coding techinque, I came up with the following working solution.

  • Add Template column for CHECKBOXES for selection (Hotmail/Yahoo style)
  • Add client-side onclick() and javascript for checkboxes, to highlight and mark checked rows.
  • Add server side CheckedChanged() event for preserving highlights. [because everytime on postback datagrid resets colors for the selection]
<Columns>
 <asp:TemplateColumn>
  <HeaderTemplate>
   <asp:CheckBox id="chkAll" 
      onclick="javascript:SelectAllCheckboxes(this);" runat="server" 
    AutoPostBack="false" ToolTip="Select/Deselect All" />
  </HeaderTemplate>
  <ItemTemplate> 
    <asp:CheckBox id="chkSelect" onclick="javascript:HighlightRow(this);"
        runat="server"OnCheckedChanged= "grdEmployees_CheckedChanged" 
        AutoPostBack="false" />
  </ItemTemplate> 
 </asp:TemplateColumn> 
</Columns>

SelectAllCheckBoxes()

This function is used to have Hotmail style selection, it iterate through every check box on the form and then selects/deselects the checkboxes.

HighlightRow()

The only challenge left was to highlight and un-highlight the rows on selection and deselection. For which, I used HighlightRow() function, please note one very important thing when using <asp:CheckBox> control. It surrounds <SPAN> tags around CHECKBOX and therfore in javascript you have to get the children of the <SPAN> tag.

    //-------------------------------------------------------------
    // Select all the checkboxes (Hotmail style)
    //-------------------------------------------------------------
    function SelectAllCheckboxes(spanChk){
    
    // Added as ASPX uses SPAN for checkbox 
    var oItem = spanChk.children;
    var theBox=oItem.item(0)
    xState=theBox.checked;    

        elm=theBox.form.elements;
        for(i=0;i<elm.length;i++)
        if(elm[i].type=="checkbox" && elm[i].id!=theBox.id)
            {
            //elm[i].click();
            if(elm[i].checked!=xState)
            elm[i].click();
            //elm[i].checked=xState;
            }
    }

    //-------------------------------------------------------------
    //----Select highlish rows when the checkboxes are selected
    //
    // Note: The colors are hardcoded, however you can use 
    //       RegisterClientScript blocks methods to use Grid's
    //       ItemTemplates and SelectTemplates colors.
    //         for ex: grdEmployees.ItemStyle.BackColor OR
    //                 grdEmployees.SelectedItemStyle.BackColor
    //-------------------------------------------------------------
    function HighlightRow(chkB)    {
    var oItem = chkB.children;
    xState=oItem.item(0).checked;    
    if(xState)
        {chkB.parentElement.parentElement.style.backgroundColor='lightcoral';
           // grdEmployees.SelectedItemStyle.BackColor
         chkB.parentElement.parentElement.style.color='white'; 
           // grdEmployees.SelectedItemStyle.ForeColor
        }else 
        {chkB.parentElement.parentElement.style.backgroundColor='white'; 
             //grdEmployees.ItemStyle.BackColor
         chkB.parentElement.parentElement.style.color='black'; 
             //grdEmployees.ItemStyle.ForeColor
        }
    }
    // -->

This was the client side story. So far so good. One may argue why not use the plain simple HTML checkbox control? The answer is ASP.NET server control has a viewstate and therefore posting a page retains the rows selection.

Server Side

Now, On the server side we have to make sure the highlights are intact, because on every postback ASP.NET renders grid and loses the highlights. Following method is used for re-rendering the highlights.

Public Sub grdEmployees_CheckedChanged(ByVal sender As Object, _
    ByVal e As System.EventArgs)
  Dim chkTemp As CheckBox = CType(sender, CheckBox)

  Dim dgi As DataGridItem 

  dgi = CType(chkTemp.Parent.Parent, DataGridItem)
  If (chkTemp.Checked) Then 

    dgi.BackColor = grdEmployees.SelectedItemStyle.BackColor 
    dgi.ForeColor = grdEmployees.SelectedItemStyle.ForeColor
  Else 

    dgi.BackColor = grdEmployees.ItemStyle.BackColor
    dgi.ForeColor = grdEmployees.ItemStyle.ForeColor 
  End If
End Sub

Getting your selection

Its easy! Iterate through the DataGridItems collection and grab the checkbox [for ex. DemoGridItem.Cells(0).Controls(1)]. And verify its CHECKED property. Oh, also you can use DataKeyField of the dataset to grab specific datarows. Check out the attached code and you will love to find out how easy it is to multi-select rows.

Conclusion

Follow the downloaded code, you can simply use any SQL database. This is my very first article, hope .NET lovers would like it. Feedback is welcome.

License

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

Share

About the Author

Prashant Nayak (.Net Lover)
Web Developer
United States United States
Cranking code more than 12 years. Technical/Project lead/MCSD. Offered services to various industuries like S/W, Telecom, Publishing, Insurance etc.

When not on computer, I play/swim/read with my kids and help my better half (of course my lovely wife) to clean house. Solving challenging S/W problems is my passion. Hate non-productive meetings. Do lots of GOOGLE and Eat/Drink/Sleep around MSDN.

Comments and Discussions

 
GeneralMy vote of 5 Pin
manoj kumar choubey7-Feb-12 20:30
membermanoj kumar choubey7-Feb-12 20:30 
GeneralMy vote of 5 Pin
Member 782175621-Apr-11 11:23
memberMember 782175621-Apr-11 11:23 
GeneralMy vote of 1 Pin
badri vishal23-Nov-10 20:18
memberbadri vishal23-Nov-10 20:18 
GeneralMy vote of 1 Pin
Dima Pasko27-Aug-09 12:49
memberDima Pasko27-Aug-09 12:49 
GeneralMy vote of 1 Pin
Jitesh Sachdeva12-Jan-09 18:04
memberJitesh Sachdeva12-Jan-09 18:04 
GeneralMultiSelect via Client-Side Pin
Todd Lucas1-Sep-06 13:31
memberTodd Lucas1-Sep-06 13:31 
GeneralRe: MultiSelect via Client-Side Pin
Patrick Olurotimi Ige19-Sep-06 15:44
memberPatrick Olurotimi Ige19-Sep-06 15:44 
NewsMultiple Gridviews or Checkbox columns Pin
McDude15-Jun-06 14:10
memberMcDude15-Jun-06 14:10 
I ran into a problem when I tried to use multiple gridviews on the same page.   When I checked the box on the top of one GridView, it checked all the boxes in all of them!   I fiddled around with it for way too long, until I came up with the following solution.

      //check all the checkboxes in the gridview to select all rows
      //06/15/2006 - Added indexOf stuff because multiple gridviews made all checkboxes checked
      function SelectAllCheckBoxes(theBox, gvSelected)
      {
            var xState=theBox.checked;
            var elm=theBox.form.elements;
            var strElmID;

            for(i=0;i<elm.length;i++)
            {
                  strElmID = elm[i].id;
                  if(elm[i].type=="checkbox" && strElmID!=theBox.id && strElmID.indexOf(gvSelected)!=-1 )
                  {
                        if(elm[i].checked!=xState)
                        {
                              elm[i].click();
                        }
                  }
            }
      }

Notice I am now searching for a string gvSelected in the id of the checkbox.   Since the .NET naming convention will name all of the checkboxes with concatenation and numbering, all we have to do is specify a different id for each checkbox column, and search for that as we cursor through all the elements on the page.

The following is the code for the first gridview and the beginning of the second:

<asp:GridView ID="gvDefHrs" runat="server" AutoGenerateColumns="false" DataKeyNames="emp_def_earn_uuid"
      DataSourceID="SqlDataSource1" OnRowCommand="gvDefHrs_RowCommand" OnRowDataBound="gvDefHrs_RowDataBound">
      <Columns>
            <asp:TemplateField>
                  <HeaderTemplate>
                        <input id="chkAllDefHrs" runat="server" onclick="SelectAllCheckBoxes(this,'chkSelectDefHrs');"
                              type="checkbox" />
                  </HeaderTemplate>
                  <ItemTemplate>
                        <asp:CheckBox ID="chkSelectDefHrs" runat="server" />
                  </ItemTemplate>
            </asp:TemplateField>
            <asp:ButtonField ButtonType="Button" CommandName="EditDefHrs" Text="edit" />
            <asp:BoundField DataField="earn_hrs" HeaderText="Hours" SortExpression="earn_hrs" />
            <asp:BoundField DataField="emp_def_earn_uuid" HeaderText="UUID" SortExpression="emp_def_earn_uuid"
                  Visible="false" />
      </Columns>
</asp:GridView>


<asp:GridView ID="gvDefDollars" runat="server" AutoGenerateColumns="false" DataKeyNames="emp_def_earn_uuid"
      DataSourceID="SqlDataSource2" OnRowCommand="gvDefDollars_RowCommand" OnRowDataBound="gvDefDollars_RowDataBound">
      <Columns>
            <asp:TemplateField>
                  <HeaderTemplate>
                        <input id="chkAllDefDollars" runat="server" onclick="SelectAllCheckBoxes(this,'chkSelectDefDollars');"
                              type="checkbox" />
                  </HeaderTemplate>
                  <ItemTemplate>
                        <asp:CheckBox ID="chkSelectDefDollars" runat="server" />


McDude lives
GeneralRe: Multiple Gridviews or Checkbox columns Pin
Code Buster10-Aug-06 20:36
memberCode Buster10-Aug-06 20:36 
Generalunselect check box based on others ckbx Pin
Jamshidi3-Mar-06 13:09
memberJamshidi3-Mar-06 13:09 
GeneralCommand button in data Grid Pin
S.Das2-Mar-06 21:28
memberS.Das2-Mar-06 21:28 
GeneralJavascript Functions Pin
Shadi Rahmani4-Sep-05 22:40
memberShadi Rahmani4-Sep-05 22:40 
GeneralRe: Javascript Functions Pin
enjoycrack5-Sep-05 1:12
memberenjoycrack5-Sep-05 1:12 
AnswerRe: Javascript Functions Pin
Sasi Atia12-Feb-06 21:52
memberSasi Atia12-Feb-06 21:52 
GeneralRe: Javascript Functions Pin
hb3219-Mar-08 4:47
memberhb3219-Mar-08 4:47 
Generalc# version Pin
Loic Deniel23-Aug-05 23:16
memberLoic Deniel23-Aug-05 23:16 
GeneralRe: c# version Pin
Anonymous26-Oct-05 9:04
sussAnonymous26-Oct-05 9:04 
Questionhow to get cell Text when AutoGenerateColumns="false" Pin
hostlike4-Aug-05 20:57
memberhostlike4-Aug-05 20:57 
GeneralModified client script Pin
dpadevet21-Jul-05 4:26
memberdpadevet21-Jul-05 4:26 
GeneralRe: Modified client script Pin
htb huang19-Mar-07 13:32
memberhtb huang19-Mar-07 13:32 
GeneralButton instead of CheckBox Pin
Jureshka7-Jul-05 5:53
memberJureshka7-Jul-05 5:53 
GeneralMozilla Firefox Browers Pin
taithien23-Jun-05 0:55
membertaithien23-Jun-05 0:55 
GeneralRe: Mozilla Firefox Browers Pin
wildwildwolf20-Jul-05 10:50
memberwildwildwolf20-Jul-05 10:50 
Generalscript correction Pin
][Turpa28-Mar-05 1:51
member][Turpa28-Mar-05 1:51 
General, Pin
Hui Yee4-Mar-05 17:34
memberHui Yee4-Mar-05 17:34 

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
Web02 | 2.8.150520.1 | Last Updated 8 Mar 2004
Article Copyright 2003 by Prashant Nayak (.Net Lover)
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid