I have implemented TemplateFields in a Gridview to dynamically create textboxes as records are added. However, due to the limitation of not being able to have ASP controls with the same ID's, using ClientIDMode=Static is not an option for these controls.
<div class="row">
<div class="col-md-12">
<div class="form-horizontal">
<div class="control-group">
<asp:Panel ID="pnlDevMembers" runat="server" Height="100%" ScrollBars="None" Visible="true" Width="100%">
<asp:GridView ID="grdDevSignoffs" runat="server" OnRowCommand="grdDevSignoffs_RowCommand" AutoGenerateColumns="false" CssClass="table-striped" cellspacing="30" GridLines="None" CellPadding="10" RowStyle-Height="40px" HorizontalAlign="Center" BorderStyle="None">
<Columns>
<asp:BoundField HeaderText="Event" DataField="desc" ControlStyle-Width="100px" />
<asp:TemplateField ControlStyle-BorderStyle="None" ControlStyle-BorderColor="Transparent" ItemStyle-HorizontalAlign="Center" HeaderText=" Name">
<ItemTemplate>
<div style="padding-left: 10px; padding-right: 10px;"><%#Eval("Lastname")%>, <%#Eval("FirstName")%></div>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderStyle-HorizontalAlign="Center" HeaderText=" Signoff Date" HeaderStyle-BorderStyle="None" HeaderStyle-BorderWidth="0px" ControlStyle-Width="100px"
ItemStyle-HorizontalAlign="Center">
<ItemTemplate>
<asp:textbox ID="txtDevDate" runat="server" Text='<%# Bind("SignOffDate") %>' CssClass="form-control input-sm datepick" Width="140" style="margin-left: 20px;margin-right: 20px;"/>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField ControlStyle-BorderStyle="None" ControlStyle-BorderColor="Transparent" ItemStyle-HorizontalAlign="Center">
<ItemTemplate>
<asp:LinkButton ID="btnSignoffDevUser" runat="server" CssClass="btn btn-small btn-success" CommandName="signoffRecord" CommandArgument="<% CType(Container,GridViewRow).RowIndex %>"><i class="glyphicon glyphicon-ok"></i> Signoff</asp:LinkButton>  
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField ControlStyle-BorderStyle="None" ControlStyle-BorderColor="Transparent" ItemStyle-HorizontalAlign="Center">
<ItemTemplate>
<asp:LinkButton ID="btnUndoSignoffDevUser" runat="server" CssClass="btn btn-small btn-danger" CommandName="UndoRecordSignoff" CommandArgument="<% CType(Container,GridViewRow).RowIndex %>"><i class="glyphicon glyphicon-remove"></i> Undo Signoff</asp:LinkButton>  
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField ControlStyle-BorderStyle="None" ControlStyle-BorderColor="Transparent" ItemStyle-HorizontalAlign="Center" >
<ItemTemplate>
<asp:LinkButton ID="btnRemoveDevUser" runat="server" CssClass="btn btn-small btn-danger" CommandName="removeRecord" CommandArgument="<% CType(Container,GridViewRow).RowIndex %>"><i class="glyphicon glyphicon-minus"></i></asp:LinkButton>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</asp:Panel>
</div>
</div>
</div><!--end rw1col1-->
</div>
In an attempt to trigger the datepicker function when elements with the CSS class "form-control input-sm datepick" are clicked, I assigned this class to the controls. However, the JavaScript code doesn't seem to be executing properly. The same script works perfectly fine when tested against a control with a static ID, which leads me to believe it's not an issue with the JS structure.
<script type="text/javascript">
$(document).ready(function () {
$('.form-control input-sm datepick').each(function () {
$(this).datepicker();
});
});
</script>
Is there a way to implement the datepicker for dynamically created fields considering that the IDs are generated at runtime?