Question

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 ID="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…

Answer 1

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);
}