How to use CheckBox with Asp.net GridView using Jquery ?

In this post we create a Gridview that contain a Checkbox column. Then we will bind this Gridview with Employee List. By using jquery we will access the checked rows of the Asp.net Gridview And calculate the sum of salary column value .
Step 1-

Open VS 2010 and add asp.net website,then add new item as a class  and rename as EmployeeXref , which represents an Employee Information.

[java]

public class EmployeeXref
{
private int employeeID;
private string employeeName;
private double salary;

public int EmployeeID { get; set; }
public string EmployeeName { get; set; }
public double Salary { get; set; }

public List<EmployeeXref> GetEmployee()
{
List<EmployeeXref> empList = new List<EmployeeXref>();

empList.Add(new EmployeeXref() { EmployeeID = 1, EmployeeName = "Jack", Salary = 30000.00 });
empList.Add(new EmployeeXref() { EmployeeID = 2, EmployeeName = "John", Salary = 89800.00 });
empList.Add(new EmployeeXref() { EmployeeID = 3, EmployeeName = "Daniel", Salary = 70000.00 });
empList.Add(new EmployeeXref() { EmployeeID = 4, EmployeeName = "Rusell", Salary = 30567.40 });
empList.Add(new EmployeeXref() { EmployeeID = 5, EmployeeName = "Tony", Salary = 28000.00 });
empList.Add(new EmployeeXref() { EmployeeID = 6, EmployeeName = "jany", Salary = 37000.00 });
return empList;
}
}

[/java]

Step 2- Add a new item as Web form and rename it as EmployeeGrid.aspx. Now add a gridview control to page that has one Checkbox column and have BoundField that is bind to EmployeeXref List.

[html]
<form id="form1" runat="server">
<div id="emp">
<asp:GridView ID="EmpGid" runat="server" DataKeyNames="EmployeeID" AutoGenerateColumns="false">
<Columns>
<asp:TemplateField>
<ItemTemplate>
<asp:CheckBox ID="chkEmp" runat="server" />
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="EmployeeID" HeaderText="Employee ID" SortExpression="EmployeeID" />
<asp:BoundField DataField="EmployeeName" HeaderText="Employee Name" SortExpression="EmployeeName" />
<asp:BoundField DataField="Salary" HeaderText="Salary" SortExpression="Salary" />

</Columns>
</asp:GridView>
<p id="tot"></p>
</div>
</form>

[/html]

Step 3- Now Bind this Gridview With EmployeeXref  Class , created above.

[java]

public partial class EmployeeGrid : System.Web.UI.Page
{
List<EmployeeXref> listEmp = new List<EmployeeXref>();

protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
EmployeeXref emp = new EmployeeXref();
listEmp = emp.GetEmployee();
EmpGid.DataSource = listEmp;
EmpGid.DataBind();
}
}
}

[/java]

On Page Load gridview looks as below.

All set now time to use Jquery magic here .How can we calculate the sum of checked Row’s Salary columns. Below is the code for jQuery.

[javascript]

<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#emp :input:checkbox').click(function () {
calculateSalary(4);
});
function calculateSalary(ColIndx) {
total = 0.00;
$("tr:has(:checkbox:checked) td:nth-child(" + ColIndx + ")").each(function () {
total = total + parseFloat($(this).text());

});
$('#tot').text("Total amount :" + total.toFixed(2));
}
});
</script>

[/javascript]


Now  Lte us understand Line by Line  code

I-    When a checkbox is clicked we call calculateSalary(4) function . Here we pass 4 as column index of salary.

[javascript]

$('#emp :input:checkbox').click(function () {
calculateSalary(4);
});

[/javascript]

2 -  Now we use selector , row that has checked checkbox and column with the specific index  , here is 4 only. Once we have our selector, we use .each() to iterate over this jQuery object and add the column value to the ‘total’ variable. The parseFloat( ) parses strings into numbers.

[javascript]

function calculateSalary(ColIndx) {
total = 0.00;
$("tr:has(:checkbox:checked) td:nth-child(" + ColIndx + ")").each(function () {
total = total + parseFloat($(this).text());

});
$('#tot').text("Total amount :" + total.toFixed(2));
}

[/javascript]



 Here is output:-

Note:- In case of gridview paging we have to use ViewState to save the state.

Share on Google Plus

About JK STACK

This is a short description in the author block about the author. You edit it by entering text in the "Biographical Info" field in the user admin panel.