Sign In| Join
Get Help:Ask a Question in our Forums|Report a Bug|More Help Resources
All-Star
20277 Points
3349 Posts
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...
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...
Roopesh Reddy C
Roopesh's Space