gridview row total using javascript or jquery without postback

Question

gridview row total using javascript or jquery without postback

RAVI 496

Hello

This Is My Sql database table

USE [DEMO]
GO
 
SET ANSI_NULLS ON
GO
SET QUOTED_IDENTIFIER ON
GO
SET ANSI_PADDING ON
GO
CREATE TABLE [dbo].[Table_1](
	[Field1] [varchar](50) NULL,
	[Field2] [float] NULL,
	[Field3] [float] NULL
) ON [PRIMARY]
GO
SET ANSI_PADDING OFF
GO
INSERT [dbo].[Table_1] ([Field1], [Field2], [Field3]) VALUES (N'R1', 10.5, 4.5)
INSERT [dbo].[Table_1] ([Field1], [Field2], [Field3]) VALUES (N'E3', 5, 5.5)
INSERT [dbo].[Table_1] ([Field1], [Field2], [Field3]) VALUES (N'F8', 2.4, 6.5)
INSERT [dbo].[Table_1] ([Field1], [Field2], [Field3]) VALUES (N'M2', 3.6, 7.5)

This Is My 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>
 
</head>
<body>
    <form id="form1" runat="server">
    <div>
                            <asp:GridView ID="GridView1" runat="server"  AutoGenerateColumns="false">
                            <Columns> 
                            <asp:TemplateField HeaderText="SKIN TYPE">
                                <ItemTemplate>
                                    <asp:Label ID="L1" runat="server" Text='<%#Eval("Field1") %>'></asp:Label>
                                    
                                </ItemTemplate>
                                <HeaderStyle Font-Size="14px" ForeColor="Teal" Width="60px" />
                            </asp:TemplateField>
                            
                             <asp:TemplateField HeaderText="HP - SP - TOTAL">
                                <ItemTemplate>
                                    <asp:TextBox ID="HP" runat="server" Width="40px"></asp:TextBox>
                                    <asp:TextBox ID="SP" runat="server" Width="40px"></asp:TextBox>
                                    <asp:TextBox ID="HP_SP_TOTAL" runat="server" Width="60px"></asp:TextBox>
                                </ItemTemplate>
                                <HeaderStyle Font-Size="14px" ForeColor="Teal" Width="60px" />
                                <ItemStyle Width="200px" />
                            </asp:TemplateField>
                            
                            <asp:TemplateField HeaderText="HS - SS - TOTAL">
                                <ItemTemplate>
                                    <asp:TextBox ID="HS" runat="server" Width="40px"></asp:TextBox>
                                    <asp:TextBox ID="SS" runat="server" Width="40px"></asp:TextBox>
                                    <asp:TextBox ID="HS_SS_TOTAL" runat="server" Width="60px"></asp:TextBox>
                                </ItemTemplate>
                                <HeaderStyle Font-Size="14px" ForeColor="Teal" Width="60px" />
                                 <ItemStyle Width="200px" />
                            </asp:TemplateField>
                            
                              <asp:TemplateField HeaderText="HA-HB">
                                <ItemTemplate>
                                    <asp:TextBox ID="HP1" runat="server" Width="40px"  Text='<%#Eval("Field2") %>'></asp:TextBox>
                                    <asp:TextBox ID="SP1" runat="server" Width="40px"  Text='<%#Eval("Field3") %>'></asp:TextBox>
                                     
                                </ItemTemplate>
                                <HeaderStyle Font-Size="14px" ForeColor="Teal" Width="60px" />
                                 <ItemStyle Width="200px" />
                            </asp:TemplateField>
                            </Columns>
                            </asp:GridView>
    </div>
    </form>
</body>
</html>

This Is My aspx C# Code

using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using System.Data.SqlClient;
using System.IO;
using System.Collections.Generic;
using System.Data;
using System.Data.SqlClient;
using System.Web.Services;
using System.Text;

public partial class _Default : System.Web.UI.Page
{

    protected void Page_Load(object sender, EventArgs e)
    {
        if (!Page.IsPostBack)
        {
            //Table_1
            DataTable dt = new DataTable();
            SqlConnection con1 = new SqlConnection(ConfigurationManager.ConnectionStrings["CHEMIMSConnectionString"].ConnectionString);
            con1.Open();
            SqlCommand cmd1 = new SqlCommand("select * from Table_1", con1);
            SqlDataAdapter ada1 = new SqlDataAdapter(cmd1);
            ada1.Fill(dt);
            GridView1.DataSource = dt;
            GridView1.DataBind();
            con1.Close();
            con1.Dispose();
        } 
    }

    
   
    
 
   
   
}

This is my resultset

For Example

If I type anything In HP textbox all other should caluclate using onkeypress events without postback automtically

For HP tetxbox if i type 10 then Value ofHP_SP_TOTAL tetbox should be like HP+SP Value and in sp it has to show zero value.
For HS textbox value should comes from HP1 textbox (multiply * ) HP textbox = HS textbox value .
For SS textbox value should comes from SP1 textbox (multiply * ) SP textbox = SS textbox value
For HS_SS_TOTAL value should comes from HS + SS textbox value

