In this article I will explain with an example, how to multiply two GridView columns and display result in third column using JavaScript and jQuery in ASP.Net.
This example will illustrate by multiplying Price column with Quantity column and displaying the result in Total column using JavaScript and jQuery in ASP.Net.
 
 
HTML Markup
The HTML Markup consists of an ASP.Net GridView with two BoundField columns and two TemplateField columns.
The first TemplateField column consists of a TextBox for entering Quantity while the second TemplateField column consists of a Label for displaying Row Total.
Below the GridView, there’s a Label for displaying the Grand Total.
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false">
    <Columns>
        <asp:BoundField DataField="Item" HeaderText="Item" />
        <asp:BoundField DataField="Price" HeaderText="Price" ItemStyle-CssClass="price" />
        <asp:TemplateField HeaderText="Quantity">
            <ItemTemplate>
                <asp:TextBox ID="txtQuantity" runat="server"></asp:TextBox>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="Total">
            <ItemTemplate>
                <asp:Label ID="lblTotal" runat="server" Text="0"></asp:Label>
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>
<br />
Grand Total:
<asp:Label ID="lblGrandTotal" runat="server" Text="0"></asp:Label>
 
 
Namespaces
You will need to import the following namespace.
using System.Data;
 
 
Binding the ASP.Net GridView control
The GridView is populated with a dynamic DataTable with some dummy data inside the Page Load event.
Note: You can learn more about this dynamic DataTable in my article Create DataTable dynamically and bind to GridView in ASP.Net.
 
protected void Page_Load(object sender, EventArgs e)
{
    DataTable dt = new DataTable();
    dt.Columns.AddRange(new DataColumn[2] { new DataColumn("Item"), new DataColumn("Price") });
    dt.Rows.Add("Shirt", 200);
    dt.Rows.Add("Football", 30);
    dt.Rows.Add("Bat", 22.5);
    GridView1.DataSource = dt;
    GridView1.DataBind();
}
 
 
Multiplying two ASP.Net GridView columns and displaying result in Third column
Inside the jQuery document ready event handler, all the Quantity TextBoxes in GridView are assigned value zero.
Then each Quantity TextBox in GridView is assigned OnChange and OnKeyUp event handlers.
Inside the OnChange and OnKeyUp event handlers, first the value is checked for valid Float number and if it is valid Float number it is multiple with the Price column value to get Row Total which is later displayed in the Total Label in the respective GridView Row.
Then a loop is executed over all the Total Labels in GridView and the Grand Total is calculated which is later displayed in the Grand Total Label.
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
    $(function () {
        $("[id*=txtQuantity]").val("0");
    });
    $("body").on("change keyup", "[id*=txtQuantity]", function () {
        //Check whether Quantity value is valid Float number.
        var quantity = parseFloat($.trim($(this).val()));
        if (isNaN(quantity)) {
            quantity = 0;
        }
 
        //Update the Quantity TextBox.
        $(this).val(quantity);
 
        //Calculate and update Row Total.
        var row = $(this).closest("tr");
        $("[id*=lblTotal]", row).html(parseFloat($(".price", row).html()) * parseFloat($(this).val()));
 
        //Calculate and update Grand Total.
        var grandTotal = 0;
        $("[id*=lblTotal]").each(function () {
            grandTotal = grandTotal + parseFloat($(this).html());
        });
        $("[id*=lblGrandTotal]").html(grandTotal.toString());
    });
</script>
 
 
Screenshot
Multiply two ASP.Net GridView columns and display result in Third using JavaScript and jQuery
 
 
Browser Compatibility

The above code has been tested in the following browsers.

Internet Explorer  FireFox  Chrome  Safari  Opera 

* All browser logos displayed above are property of their respective owners.

 
 
Demo
View Demo
 
 
Downloads
Download Code