Acces label in footertemplate of gridview in javascript

Question

Hi,

I have a label in a footertemplate of a gridviewcolumn. I want to put a calculated value (total of the rowvalues) in this label in javascript. I can access all the textboxes in my Itemtemplates, but I don't know how to find my label in my foortertemplates.

.aspx: column in gridview

  <asp:TemplateField HeaderText="Prijs excl. BTW">
  <ItemTemplate>
    <asp:TextBox ID="txtBTWTarief" Width="60px" runat="server" Text='<%# Eval("exclBTW") %>'   />
  </ItemTemplate>
  <FooterTemplate>
    <asp:Label ID="lblTotexclBTW" runat="server" Text="0" Width="60px"></asp:Label>
  </FooterTemplate>
  </asp:TemplateField>

.aspx.cs: eventhandlers attached to my textboxes and ddl

protected void gridviewDiversen_RowDataBound(object sender, GridViewRowEventArgs e)
{
    if (e.Row.RowType == DataControlRowType.DataRow)
    {
        string evtHandler;
        int rowIndex = Convert.ToInt32(e.Row.DataItemIndex) + 1;
        evtHandler = "updateValue(" + gridviewDiversen.ClientID + "," + rowIndex + ")";
        ((TextBox)e.Row.FindControl("txtBTWTarief")).Attributes.Add("onblur", evtHandler);
        ((TextBox)e.Row.FindControl("txtKorting")).Attributes.Add("onblur", evtHandler);
        ((DropDownList)e.Row.FindControl("ddlBTW")).Attributes.Add("onchange", evtHandler);
    }
}

javascript: eventhandlers in action

    function updateValue(theGrid, rowIdx)
    {
        var ddl, t1, t2, l1, l2, l3, l4, k1; 
        ddl = document.getElementById(theGrid.rows[rowIdx].cells[2].children[0].id);
        t1 = document.getElementById(theGrid.rows[rowIdx].cells[3].children[0].id); 
        //calculations...
    }

In this script I find my textboxes in the Itemtemplate, but I don't know how to find my labels in the footer template. Anyone an idea? Thx

Answer 1

If you do calculations in JS and need to find the label using client side you can use jQuery:

$('.yourLabelClass').html('Updated results');

or just JS:

var labels = document.getElementsByTagName("span");
for (var i=0; i < labels[i]; i++) {
    if (labels[i].className && labels[i].className == 'yourLabelClass')
        labels[i].innerHTML = 'Updated results';
}