How to access the ID of dropdownlist in EditItemTemplate using Javascript?

2015-08-26 javascript c# asp.net

I want to access the id of dropdownlist which is in EditItemTemplate of GridView. I have access the id in FooterRow by using

 var ddlpresentday = document.getElementById("<%=((DropDownList)gridEarning.FooterRow.
FindControl("ddlFPresentDay")).ClientID%>");

but facing problem when GridView is in Edit Mode. Kindly help me.

GridView:

<asp:GridView ID="gridEarning" runat="server">
  <asp:TemplateField HeaderText="Present Days to be considerd on" 
    SortExpression="TAXABLE" meta:resourcekey="TemplateField19Resource">
    <EditItemTemplate>
      <asp:DropDownList ID="ddlEditPresentDay" CssClass="ddlEditPresentDay" 
        runat="server" Enabled="false" Height="20px" Width="110px"      
        meta:resourcekey="ddlPresentDayResource2">
          <asp:ListItem Value="0" meta:resourcekey="ddlPreDaysListItemResource1">All Days</asp:ListItem>
          <asp:ListItem Value="1" meta:resourcekey="ddlPreDaysListItemResource2">Business Days</asp:ListItem>
          <asp:ListItem Value="2" meta:resourcekey="ddlPreDaysListItemResource3">Off Days and Holidays</asp:ListItem>
      </asp:DropDownList>
    </EditItemTemplate>
    <FooterTemplate>
      <asp:DropDownList ID="ddlFPresentDay" runat="server" Height="20px" Enabled="false" Width="110px" meta:resourcekey="ddlPresentDayResource2">
        <asp:ListItem Value="0" meta:resourcekey="ddlPreDaysListItemResource1">All Days</asp:ListItem>
        <asp:ListItem Value="1" meta:resourcekey="ddlPreDaysListItemResource2">Business Days</asp:ListItem>
        <asp:ListItem Value="2" meta:resourcekey="ddlPreDaysListItemResource3">Off Days and Holidays</asp:ListItem>
      </asp:DropDownList>
    </FooterTemplate>
    <ItemTemplate>
      <asp:Label ID="lblPresentDays" runat="server" Text="Helllo"
        meta:resourcekey="lblPresentDaysResource1"></asp:Label>
    </ItemTemplate>
  </asp:TemplateField>
</GridView>

Answers

JQuery is huge help in such cases (specifically css class selector). Anyway even without jquery you can define custom wrapper element with unique id and rely on that element instead - like:

<FooterTemplate>
  <span id="gridFooter">
    <asp:DropDownList ... ></asp:DropDownList>
  </span>
</FooterTemplate>

And then you can select it simply like:

var ddlpresentday = document.getElementById("gridFooter").firstElementChild;

EDIT

Adding jQuery solution as well:

<FooterTemplate>
  <asp:DropDownList CssClass="unique-footer-select" ... ></asp:DropDownList>
</FooterTemplate>  

var ddlpresentday = $(".unique-footer-select");

Related