Gridview column multiplication using javascript and item template textbox.

Gridview is more powerful data control in the ASP.NET Data controls list, when we need to use a gridview with some column multiplication process that time we need to use javascript to achieve the multiplication.

Consider there is three columns in the gridview with textboxes in the item templates, by the time we need to enter the value in the first column textbox and while entering the text in the second column textbox we need the multiplied result in the third column textbox.

We need to do the calculation on the fly in the client side without using any server side function, the javascript is more useful when we need to do some client side processes. Here we going to see some client side multiplication using javascript and a little bit code in the code behind.

GridView Martkups:

<asp:GridView ID="gvSample" runat="server" AllowSorting="True"

AllowPaging="True" CellPadding="4" ForeColor="#333333" GridLines="None"

OnRowDataBound="gvSample_RowDataBound" AutoGenerateColumns="False"

ShowFooter="True">

<RowStyle BackColor="#FFFBD6" ForeColor="#333333" />

<FooterStyle BackColor="#990000" Font-Bold="True" ForeColor="White" />

<PagerStyle BackColor="#FFCC66" ForeColor="#333333" HorizontalAlign="Center" />

<SelectedRowStyle BackColor="#FFCC66" Font-Bold="True" ForeColor="Navy" />

<HeaderStyle BackColor="#990000" Font-Bold="True" ForeColor="White" />

<AlternatingRowStyle BackColor="White" />

<Columns>

<asp:TemplateField>

<ItemTemplate>

<asp:TextBox ID="txtTest1" runat="server" Width="100px"></asp:TextBox>

</ItemTemplate>

<FooterTemplate>

<asp:TextBox ID="txtTotal2" runat="server" Width="100px"></asp:TextBox>

</FooterTemplate>

</asp:TemplateField>

<asp:TemplateField>

<ItemTemplate>

<asp:TextBox ID="txtTest2" runat="server"  Width="100px"></asp:TextBox>

</ItemTemplate>

<FooterTemplate>

<asp:TextBox ID="txtTotal1" runat="server" Width="100px"></asp:TextBox>

</FooterTemplate>

</asp:TemplateField>

<asp:TemplateField>

<ItemTemplate>

<asp:TextBox ID="txtTest3" runat="server" Width="100px"></asp:TextBox>

</ItemTemplate>

<FooterTemplate>

<asp:TextBox ID="txtFootTotal" runat="server" Width="100px"></asp:TextBox>

</FooterTemplate>

</asp:TemplateField>

</Columns>

</asp:GridView>

JavaScrript:

<script type="text/javascript">

function GetClientId(strid)

{

var count=document.forms[0].length;

var i = 0 ;

var eleName;

for (i = 0 ; i < count ; i++ )

{

eleName = document.forms[0].elements[i].id;

pos=eleName.indexOf(strid) ;

if(pos >= 0) break;

}

return eleName;

}

function GetTotal(tQuantity_id, tPrice_id, lTotal_id) {

var obj_tQuantity = document.getElementById(tQuantity_id);

var obj_tPrice = document.getElementById(tPrice_id);

var obj_lTotal = document.getElementById(lTotal_id);

if (obj_tQuantity.value != "" && obj_tPrice.value != "") {

obj_lTotal.value = parseInt(obj_tQuantity.value) * parseInt(obj_tPrice.value);

}

var txtTotal = 0;

var passed = false;

var id = 0;

totalDTH = 0;

totalMCF = 0;

// Get the gridview

var grid = document.getElementById("<%= gvSample.ClientID%>");

// Get all the input controls (can be any DOM element you would like)

var inputs = grid.getElementsByTagName("input");

// Loop through all the DOM elements we grabbed

for (var i = 0; i < inputs.length; i++) {

if (inputs[i].name.indexOf("txtTest3") > 1) {

if (inputs[i].value != "") {

totalDTH = totalDTH + parseInt(inputs[i].value);

}

}

}

document.getElementById(GetClientId("txtFootTotal")).value = totalDTH;

document.getElementById(GetClientId("txtTotal1")).value = 20;

document.getElementById(GetClientId("txtTotal2")).value = 20 + totalDTH;

return false;

}

</script>

C# Code behind:

we need to add the javascript for the textboxes in the gridview's item template. So we using the row databound event to add the javascript to the textboxes. In the onchange event of the textbox we doing the calculations. And finally we showing the calculated data in the footer with the running total and a tax calculation also.

protected void gvSample_RowDataBound(object sender, GridViewRowEventArgs e)

{

if (e.Row.RowType == DataControlRowType.DataRow)

{

TextBox txtTempPrice = e.Row.FindControl("txtTest1") as TextBox;

TextBox txtTempQuantity = e.Row.FindControl("txtTest2") as TextBox;

TextBox txtTempResult = e.Row.FindControl("txtTest3") as TextBox;

txtTempPrice.Attributes.Add("onchange", "javascript:return GetTotal('" + txtTempPrice.ClientID + "', '" + txtTempQuantity.ClientID + "', '" + txtTempResult.ClientID + "');");

txtTempQuantity.Attributes.Add("onchange", "javascript:return GetTotal('" + txtTempPrice.ClientID + "', '" + txtTempQuantity.ClientID + "', '" + txtTempResult.ClientID + "');");

}

}