ASP.NET

javascript and jquery to show values in lable instead of Textbox RSS

23 replies

Last post Mar 03, 2012 11:51 AM by shafkatlee

‹ Previous Thread|Next Thread ›

roopeshreddy

All-Star

20277 Points

3349 Posts

Re: javascript and jquery to show values in lable instead of Textbox

Mar 02, 2012 02:37 PM|LINK

Hi,

Check the below code!

<div>

    <asp:gridview ID="Gridview1" runat="server" EnableViewState="true"  ShowFooter="true"
                             AutoGenerateColumns="false">
        <Columns>
        <asp:BoundField DataField="RowNumber" HeaderText="Row Number" />
        <asp:TemplateField HeaderText="Header 1">
            <ItemTemplate>
                <asp:TextBox ID="Rate" runat="server" Text='<%#Eval("Column1") %>'   CssClass="textSelector"></asp:TextBox>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="Header 2">
            <ItemTemplate>
                <asp:TextBox ID="Quantity" runat="server" Text='<%#Eval("Column2") %>'   CssClass="textSelector"></asp:TextBox>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="Header 3">
            <ItemTemplate>
                 <asp:Label ID="Amount" runat="server" Text='<%#Eval("Column3") %>'  ></asp:Label>
            </ItemTemplate>
            <FooterStyle HorizontalAlign="Right" />
            <FooterTemplate>
            Total<asp:Label ID="AmountTotal" runat="server"></asp:Label><br />
            Tax<asp:Textbox ID="Tax" runat="server"></asp:Textbox><br />
            Grand Total<asp:Label ID="GT" runat="server"></asp:Label><br />
            <asp:Button ID="ButtonAdd" runat="server" Text="Add New Row" OnClick="ButtonAdd_Click1" />
            </FooterTemplate>
        </asp:TemplateField>
        </Columns>
</asp:gridview>

    <asp:HiddenField runat="server" ID="hAmountValue" />
    
    </div>

     <script type="text/javascript">
         $(document).ready(function () {
             $(".textSelector").keyup(function () {
                 var row = $(this).closest("tr");
                 var Rate = parseFloat(row.find("input[type=text][id*=Rate]").val());
                 if (isNaN(Rate)) Rate = 0;
                 var Quantity = parseFloat(row.find("input[type=text][id*=Quantity]").val());
                 if (isNaN(Quantity)) Quantity = 0;
                 row.find("span[id*=Amount]").html(Rate * Quantity);

                 document.getElementById('hAmountValue').value = Rate * Quantity;

                 var total = calculateTotal();
                 var taxValue = parseFloat($("span[id*=TaxValue]").html());
                 if (isNaN(taxValue)) taxValue = 0;
                 $("span[id*=GrandtotalWithTax]").val(total + taxValue);
             });
         });
         function calculateTotal() {
             var total = 0;
             $("span[id*=Amount]").each(function () {
                 temp = parseFloat($(this).html());
                 if (isNaN(temp)) temp = 0;
                 total = total + temp;
             });
             $("span[id*=GrandTotalWithoutTax]").html(total);
             return total;
         }

    </script>

