Home
Manage Your Code
Snippet: Selecting ALL CheckBoxes in The GridView (C#)
Title: Selecting ALL CheckBoxes in The GridView Language: C#
Description: You can make a checkbox to select or de-select all the checkboxes in the gridview saving yourself from clicking each one by one Views: 377
Author: Adnan Ilyas Date Added: 10/10/2007
Copy Code  
1Introduction: 
2
3GridView is a new data bound control introduced by Microsoft in Visual Studio.NET 2005. Most of the operations like sorting, paging and selecting item from the GridView is already built in and you can use it through the design view. In this article I will explain that how you can select single as well as all the checkboxes which are inside the GridView control. 
4
5Selecting Checkboxes inside the GridView Control:
6
7GridView has CheckboxField column which maps the checkbox to a field in the database. In this article we won't be using that, we will make a checkbox in a template column. Simply add a asp:checkbox control in the item template of the GridView control. If you are working with Datagrid control and want the same functionality than please check out my article Selecting Checkboxes inside the Datagrid control. 
8
9
10The html code looks something like this: 
11
12 <asp:GridView ID="GridView1" runat="server" AllowPaging="True" AllowSorting="True"
13AutoGenerateColumns="False" DataKeyNames="PersonID" DataSourceID="mySource" Width="366px" CellPadding="4" ForeColor="#333333" GridLines="None">
14<Columns>
15<asp:CommandField ShowSelectButton="True" />
16<asp:BoundField DataField="PersonID" HeaderText="PersonID" InsertVisible="False"
17ReadOnly="True" SortExpression="PersonID" />
18<asp:BoundField DataField="Name" HeaderText="Name" SortExpression="Name" />
19<asp:TemplateField HeaderText="Select">
20<ItemTemplate>
21<asp:CheckBox ID="chkSelect" runat="server" />
22</ItemTemplate>
23<HeaderTemplate>
24</HeaderTemplate>
25</asp:TemplateField>
26
27</Columns>
28
29<FooterStyle BackColor="#990000" Font-Bold="True" ForeColor="White" />
30<RowStyle BackColor="#FFFBD6" ForeColor="#333333" />
31<PagerStyle BackColor="#FFCC66" ForeColor="#333333" HorizontalAlign="Center" />
32<SelectedRowStyle BackColor="#FFCC66" Font-Bold="True" ForeColor="Navy" />
33<HeaderStyle BackColor="#990000" Font-Bold="True" ForeColor="White" />
34<AlternatingRowStyle BackColor="White" />
35</asp:GridView> 
36
37Now in the button click event write this code: 
38
39// StringBuilder object 
40StringBuilder str = new StringBuilder(); 
41
42// Select the checkboxes from the GridView control 
43
44for (int i = 0; i < GridView1.Rows.Count; i++)
45
46{
47
48GridViewRow row = GridView1.Rows[i];
49
50bool isChecked = ((CheckBox) row.FindControl("chkSelect")).Checked;
51
52if (isChecked)
53
54{
55
56// Column 2 is the name column 
57
58str.Append(GridView1.Rows[i].Cells[2].Text); 
59
60} 
61
62}
63
64// prints out the result 
65
66Response.Write(str.ToString()); 
67
68 
69 
70
71The code above just iterates through the GridView and selects the checked checkboxes. Later it appends the selected value to a StringBuilder object. In order to use StringBuilder you will need to add the System.Text namespace.    
72
73Making a CheckAll functionality:
74
75To add a check all functionality in the GridView simply add a html checkbox to the header template of the checkbox column. 
76
77 <HeaderTemplate>
78<input id="chkAll" onclick="javascript:SelectAllCheckboxes(this);" runat="server" type="checkbox" />
79</HeaderTemplate> 
80
81SelectAllCheckboxes JavaScript method:
82
83<script language=javascript> 
84function SelectAllCheckboxes(spanChk){
85
86// Added as ASPX uses SPAN for checkbox
87
88var oItem = spanChk.children;
89
90var theBox=(spanChk.type=="checkbox")?spanChk:spanChk.children.item[0];
91
92xState=theBox.checked;
93
94elm=theBox.form.elements;
95
96for(i=0;i<elm.length;i++)
97
98if(elm[i].type=="checkbox" && elm[i].id!=theBox.id)
99
100{
101
102//elm[i].click();
103
104if(elm[i].checked!=xState)
105
106elm[i].click();
107
108//elm[i].checked=xState;
109
110}
111
112}
113
114</script>
115
116 
117 
118
119This is it. I hope you like the article, happy coding! 
120
121