JavaScript to select all checkboxes in GridView
Link for all dot net and sql server video tutorial playlists
/ kudvenkat
Link for slides, code samples and text version of the video
http://csharp-video-tutorials.blogspo...
Healthy diet is very important both for the body and mind. If you like Aarvi Kitchen recipes, please support by sharing, subscribing and liking our YouTube channel. Hope you can help.
/ @aarvikitchen5572
If the checkbox in the header is checked, all the checkboxes in the GridView should be checked. If we uncheck the checkbox in the header, all the checkboxes in the GridView should be unchecked. When Delete Selected button is clicked the rows that have the checkboxes checked should be deleted.
We will continue with the example that we worked with in Part 2 of JavaScript with ASP.NET tutorial.
Add a TemplateField to the GridView with checkbox in HeaderTemplate and ItemTemplate. At this point the HTML of the GridView should be as shown below. Notice the checkboxes in the first TemplateField.
[asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"
DataKeyNames="ID" DataSourceID="SqlDataSource1"
onrowdatabound="GridView1_RowDataBound"]
[Columns]
[asp:TemplateField]
[ItemTemplate]
[asp:CheckBox ID="CheckBox1" runat="server" /]
[/ItemTemplate]
[HeaderTemplate]
[asp:CheckBox ID="checkboxSelectAll" runat="server" /]
[/HeaderTemplate]
[/asp:TemplateField]
[asp:TemplateField ShowHeader="False"]
[ItemTemplate]
[asp:LinkButton ID="LinkButton1" runat="server" CausesValidation="False"
CommandName="Delete" Text="Delete"][/asp:LinkButton]
[/ItemTemplate]
[/asp:TemplateField]
[asp:BoundField DataField="ID" HeaderText="ID" InsertVisible="False"
ReadOnly="True" SortExpression="ID" /]
[asp:BoundField DataField="Name" HeaderText="Name" SortExpression="Name" /]
[asp:BoundField DataField="Gender" HeaderText="Gender"
SortExpression="Gender" /]
[/Columns]
[/asp:GridView]
Include the following 2 JavaScript functions on the page
[script type="text/javascript" language="javascript"]
function HeaderCheckBoxClick(checkbox)
{
var gridView = document.getElementById("GridView1");
for (i = 1; i [ gridView.rows.length; i++)
{
gridView.rows[i].cells[0].getElementsByTagName("INPUT")[0].checked = checkbox.checked;
}
}
function ChildCheckBoxClick(checkbox)
{
var atleastOneCheckBoxUnchecked = false;
var gridView = document.getElementById("GridView1");
for (i = 1; i [ gridView.rows.length; i++)
{
if (gridView.rows[i].cells[0].getElementsByTagName("INPUT")[0].checked == false)
{
atleastOneCheckBoxUnchecked = true;
break;
}
}
gridView.rows[0].cells[0].getElementsByTagName("INPUT")[0].checked = !atleastOneCheckBoxUnchecked;
}
[/script]
Associate HeaderCheckBoxClick() JavaScript function with onclick event of the checkbox in the HeaderTemplate.
Associate ChildCheckBoxClick() JavaScript function with onclick event of the checkbox in the ItemTemplate
This is all the code that is required for implementing select/deselect all checkboxes in gridview.
Now let's see how to delete all the selected rows at once.
Include a HeaderTemplate in the TemplateField that has the Delete LinkButton. Place a LinkButton inside the HeaderTemplate.
1. Remove the CommandName attribute
2. Set Text="Delete Selected"
3. Set ID="lbDeleteAll"
4. Set OnClick="lbDeleteAll_Click"
At the moment ID column in the GridView is a BoundField. Convert it to TemplateField.
Include the following 2 functions in the code-behind file.
private void Delete(string employeeIDs)
{
string cs = ConfigurationManager.ConnectionStrings["SampleDBConnectionString"].ConnectionString;
SqlConnection con = new SqlConnection(cs);
SqlCommand cmd = new SqlCommand("spDeleteEmployees", con);
cmd.CommandType = CommandType.StoredProcedure;
SqlParameter parameter = new SqlParameter("@IDs", employeeIDs);
cmd.Parameters.Add(parameter);
con.Open();
cmd.ExecuteNonQuery();
con.Close();
}
protected void lbDeleteAll_Click(object sender, EventArgs e)
{
StringBuilder sb = new StringBuilder();
foreach (GridViewRow gr in GridView1.Rows)
{
CheckBox cb = (CheckBox)gr.FindControl("CheckBox1");
if (cb.Checked)
{
sb.Append(((Label)gr.FindControl("Label1")).Text + ",");
}
}
sb.Remove(sb.ToString().LastIndexOf(","), 1);
Delete(sb.ToString());
GridView1.DataBind();
}
On this page of the site you can watch the video online JavaScript to select all checkboxes in GridView with a duration of hours minute second in good quality, which was uploaded by the user kudvenkat 01 March 2015, share the link with friends and acquaintances, this video has already been watched 40,409 times on youtube and it was liked by 182 viewers. Enjoy your viewing!
