JavaScript to select all checkboxes in GridView

Показать описание

Link for all dot net and sql server video tutorial playlists

Link for slides, code samples and text version of the video

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.

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)
{
{
}
}

function ChildCheckBoxClick(checkbox)
{
var atleastOneCheckBoxUnchecked = false;

{
{
atleastOneCheckBoxUnchecked = true;
break;
}
}

}
[/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;

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();
}

Рекомендации по теме

Комментарии

thanks for a very grate tutorial, I have one question please : why on click event used in header rather than OnClientClick even its a server side control ?

osamaahmed-fmgy