How to get the clientid of the control which is placed inside the Edit item template of the gridview in javascript

i to get the clientid of the control which is placed inside the Edit item template of the gridview in javascript without going to the server side code..

  <asp:TemplateField HeaderText="FromDate" SortExpression="FromDate">
                    <ItemTemplate>
                        <asp:Label ID="FromDate" runat="server" Text='<%#((DateTime)DataBinder.Eval(Container.DataItem,"FromDate")).ToShortDateString()%>'></asp:Label>
                        <asp:HiddenField ID="ID" runat="server" Value='<%#Eval("ID") %>' />
                        <asp:HiddenField I开发者_开发技巧D="ApproveLeaveID" runat="server" Value='<%#Eval("ApproveLeaveID") %>' />
                        <asp:HiddenField ID="hidLevel3" runat="server" Value='<%#Eval("Level3ManagerACENumber") %>' />

                                     </ItemTemplate>
                    <EditItemTemplate>
                        <table>
                            <tr>
                                <td>
                                    <asp:TextBox ID="txtFDate" runat="server" Text='<%#((DateTime)DataBinder.Eval(Container.DataItem,"FromDate")).ToShortDateString()%>'>
                                    </asp:TextBox>
                                    <asp:HiddenField ID="ID" runat="server" Value='<%#Eval("ID") %>' />
                                    <asp:HiddenField ID="ApproveLeaveID" runat="server" Value='<%#Eval("ApproveLeaveID") %>' />
                                    <asp:HiddenField ID="hidLevel3" runat="server" Value='<%#Eval("Level3ManagerACENumber") %>' />
                                </td>
                                <td>
                                    <a onclick="showCalendarControl(3,<%# Container.ItemIndex %>)">
                                        <img id="img3" runat="server" alt="Clock" src="../Images/clock_add.png" style="border: none" /></a>
                                </td>
                            </tr>
                        </table>
                    </EditItemTemplate>
                    <ItemStyle HorizontalAlign="Left" />
                    <HeaderStyle HorizontalAlign="Center" />
                </asp:TemplateField>
                <asp:TemplateField HeaderText="ToDate" SortExpression="ToDate">
                    <ItemTemplate>
                        <asp:Label ID="ToDate" runat="server" Text='<%#((DateTime)DataBinder.Eval(Container.DataItem,"ToDate")).ToShortDateString()%>'>'></asp:Label>
                    </ItemTemplate>
                    <EditItemTemplate>
                        <table>
                            <tr>
                                <td>
                                    <asp:TextBox ID="txtTDate" runat="server" Text='<%#((DateTime)DataBinder.Eval(Container.DataItem,"ToDate")).ToShortDateString()%>'>
                                    </asp:TextBox>
                                </td>
                                <td>
                                    <a onclick="showCalendarControl(4,<%# Container.ItemIndex %>)">
                                        <img id="img4" runat="server" alt="Clock" src="../Images/clock_add.png" style="border: none" /></a>
                                </td>
                            </tr>
                        </table>
                    </EditItemTemplate>
                    <ItemStyle HorizontalAlign="Left" />
                    <HeaderStyle HorizontalAlign="Center" />
                </asp:TemplateField>

This is my java script:

 function showCalendarControl(ControlNo,index) {
var textField;
if(ControlNo==1)
{
textField=document.getElementById('<%=txtFromDate.ClientID%>');
}
else
{
textField=document.getElementById('<%=txtToDate.ClientID%>');
}
if(ControlNo==3)
{
    textField=document.getElementsByClassName('txtFDate')[index];
}
if(ControlNo==4)
{
    textField=document.getElementsByClassName('txtTDate')[index];
}

  calendarControl.show(textField);
}

first two textbox(txtFromDate,txtToDate) is for the not in the grid control...

You can fetch the elements in the ItemDataBound event of the grid (using FindControl), and then pass the ClientID of the textbox as a parameter to showCalendarControl:

TextBox txtFDate = e.Item.FindControl("txtFDate") as TextBox;
TextBox txtTDate = e.Item.FindControl("txtTDate") as TextBox;
HtmlAnchor link = e.Item.FindControl("aLink") as HtmlAnchor;

if (txtTDate != null && txtFDate != null && link != null)
{
   link.Attributes.Add("onclick", String.Format("showCalendarControl({0}, '{1}', '{2}')", 4, txtFDate.ClientID, txtTDate.ClientID);
}

(you'll also need to add an ID and a runat="server" to your link. I'm also assuming txtFDate is declared in your EditTemplate although it's not there. The ControlNo parameter could be a data key instead of a constant as in the example, it's not really clear what it is)

Then, in your function, use the clientID parameters to get the textboxes:

function showCalendarControl(ControlNo, txtFDateClientID, txtTDateClientID) {
var textField;
if(ControlNo==3)
{
textField=document.getElementById(txtFDateClientID);
}
if(ControlNo==4)
{
textField=document.getElementById(txtTDateClientID);
}
  calendarControl.show(textField);
}

The problem is that every control should have unique server ID. So server side controls which are placed inside template are rendered multiple times with different auto generated ids based on ID you've specified in the template. You can easily see it if you will have a look on the generated html. Therefore your js code is accessing only the html element with hardcoded id. As I guess it is placed in the first row.

Simple solution is to describe your text box in a following way

<asp:TextBox ID="txtTDate" runat="server" CssClass="txtTDate" Text='<%#((DateTime)DataBinder.Eval(Container.DataItem,"ToDate")).ToShortDateString()%>'>
                                    </asp:TextBox>

Then modify the js function in the following way :

function showCalendarControl(ControlNo, index) {
var textField;
if(ControlNo==3)
{
    textField=document.getElementsByClassName('txtFDate')[index];
}
if(ControlNo==4)
{
    textField=document.getElementsByClassName('txtTDate')[index];
}
  calendarControl.show(textField);
}

And modify your link as the following :

<a onclick="showCalendarControl(4, <%# Container.DataItemIndex %>)">

Updated the answer DataItemContainer has DataItemIndex property which has to be used in this case.