GridView - Change footer from control in Grid Data Row using javascript

Question

I have a GridView as below

<asp:GridView ID="grdProducts" runat="server" AutoGenerateColumns="false" OnRowCommand="grdProducts_RowCommand" OnRowDataBound="grdProducts_RowDataBound" ShowFooter="true"> <Columns> <asp:BoundField HeaderText="Product" DataField="ProductName" /> <asp:TemplateField HeaderText="Quantity"> <ItemTemplate> <asp:HiddenField ID="hfMode" runat="server" /> <asp:TextBox ID="txtQty" runat="server" Enabled="false" Text='<%# Eval("Qty") %>'></asp:TextBox> </ItemTemplate> </asp:TemplateField> <asp:TemplateField HeaderText="Unit Price"> <ItemTemplate> <asp:Label ID="lblUnitPrice" runat="server" Text='<%# String.Format("{0:#,#.####}",Eval("UnitPrice")) %>'></asp:Label> </ItemTemplate> </asp:TemplateField> <asp:TemplateField HeaderText="Total Price"> <ItemTemplate> <asp:Label ID="lblTotalPrice" runat="server" Text='<%# String.Format("{0:#,#.####}",Eval("Total")) %>'></asp:Label> </ItemTemplate> <FooterTemplate> <asp:Label ID="lblGrandTotal" runat="server"></asp:Label> </FooterTemplate> </asp:TemplateField> </Columns> </asp:GridView>

I have been changing 'lblTotalPrice' value using following code

protected void grdProducts_RowDataBound(object sender, GridViewRowEventArgs e) { try { if (e.Row.RowType == DataControlRowType.DataRow) { TextBox txtQty = (TextBox)e.Row.FindControl("txtQty"); Label lblUnitPrice = (Label)e.Row.FindControl("lblUnitPrice"); Label lblTotalPrice = (Label)e.Row.FindControl("lblTotalPrice"); txtQty.Attributes.Add("onblur", "CalculateTotal('" + txtQty.ClientID + "','" + lblUnitPrice.ClientID + "','" + lblTotalPrice.ClientID + "')"); } } catch (Exception ex) { } }

and javascript

<script type="text/javascript"> function CalculateTotal(Qty, UnitPrice, Total) { document.getElementById(Total).innerHTML = (parseFloat(document.getElementById(Qty).value) * parseFloat(document.getElementById(UnitPrice).innerHTML)).toFixed(2); } </script>

and its working with no fail, now I am wondering how to change text of lblGrandTotal in footer in same js function, but one can't access footer element as of row element. How can I do this?

Vikky · Accepted Answer · 2014-06-12 11:19:16Z

1

use somethis like this in your rowDatabound event to find the Footer Lable and add its id in javascript

Label lblGrandTotal= (Label)grdProducts.FooterRow.FindControl("lblGrandTotal");

answered Jun 12, 2014 at 11:19

Vikky

7643 gold badges16 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Imad Over a year ago

Suppose I found that control, so how can I pass this control's client id to js function as onblur event of textbox is written after satisfying if (e.Row.RowType == DataControlRowType.DataRow) ?

Vikky Over a year ago

you can use this line inside if (e.Row.RowType == DataControlRowType.DataRow) as it is diretly looking the footer Row (which is obvious only one) and like others you can use lblGrandTotal.ClientID

Imad Over a year ago

That was a first thing I tried... Then I realized, footer label is not a part of DataRow then how it will be found there :P ;)

Vikky Over a year ago

you are using TextBox txtQty = (TextBox)e.Row.FindControl("txtQty"); It is looking into current datarow and (Label)grdProducts.FooterRow.FindControl("lblGrandTotal") looking directly to Footer Row. here You are not finding footer element in datarow here you are finding Footer Element From Current Datarow to which you are binding data. :)

Collectives™ on Stack Overflow

GridView - Change footer from control in Grid Data Row using javascript

1 Answer 1

4 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Related