GridView Column total on onBlur event using Javascript.
It is very desire task to show the total of gridview dynamic generate column on Blur or onchnage event using javascript.it is working fine with updatepanel.
so today i am posting this
Step1 – Create GridView
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false"
onrowdatabound="GridView1_RowDataBound">
<Columns>
<asp:TemplateField HeaderText="col1">
<ItemTemplate>
<asp:TextBox ID="txtcol1" Text='<%#Eval("id1") %>' runat="server">
</asp:TextBox>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="col2">
<ItemTemplate>
<asp:TextBox ID="txtcol2" Text='<%#Eval("id2") %>' runat="server">
</asp:TextBox>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
Step2 – cearte Javascript function
function JvfunonBlur()
{
var grid = document.getElementById('<%=GridView1.ClientID %>');
var col1;
var totalcol1 = 0;
var col2;
var totalcol2 = 0;
for (i = 0; i < grid.rows.length; i++)
{
col1 = grid.rows[i].cells[0];
col2 = grid.rows[i].cells[1];
for (j = 0; j < col1.childNodes.length; j++)
{
if (col1.childNodes[j].type == "text")
{
if(!isNaN(col1.childNodes[j].value) && col1.childNodes[j].value != "")
{
totalcol1 += parseInt(col1.childNodes[j].value)
}
}
}
for (j = 0; j < col2.childNodes.length; j++)
{
if (col2.childNodes[j].type == "text")
{
if(!isNaN(col2.childNodes[j].value) && col2.childNodes[j].value != "")
{
totalcol2 += parseInt(col2.childNodes[j].value)
}
}
}
}
document.getElementById('<%=txttotal1.ClientID %>').value = totalcol1;
document.getElementById('<%=txttotal2.ClientID %>').value = totalcol2;
}
Step3 – Call this javascript function on OnRowDataBound on csharp code
protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
TextBox txt = (TextBox)e.Row.FindControl("txtcol1");
txt.Attributes.Add("onBlur", "JvfunonBlur();");
TextBox txt1 = (TextBox)e.Row.FindControl("txtcol2");
txt1.Attributes.Add("onBlur", "JvfunonBlur();");
}
Whole Code At Once
.Aspx Page
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!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>Untitled Page</title>
<script type="text/javascript">
function JvfunonBlur()
{
var grid = document.getElementById('<%=GridView1.ClientID %>');
var col1;
var totalcol1 = 0;
var col2;
var totalcol2 = 0;
for (i = 0; i < grid.rows.length; i++)
{
col1 = grid.rows[i].cells[0];
col2 = grid.rows[i].cells[1];
for (j = 0; j < col1.childNodes.length; j++)
{
if (col1.childNodes[j].type == "text")
{
if(!isNaN(col1.childNodes[j].value) && col1.childNodes[j].value != "")
{
totalcol1 += parseInt(col1.childNodes[j].value)
}
}
}
for (j = 0; j < col2.childNodes.length; j++)
{
if (col2.childNodes[j].type == "text")
{
if(!isNaN(col2.childNodes[j].value) && col2.childNodes[j].value != "")
{
totalcol2 += parseInt(col2.childNodes[j].value)
}
}
}
}
document.getElementById('<%=txttotal1.ClientID %>').value = totalcol1;
document.getElementById('<%=txttotal2.ClientID %>').value = totalcol2;
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false"
onrowdatabound="GridView1_RowDataBound">
<Columns>
<asp:TemplateField HeaderText="col1">
<ItemTemplate>
<asp:TextBox ID="txtcol1" Text='<%#Eval("id1") %>' runat="server">
</asp:TextBox>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="col2">
<ItemTemplate>
<asp:TextBox ID="txtcol2" Text='<%#Eval("id2") %>' runat="server">
</asp:TextBox>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
Total
<br />
<asp:TextBox ID="txttotal1" runat="server"></asp:TextBox>
<asp:TextBox ID="txttotal2" runat="server"></asp:TextBox>
<br />
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>
</body>
</html>
.C# Code
using System;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
FillGrid();
}
}
private void FillGrid()
{
DataTable dt = new DataTable();
dt.Columns.Add("id1", typeof(int));
dt.Columns.Add("id2", typeof(int));
dt.Rows.Add(0, 0);
dt.Rows.Add(0, 0);
GridView1.DataSource = dt;
GridView1.DataBind();
}
protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
TextBox txt = (TextBox)e.Row.FindControl("txtcol1");
txt.Attributes.Add("onBlur", "JvfunonBlur();");
TextBox txt1 = (TextBox)e.Row.FindControl("txtcol2");
txt1.Attributes.Add("onBlur", "JvfunonBlur();");
}
}
}
Asp.Net , Sql queries Code Example 
This is Just awesome man you save my life..
Thank YOu so much It was a great Help to me….
Superb Solution ………….
Thanks
nice one):thanks
superb,, Thanking u so much……..
in row bound it is giving me error that textbox is ambegious between system.web.ui.webontrols and windows controls
This example is best
but use row wise total onblur event please fast forward in example or any solution