Like this output
Note Gridview will be in contentplaceholder User's image

Answer 1

Hi @RAVI,

Firstly, you need to set MasterPageFile. Like this . <%@ Page Language="C#" AutoEventWireup="true" MasterPageFile="~/Site.Master"…

And then set your GridView control in Content, simple code below:

<%@ Page Language="C#" AutoEventWireup="true" MasterPageFile="~/Site.Master" CodeFile="Default.aspx.cs" Inherits="WebApplication10._Default" %>
    <asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">
        <asp:GridView ID="GridView1" runat="server"  AutoGenerateColumns="false">
        <Columns>
        <asp:TemplateField HeaderText="SKIN TYPE">
            <ItemTemplate>
                <asp:Label ID="L1" runat="server" Text='<%#Eval("Field1") %>'></asp:Label>
            </ItemTemplate>
            <HeaderStyle Font-Size="14px" ForeColor="Teal" Width="60px" />
        </asp:TemplateField>
            <asp:TemplateField HeaderText="HP - SP - TOTAL">
            <ItemTemplate>
                <asp:TextBox ID="HP" runat="server" Width="40px" CssClass="hp-textbox"></asp:TextBox>
                <asp:TextBox ID="SP" runat="server" Width="40px" CssClass="sp-textbox"></asp:TextBox>
                <asp:TextBox ID="HP_SP_TOTAL" runat="server" Width="60px" CssClass="hp-sp-total-textbox"></asp:TextBox>
            </ItemTemplate>
            <HeaderStyle Font-Size="14px" ForeColor="Teal" Width="60px" />
            <ItemStyle Width="200px" />
        </asp:TemplateField>
        <asp:TemplateField HeaderText="HS - SS - TOTAL">
            <ItemTemplate>
                <asp:TextBox ID="HS" runat="server" Width="40px" CssClass="hs-textbox"></asp:TextBox>
                <asp:TextBox ID="SS" runat="server" Width="40px" CssClass="ss-textbox"></asp:TextBox>
                <asp:TextBox ID="HS_SS_TOTAL" runat="server" Width="60px" CssClass="hs-ss-total-textbox"></asp:TextBox>
            </ItemTemplate>
            <HeaderStyle Font-Size="14px" ForeColor="Teal" Width="60px" />
                <ItemStyle Width="200px" />
        </asp:TemplateField>
            <asp:TemplateField HeaderText="HA-HB">
            <ItemTemplate>
                <asp:TextBox ID="HP1" runat="server" Width="40px" CssClass="hp1-textbox" Text='<%#Eval("Field2") %>'></asp:TextBox>
                <asp:TextBox ID="SP1" runat="server" Width="40px" CssClass="sp1-textbox" Text='<%#Eval("Field3") %>'></asp:TextBox>
            </ItemTemplate>
            <HeaderStyle Font-Size="14px" ForeColor="Teal" Width="60px" />
                <ItemStyle Width="200px" />
        </asp:TemplateField>
        </Columns>
        </asp:GridView>
            <script src=https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js></script>
    <script>

        $(document).ready(function () {
            $('.hp-sp-total-textbox, .hs-textbox, .ss-textbox, .hs-ss-total-textbox').prop('readonly', true);

            $(document).on('keyup', '.hp-textbox, .sp-textbox', function () {
                var $row = $(this).closest('tr');
                var hp = parseFloat($row.find('.hp-textbox').val()) || 0;
                var sp = parseFloat($row.find('.sp-textbox').val()) || 0;
                var hp1 = parseFloat($row.find('.hp1-textbox').val()) || 0;
                var sp1 = parseFloat($row.find('.sp1-textbox').val()) || 0;
                if (this.className.includes('hp-textbox') && $row.find('.sp-textbox').val() === '') {
                    $row.find('.sp-textbox').val('0');
                }

                if (this.className.includes('sp-textbox') && $row.find('.hp-textbox').val() === '') {
                    $row.find('.hp-textbox').val('0');
                }
                var hs = hp * hp1;
                var ss = sp * sp1;
                $row.find('.hs-textbox').val(hs.toFixed(2));
                $row.find('.ss-textbox').val(ss.toFixed(2));
                $row.find('.hp-sp-total-textbox').val((hp + sp).toFixed(2));
                $row.find('.hs-ss-total-textbox').val((hs + ss).toFixed(2));
            });
        });
    </script>
        </asp:Content>

Result:

result

Best regards,

Xudong Peng

If the answer is the right solution, please click "Accept Answer" and kindly upvote. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

XuDong Peng-MSFT 6,776 Reputation points Microsoft Vendor

2023-11-22T06:40:13.4133333+00:00

Hi @RAVI,

Are there any updates on this issue? I am glad to help if you have any other questions.

gridview row total using javascript or jquery without postback

1 answer

Activity