Check the code behind!

  protected void Page_Load(object sender, EventArgs e)
        {
            if (!Page.IsPostBack)
            {
            
                SetInitialRow();

            } 

        }

        private void SetInitialRow()
        {

            DataTable dt = new DataTable();
            DataRow dr = null;
            dt.Columns.Add(new DataColumn("RowNumber", typeof(string)));
            dt.Columns.Add(new DataColumn("Column1", typeof(string)));
            dt.Columns.Add(new DataColumn("Column2", typeof(string)));
            dt.Columns.Add(new DataColumn("Column3", typeof(string)));
            dt.Columns.Add(new DataColumn("AmountTotal", typeof(string)));
            dt.Columns.Add(new DataColumn("Tax", typeof(string)));
            dt.Columns.Add(new DataColumn("GT", typeof(string)));

            dr = dt.NewRow();
            dr["RowNumber"] = 1;
            dr["Column1"] = string.Empty;
            dr["Column2"] = string.Empty;
            dr["Column3"] = string.Empty;
            dr["AmountTotal"] = string.Empty;
            dr["Tax"] = string.Empty;
            dr["GT"] = string.Empty;
            dt.Rows.Add(dr);

            //Store the DataTable in Session 
            Session["CurrentTable"] = dt;

            Gridview1.DataSource = dt;
            Gridview1.DataBind();
        }



        private void AddNewRowToGrid()
        {
            int nLastRow = Gridview1.Rows.Count - 1;

            TextBox txtRate = Gridview1.Rows[nLastRow].Cells[0].FindControl("Rate") as TextBox;
            TextBox txtQuantity = Gridview1.Rows[nLastRow].Cells[0].FindControl("Quantity") as TextBox;
            //Label txtAmount = gridView.Rows[nLastRow].Cells[0].FindControl("Amount") as Label;

            DataTable dataTable = Session["CurrentTable"] as DataTable;

            DataRow myRow = dataTable.Rows[dataTable.Rows.Count - 1];
            myRow["Column1"] = txtRate.Text;
            myRow["Column2"] = txtQuantity.Text;

            //Since the Label content can't be retrieved, it will be stored in the 
            //hidden variable and retr
            myRow["Column3"] = hAmountValue.Value;
            
            //Add Rest of the columns

            DataRow dataRow = null;

            dataRow = dataTable.NewRow();
            dataRow["RowNumber"] = 1;
            dataRow["Column1"] = "";
            dataRow["Column2"] = "";
            dataRow["Column3"] = "";

            //Add Rest of the columns


            dataTable.Rows.Add(dataRow);

            Gridview1.DataSource = dataTable;
            Gridview1.DataBind();

            Session["CurrentTable"] = dataTable;
        }

        protected void ButtonAdd_Click1(object sender, EventArgs e)
        {
            AddNewRowToGrid();
        }

Hope it helps u...

Thanks & Regards
Roopesh Reddy C
Roopesh's Space

me_ritz

Star

9339 Points

1448 Posts

Re: javascript and jquery to show values in lable instead of Textbox

Mar 02, 2012 03:32 PM|LINK

Hi Priya...

try the code below...look for the changes in both aspx and aspx.cs

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="addingDR.aspx.cs" Inherits="addingDR" %>

