ASP.NET RSS ASP.NET RSS

Select/Deselect All CheckBoxes Inside the GridView

Please support our ASP.NET advertiser: Intel Parallel Studio Home
Ramesh S Ramesh S is offline Offline Jul 6th, 2009, 12:45 pm |
0
Sometimes you might need to have checkboxes for each row in a GridView control (like Inbox in Gmail). This code snippet helps to select/unselect all checkboxes in the GridView control by clicking the header checkbox. The selectUnselectCheckboxes() javascript function handles this fuctionality. This function is called in the CheckBox in the header template of the GriView. It loops through the GridView control, get the CheckBox elments and the select/deselects the them. I have implemented this functionality in DemoPage1.aspx.
Show Printable Version Show Printable Version
Quick reply to this message  
Code Snippet
•
•
•
•
ASP.NET Syntax
Toggle Plain Text
  1. //HTML part of DemoPage1.aspx
  2. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="DemoPage1.aspx.cs" Inherits="DemoPage1" %>
  3.  
  4. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  5. <html xmlns="http://www.w3.org/1999/xhtml">
  6. <head id="Head1" runat="server">
  7. 	<title>GridView Sample By Ramesh S</title>
  8.  
  9. 	<script type="text/javascript">
  10. 		function selectUnselectCheckboxes(chkBoxHeaderId, chkBoxIdInGrid, gridViewId) {
  11. 			var gridViewElem = document.getElementById(gridViewId);
  12.  
  13. 			//get the no of rows<tr> generated by the gridview
  14. 			var gridRowsCount = gridViewElem.rows.length;
  15.  
  16. 			//the controls in the gridview will have the following suffix in their ids 'GridView1_ctl0n'
  17. 			//the first element starts with 2 e.g. GridView1_ctl02_chkEmployee(first element)... GridView1_ctl10_chkEmployee(9th element)
  18. 			for (i = 2; i <= gridRowsCount; i++) {
  19. 				var ctlIndex = eval(i);
  20. 				if (ctlIndex < 10)
  21. 					ctlIndex = '0' + i;
  22.  
  23. 				var chkBoxIdFull = gridViewElem.id + '_ctl' + ctlIndex + '_' + chkBoxIdInGrid;
  24. 				var chkBoxElem = document.getElementById(chkBoxIdFull);
  25.  
  26. 				if (chkBoxElem != null) {
  27. 					//if the header checkbox is checked, then check the checkboxes in the grid
  28. 					if (document.getElementById(chkBoxHeaderId).checked)
  29. 						chkBoxElem.checked = true;
  30. 					else
  31. 						chkBoxElem.checked = false;
  32. 				}
  33. 			}
  34. 		}  
  35.  
  36. 	</script>
  37.  
  38. </head>
  39. <body>
  40. 	<form id="form1" runat="server">
  41. 	<div>
  42. 		<table width="100%">
  43. 			<tr>
  44. 				<td>
  45. 					<asp:GridView ID="GridView1" runat="server" Width="500px" BackColor="White" BorderColor="#3366CC"
  46. 						BorderStyle="None" BorderWidth="1px" CellPadding="4" OnRowDataBound="GridView1_RowDataBound"
  47. 						AutoGenerateColumns="False">
  48. 						<RowStyle BackColor="White" ForeColor="#003399" />
  49. 						<Columns>
  50. 							<asp:TemplateField>
  51. 								<HeaderTemplate>
  52. 									<asp:CheckBox ID="chkSelectAll" ToolTip="Select/Unselect all employees" onclick="selectUnselectCheckboxes(this.id, 'chkEmployee', 'GridView1');"
  53. 										runat="server" />
  54. 								</HeaderTemplate>
  55. 								<ItemTemplate>
  56. 									<asp:CheckBox ID="chkEmployee" runat="server" Checked='<%# Bind("Is_Eligible") %>' />
  57. 								</ItemTemplate>
  58. 								<HeaderStyle HorizontalAlign="Center" />
  59. 								<ItemStyle HorizontalAlign="Center" Width="50px" />
  60. 							</asp:TemplateField>
  61. 							<asp:BoundField DataField="EmpName" HeaderText="Name">
  62. 								<HeaderStyle HorizontalAlign="Left" />
  63. 							</asp:BoundField>
  64. 							<asp:BoundField DataField="EmpCode" HeaderText="Code">
  65. 								<HeaderStyle HorizontalAlign="Left" />
  66. 							</asp:BoundField>
  67. 							<asp:TemplateField HeaderText="Dept">
  68. 								<ItemTemplate>
  69. 									<asp:DropDownList ID="ddlDept" DataTextField="Dname" DataValueField="Deptno" DataSource="<%#GetAllDept()%>"
  70. 										runat="server">
  71. 									</asp:DropDownList>
  72. 								</ItemTemplate>
  73. 							</asp:TemplateField>
  74. 						</Columns>
  75. 						<FooterStyle BackColor="#99CCCC" ForeColor="#003399" />
  76. 						<PagerStyle BackColor="#99CCCC" ForeColor="#003399" HorizontalAlign="Left" />
  77. 						<SelectedRowStyle BackColor="#009999" Font-Bold="True" ForeColor="#CCFF99" />
  78. 						<HeaderStyle BackColor="#003399" Font-Bold="True" ForeColor="#CCCCFF" />
  79. 					</asp:GridView>
  80. 				</td>
  81. 			</tr>
  82. 		</table>
  83. 	</div>
  84. 	</form>
  85. </body>
  86. </html>
  87.  
  88.  
  89. //Code behind part of DemoPage1.aspx.cs
  90.  
  91. using System;
  92. using System.Web.UI.WebControls;
  93. using System.Data;
  94. public partial class DemoPage1 : System.Web.UI.Page
  95. {
  96.  
  97.     protected void Page_Load(object sender, EventArgs e)
  98.     {
  99.         if (!IsPostBack)
  100.         {
  101.             //Bind gridview with employee details
  102.             BindGridView();
  103.         }
  104.     }
  105.  
  106.     //This method binds DataTable to GridView
  107.     //I have created a DataTable with sample data here
  108.     //You can fetch records from database, store it in a DataTable and bind it
  109.     private void BindGridView()
  110.     {
  111.         DataTable dtEmp = new DataTable();
  112.  
  113.         dtEmp.Columns.Add("Is_Eligible", System.Type.GetType("System.Boolean"));
  114.         dtEmp.Columns.Add("EmpName", System.Type.GetType("System.String"));
  115.         dtEmp.Columns.Add("EmpCode", System.Type.GetType("System.Int16"));
  116.         dtEmp.Columns.Add("Deptno", System.Type.GetType("System.Int16"));
  117.  
  118.         dtEmp.Rows.Add(new object[] { true, "Kannan", 1001, 10 });
  119.         dtEmp.Rows.Add(new object[] { true, "Arun", 1001, 10 });
  120.         dtEmp.Rows.Add(new object[] { false, "Jackson", 1001, 30 });
  121.         dtEmp.Rows.Add(new object[] { true, "Raja", 1001, 20 });
  122.         dtEmp.Rows.Add(new object[] { false, "John", 1001, 30 });
  123.  
  124.         GridView1.DataSource = dtEmp;
  125.         GridView1.DataBind();
  126.     }
  127.  
  128.     //This method returns a DataTable having department details to be 
  129.     //bind with DropDownList for each record in the GridView
  130.     public DataTable GetAllDept()
  131.     {
  132.         DataTable dtDept = new DataTable();
  133.  
  134.         dtDept.Columns.Add("Deptno", System.Type.GetType("System.Int16"));
  135.         dtDept.Columns.Add("Dname", System.Type.GetType("System.String"));
  136.  
  137.         dtDept.Rows.Add(new object[] { 10, "Accounts" });
  138.         dtDept.Rows.Add(new object[] { 20, "Sales" });
  139.         dtDept.Rows.Add(new object[] { 30, "Operations" });
  140.  
  141.         return dtDept;
  142.     }
  143.  
  144.     //This event is handled to bind DropDownList in the GridView
  145.     //with department details
  146.     protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
  147.     {
  148.         if (e.Row.RowType == DataControlRowType.DataRow)
  149.         {
  150.             DropDownList ddlDeptNo = (DropDownList)e.Row.FindControl("ddlDept");
  151.             string deptNo = ((System.Data.DataRowView)(e.Row.DataItem)).Row.ItemArray[3].ToString();
  152.             if (ddlDeptNo != null)
  153.             {
  154.                 ddlDeptNo.SelectedValue = deptNo;
  155.             }
  156.  
  157.         }
  158.     }
  159.  
  160. }

Quick Comment
•
•
•
•
•
•
•
•
Message:
•
•
•
•


Similar Threads
Thread Tools Search this Thread



.net 2.0 3.5 ajax alltypeofvideos appliances asp asp.net beginner box browser businesslogiclayer button c# c#gridviewcolumn cac checkbox class compatible confirmationcodegeneration content contenttype countryselector courier dataaccesslayer database datagrid datagridview datalist deployment development dgv dialog dropdownlist dropdownmenu dynamic dynamically edit embeddingactivexcontrol fileuploader fill findcontrol flash flv forms gridview gudi homeedition iis javascript jquery list listbox menu microsoft mouse mssql nameisnotdeclared news novell numerical opera order panelmasterpagebuttoncontrols problem radio ratings redirect registration relationaldatabases reportemail schoolproject search security serializesmo.table sessionvariables silverlight smoobjects software sql sql-server ssl tracking treeview validatedate validation vb.net videos vista visual-studio visualstudio vs2008 web webapplications webarchitecture webdevelopment webprogramming webservice xml xsl
About Us | Contact Us | Advertise | DaniWeb | Acceptable Use Policy | RSS Feed

©2003 - 2009 DaniWeb® LLC