In this post I will show how to select/deselect checkbox present inside gridview using jquery.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="GridViewSelectAll.aspx.cs"
Inherits="GridViewSelectAll" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#<%=gvProducts.ClientID%> input[id$='chkAll']:checkbox").click(function () {
$("#<%=gvProducts.ClientID%> input[id*='chkSelected']:checkbox").attr('checked', $(this).is(':checked'));
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:GridView runat="server" ID="gvProducts" AutoGenerateColumns="false">
<Columns>
<asp:TemplateField>
<HeaderTemplate>
<input type="checkbox" id="chkAll" runat="server" value='<%#Eval("ProductID") %>' />
</HeaderTemplate>
<ItemTemplate>
<input type="checkbox" id="chkSelected" runat="server" />
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="ProductName" HeaderText="ProductName" />
<asp:BoundField DataField="Description" HeaderText="Description" />
</Columns>
</asp:GridView>
</div>
</form>
</body>
</html>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class GridViewSelectAll : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
gvProducts.DataSource = ProductDAL.GetProducts();
gvProducts.DataBind();
}
}
public class Product
{
public int ProductID { get; set; }
public string ProductName { get; set; }
public string Description { get; set; }
}
public class ProductDAL
{
public static List<Product> GetProducts()
{
return new List<Product>()
{
new Product() {ProductID = 1, ProductName = "P001", Description = "Desc01"},
new Product() {ProductID = 2, ProductName = "P002", Description = "Desc02"},
new Product() {ProductID = 3, ProductName = "P003", Description = "Desc03"},
new Product() {ProductID = 4, ProductName = "P004", Description = "Desc04"},
new Product() {ProductID = 5, ProductName = "P005", Description = "Desc05"},
};
}
}
Responses
0 Respones to "How to select/deselect all checkbox in gridview using jquery"
Post a Comment