title: GridView - Change footer from control in Grid Data Row using javascript
body: <p>I have a <code>GridView</code> as below</p>
  
  <pre><code>&lt;asp:GridView ID="grdProducts" runat="server" AutoGenerateColumns="false" OnRowCommand="grdProducts_RowCommand"
                  OnRowDataBound="grdProducts_RowDataBound" ShowFooter="true"&gt;
                  &lt;Columns&gt;
                      &lt;asp:BoundField HeaderText="Product" DataField="ProductName" /&gt;
                      &lt;asp:TemplateField HeaderText="Quantity"&gt;
                          &lt;ItemTemplate&gt;
                              &lt;asp:HiddenField ID="hfMode" runat="server" /&gt;
                              &lt;asp:TextBox ID="txtQty" runat="server" Enabled="false" Text='&lt;%# Eval("Qty") %&gt;'&gt;&lt;/asp:TextBox&gt;
                          &lt;/ItemTemplate&gt;
                      &lt;/asp:TemplateField&gt;
                      &lt;asp:TemplateField HeaderText="Unit Price"&gt;
                          &lt;ItemTemplate&gt;
                              &lt;asp:Label ID="lblUnitPrice" runat="server" Text='&lt;%# String.Format("{0:#,#.####}",Eval("UnitPrice")) %&gt;'&gt;&lt;/asp:Label&gt;
                          &lt;/ItemTemplate&gt;
                      &lt;/asp:TemplateField&gt;
                      &lt;asp:TemplateField HeaderText="Total Price"&gt;
                          &lt;ItemTemplate&gt;
                              &lt;asp:Label ID="lblTotalPrice" runat="server" Text='&lt;%# String.Format("{0:#,#.####}",Eval("Total")) %&gt;'&gt;&lt;/asp:Label&gt;
                          &lt;/ItemTemplate&gt;
                          &lt;FooterTemplate&gt;
                              &lt;asp:Label ID="lblGrandTotal" runat="server"&gt;&lt;/asp:Label&gt;
                          &lt;/FooterTemplate&gt;
                      &lt;/asp:TemplateField&gt;
                  &lt;/Columns&gt;
              &lt;/asp:GridView&gt;
  </code></pre>
  
  <p>I have been changing 'lblTotalPrice' value using following code</p>
  
  <pre><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)
              {
              }
          }
  </code></pre>
  
  <p>and javascript</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
          function CalculateTotal(Qty, UnitPrice, Total) {
              document.getElementById(Total).innerHTML = (parseFloat(document.getElementById(Qty).value) * parseFloat(document.getElementById(UnitPrice).innerHTML)).toFixed(2);
          }
      &lt;/script&gt;
  </code></pre>
  
  <p>and its working with no fail, now I am wondering how to change text of <code>lblGrandTotal</code> in footer in same js function, but one can't access footer element as of row element. How can I do this?</p>