<!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></title>
    <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">

        $(document).ready(function () {

            $("input[id*=ButtonAdd]").click(function () {
                var IsFirst = true;
                $("table[id*=Gridview1]").find("tr").each(function () {
                    if (!IsFirst) {
                        var Rate = $(this).find("input[id*=Rate]").val();
                        if (isNaN(Rate)) Rate = 0;
                        var Quantity = $(this).find("input[id*=Quantity]").val();
                        if (isNaN(Quantity)) Quantity = 0;
                        $(this).find("span[id*=Amt]").text(Rate * Quantity);
                        $(this).find("input[id*=hfAmount]").val(Rate * Quantity);
                        var total = calculateTotal();
                        var taxValue = parseFloat($("input[type=text][id*=Tax]").val());
                        if (isNaN(taxValue)) taxValue = 0;
                        $("span[id*=GT]").text(total + taxValue);
                        $("input[id*=hfGT]").val(total + taxValue);
                    }
                    IsFirst = false;
                }, null);
            });
              $("input[id*=Tax]").keyup(function () {
                  var IsFirst = true;
                 $("table[id*=Gridview1]").find("tr").each(function () {
                 if (!IsFirst) {
                     var Rate = $(this).find("input[id*=Rate]").val();
                     if (isNaN(Rate)) Rate = 0;
                     var Quantity = $(this).find("input[id*=Quantity]").val();
                     if (isNaN(Quantity)) Quantity = 0;
                    $(this).find("span[id*=Amt]").text(Rate * Quantity);
                    $(this).find("input[id*=hfAmount]").val(Rate * Quantity);
                    var total = calculateTotal();
                    var taxValue = parseFloat($("input[type=text][id*=Tax]").val());
                    if (isNaN(taxValue)) taxValue = 0;
                       $("span[id*=GT]").text(total + taxValue);
                       $("input[id*=hfGT]").val(total + taxValue);
                    }
                   IsFirst = false;
              }, null);
            });

        });

        $(document).ready(function () {
            $(".textSelector").keyup(function () {
                var row = $(this).closest("tr");
                var Rate = parseFloat(row.find("input[type=text][id*=Rate]").val());
                if (isNaN(Rate)) Rate = 0;
                var Quantity = parseFloat(row.find("input[type=text][id*=Quantity]").val());
                if (isNaN(Quantity)) Quantity = 0;
                row.find("span[id*=Amt]").text(Rate * Quantity);
                row.find("input[id*=hfAmount]").val(Rate * Quantity);
                var total = calculateTotal();
                var taxValue = parseFloat($("input[type=text][id*=Tax]").val());
                if (isNaN(taxValue)) taxValue = 0;
                $("span[id*=GT]").text(total + taxValue);
                $("input[id*=hfGT]").val(total + taxValue);
            });
        });

        function calculateTotal() {
            var total = 0;
            $("span[id*=Amt]").each(function () {
                temp = parseFloat($(this).text());
                if (isNaN(temp)) temp = 0;
                total = total + temp;
            });
            $("span[id*=AmountTotal]").text(total);
            $("input[id*=hfAmountTotal]").val(total);
            return total;
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:GridView ID="Gridview1" runat="server" ShowFooter="true" AutoGenerateColumns="false">
            <Columns>
                <asp:BoundField DataField="RowNumber" HeaderText="Row Number" />
                <asp:TemplateField HeaderText="Header 1">
                    <ItemTemplate>
                        <asp:TextBox ID="Rate" runat="server" CssClass="textSelector"></asp:TextBox>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="Header 2">
                    <ItemTemplate>
                        <asp:TextBox ID="Quantity" runat="server" CssClass="textSelector"></asp:TextBox>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="Header 3">
                    <ItemTemplate>
                        <asp:Label ID="Amt" runat="server"></asp:Label>
                        <asp:HiddenField runat="server" ID="hfAmount" />
                    </ItemTemplate>
                    <FooterStyle HorizontalAlign="Right" />
                    <FooterTemplate>
                        Total<asp:Label ID="AmountTotal" runat="server"></asp:Label><asp:HiddenField runat="server"
                            ID="hfAmountTotal" />
                        <br />
                        Tax<asp:TextBox ID="Tax" runat="server"></asp:TextBox><br />
                        Grand Total<asp:Label ID="GT" runat="server"></asp:Label><asp:HiddenField runat="server"
                            ID="hfGT" />
                        <br />
                        <asp:Button ID="ButtonAdd" runat="server" Text="Add New Row" OnClick="ButtonAdd_Click1" />
                    </FooterTemplate>
                </asp:TemplateField>
            </Columns>
        </asp:GridView>
    </div>
    </form>
</body>
</html>
---------------------------------------------------------

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;

public partial class addingDR : System.Web.UI.Page
{
    private void SetInitialRow()
    {

        DataTable dt = new DataTable();
        DataRow dr = null;
        dt.Columns.Add(new DataColumn("RowNumber", typeof(string)));
        dt.Columns.Add(new DataColumn("Column1", typeof(string)));
        dt.Columns.Add(new DataColumn("Column2", typeof(string)));
        dt.Columns.Add(new DataColumn("Column3", typeof(string)));
        dt.Columns.Add(new DataColumn("AmountTotal", typeof(string)));
        dt.Columns.Add(new DataColumn("Tax", typeof(string)));
        dt.Columns.Add(new DataColumn("GT", typeof(string)));

        dr = dt.NewRow();
        dr["RowNumber"] = 1;
        dr["Column1"] = string.Empty;
        dr["Column2"] = string.Empty;
        dr["Column3"] = string.Empty;
        dr["AmountTotal"] = string.Empty;
        dr["Tax"] = string.Empty;
        dr["GT"] = string.Empty;
        dt.Rows.Add(dr);

        //Store the DataTable in ViewState
        ViewState["CurrentTable"] = dt;

        Gridview1.DataSource = dt;
        Gridview1.DataBind();
    }
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!Page.IsPostBack)
        {
            SetInitialRow();
        }
    }
    private void AddNewRowToGrid()
    {

        int rowIndex = 0;
        if (ViewState["CurrentTable"] != null)
        {
            DataTable dtCurrentTable = (DataTable)ViewState["CurrentTable"];
            DataRow drCurrentRow = null;
            if (dtCurrentTable.Rows.Count > 0)
            {
                for (int i = 1; i <= dtCurrentTable.Rows.Count; i++)
                {
                    //extract the TextBox values
                    TextBox box1 = (TextBox)Gridview1.Rows[rowIndex].Cells[1].FindControl("Rate");
                    TextBox box2 = (TextBox)Gridview1.Rows[rowIndex].Cells[2].FindControl("Quantity");
                    //Label box3 = (Label)Gridview1.Rows[rowIndex].Cells[3].FindControl("Amt");
                    HiddenField box3 = (HiddenField)Gridview1.Rows[rowIndex].Cells[3].FindControl("hfAmount");
                    //Label box4 = (Label)Gridview1.FooterRow.FindControl("AmountTotal");
                    HiddenField box4 = (HiddenField)Gridview1.FooterRow.FindControl("hfAmountTotal");
                    TextBox box5 = (TextBox)Gridview1.FooterRow.FindControl("Tax");
                    //Label box6 = (Label)Gridview1.FooterRow.FindControl("GT");
                    HiddenField box6 = (HiddenField)Gridview1.FooterRow.FindControl("hfGT");

                    drCurrentRow = dtCurrentTable.NewRow();
                    drCurrentRow["RowNumber"] = i + 1;
                    drCurrentRow["Column1"] = box1.Text;
                    drCurrentRow["Column2"] = box2.Text;
                    //drCurrentRow["Column3"] = box3.Text;
                    drCurrentRow["Column3"] = box3.Value;
                    //drCurrentRow["AmountTotal"] = box4.Text;
                    drCurrentRow["AmountTotal"] = box4.Value;
                    drCurrentRow["Tax"] = box5.Text;
                    //drCurrentRow["GT"] = box6.Text;
                    drCurrentRow["GT"] = box6.Value;


                    rowIndex++;
                }

                //add new row to DataTable
                dtCurrentTable.Rows.Add(drCurrentRow);
                //Store the current data to ViewState
                ViewState["CurrentTable"] = dtCurrentTable;

                //Rebind the Grid with the current data
                Gridview1.DataSource = dtCurrentTable;
                Gridview1.DataBind();
            }
        }
        else
        {
            Response.Write("ViewState is null");
        }

        //Set Previous Data on Postbacks
        SetPreviousData();
    }
    private void SetPreviousData()
    {

        int rowIndex = 0;
        if (ViewState["CurrentTable"] != null)
        {
            DataTable dt = (DataTable)ViewState["CurrentTable"];
            if (dt.Rows.Count > 0)
            {
                for (int i = 1; i < dt.Rows.Count; i++)
                {
                    TextBox box1 = (TextBox)Gridview1.Rows[rowIndex].Cells[1].FindControl("Rate");
                    TextBox box2 = (TextBox)Gridview1.Rows[rowIndex].Cells[2].FindControl("Quantity");
                    Label box3 = (Label)Gridview1.Rows[rowIndex].Cells[3].FindControl("Amt");
                    Label box4 = (Label)Gridview1.FooterRow.FindControl("AmountTotal");
                    TextBox box5 = (TextBox)Gridview1.FooterRow.FindControl("Tax");
                    Label box6 = (Label)Gridview1.FooterRow.FindControl("GT");



                    box1.Text = dt.Rows[i]["Column1"].ToString();
                    box2.Text = dt.Rows[i]["Column2"].ToString();
                    box3.Text = dt.Rows[i]["Column3"].ToString();
                    box4.Text = dt.Rows[i]["AmountTotal"].ToString();
                    box5.Text = dt.Rows[i]["Tax"].ToString();
                    box6.Text = dt.Rows[i]["GT"].ToString();


                    rowIndex++;

                }
            }
        }
    }
    protected void ButtonAdd_Click1(object sender, EventArgs e)
    {
        AddNewRowToGrid();
    }
}

Please mark the post as "Answer" that helps you.

Edited by me_ritz on Mar 03, 2012 04:36 AM
Edited by me_ritz on Mar 03, 2012 04:37 AM
Marked as answer by Priya_here on Mar 03, 2012 06:07 AM

- Reply
Priya_here

Member

709 Points

1859 Posts

Re: javascript and jquery to show values in lable instead of Textbox

Mar 03, 2012 04:22 AM|LINK
- Reply
shafkatlee

Member

152 Points

53 Posts
Re: javascript and jquery to show values in lable instead of Textbox

Mar 03, 2012 11:51 AM|LINK
Hi Priye,

Try this:
```
$("span[id=AmountTotal]").val(total);
```