Select Checkboxes in gridview in gmail style

0

Written on 9:57 PM by Mj blog


As a web developer i frequently use gridview to show some of reports where I checkbox for users to select the records for particular transactions like exporting to excel or printing the rows. So lets do that in GMAIL , ORKUT style giving a command

"Select : All None" style....

Even though we keep checkboxes in the gridview and give a name say "checkbox1" it will dynamically create its own name in the runtime so to check the name we first do the following steps

Step 1 : Keep the GridView in the design view

Step 2 : Bind the datasource of ur wish (please dont mix up UI and data layer )

Step 3: Now make the column in which the check box will be placed usually the column which we keep as datakeys as for I have worked.

Step 4 : After binding the GridView with data source convert the data keys column into template and click the "Edit Template "

Step 5 : In the ItemTemplate delete the Label control and place the checkbox and bind the datamember the syntax as follows

<asp:TemplateField HeaderText="userid" SortExpression="userid">
 <EditItemTemplate>
 <asp:Label ID="Label1" runat="server" Text='<%# Eval("userid") %>'></asp:Label>
 </EditItemTemplate>
 <ItemTemplate>
 <asp:CheckBox ID="CheckBox1" runat="server" Text='<%# Eval("userid") %>/>

</ItemTemplate>
 </asp:TemplateField>


Now we have placed the Check box now we will check what name it creates in the runtime

Step 6 : Press CTRL + F5 and the web page will be loaded now right click on the page and select " View Source " . it will automatically open the notepad with the HTML tags in it to search for the checkbox with its name "CheckBox1" you will get the name as "GridView1_ctl02_CheckBox1", "GridView1_ctl03_CheckBox1", GridView1_ctl04_CheckBox1.... etc

if you are using Master Page and you add the GridView in the Content page then the name will be different its like ct_100.... something .

So the Checkbox name is different hence its very difficult to give specific name in the javascript code but fortunately we have "CheckBox1" as common in all the checkbox generated in the gridview with this we can build the javascript code.

JavaScript code to select All and None Checkboxs in Gridview

Algorithm

Step 1 : Read all the controls in the generated web page

Step 2 : Search for the control type checkbox in the web page

Step 3 : Search for the control name consisting of the word "CheckBox1"

Step 4 : Give the status of True or False

JavaScript Code


// funtion for checking all the checkbox only in gridview
function checkAll()
 {
 //find the total controls in the web page
 for (var i = 0; i < document.form1.elements.length; i++)
 {
 //Assign it to an array
 var e = document.form1.elements[i];
 //search for the control type checkbox
 if ( (e.type == 'checkbox'))
 {
 //Search for the checkbox with the name containing "CheckBox1"
 if(e.name.indexOf('CheckBox1')!=-1)
 {
 e.checked = true; //Status of the checkbox
 }
 }
 }
 }

// funtion for unchecking all the checkbox only in gridview
function uncheckAll()
 {
 //find the total controls in the web page
 for (var i = 0; i < document.form1.elements.length; i++)
 {
 //Assign it to an array
 var e = document.form1.elements[i];
 //search for the control type checkbox
 if ( (e.type == 'checkbox'))
 {
 //Search for the checkbox with the name containing "CheckBox1"
 if(e.name.indexOf('CheckBox1')!=-1)
 {
 e.checked = false; //Status of the checkbox
 }
 }
 }
 }

HTML Code


<body>
<form id="form1" runat="server">
 select : <a href ="javascript:checkAll()">All</a> <a href="javascript:uncheckAll();">None</a>
 <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataKeyNames="userid" DataSourceID="SqlDataSource1">
<Columns>
<asp:TemplateField HeaderText="userid" SortExpression="userid">
<EditItemTemplate>
<asp:Label ID="Label1" runat="server" Text='<%# Eval("userid") %>'></asp:Label>
</EditItemTemplate>
<ItemTemplate>
<asp:CheckBox ID="CheckBox1" runat="server" Text='<%# Eval("userid") %>' />
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="username" HeaderText="username" SortExpression="username" />
<asp:BoundField DataField="Dob" HeaderText="Dob" SortExpression="Dob" />
<asp:BoundField DataField="gender" HeaderText="gender" SortExpression="gender" />
<asp:BoundField DataField="Address1" HeaderText="Address1" SortExpression="Address1" />
<asp:BoundField DataField="Address2" HeaderText="Address2" SortExpression="Address2" />
<asp:BoundField DataField="Address3" HeaderText="Address3" SortExpression="Address3" />
<asp:BoundField DataField="city" HeaderText="city" SortExpression="city" />
<asp:BoundField DataField="State" HeaderText="State" SortExpression="State" />
<asp:BoundField DataField="Country" HeaderText="Country" SortExpression="Country" />
</Columns>
</asp:GridView>
<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:DBConnectionString %>"
SelectCommand="SELECT [userid], [username], [Dob], [gender], [Address1], [Address2], [Address3], [city], [State], [Country] FROM [User_Master]">
</asp:SqlDataSource>
</form>
</body>


Thus we can select the checkboxes kept inside the gridview and gridview only.

Posted in | Comment Now!

Subscribe to: Posts (Atom)