John Meyer John Meyer - 8 months ago 66
jQuery Question

unable to bind datepicker to edititemtemplate in detailsview

I have the following Template in my detailsview to edit a date:

<asp:TextBox id="EndDate" class="datefield" text='<%# Bind("EndDate")%>' runat="server"/>

And I'm changing over to the edit mode with a button with the following code:

protected void Edit_Assignment(object sender, EventArgs e) {

if (_gvAssignments.CurrentMode != DetailsViewMode.Edit) {


I also have both a document ready and a onclientclick function to invoke the datepicker.

$(document).ready(function() {

function updateDatepickFields() {
alert("Button clicked");
$(".datefield").on("focus",function() {

however it just does not seem to be attaching the datepicker no matter what code I use.


Right click your page in a browser, do an Inspect Element, and find your EndDate element. You'll notice that its ID renders as something completely different! This is because ASP.Net will rename server-side controls to avoid identity conflicts.

With this in mind, you might start to realize the issue - Referencing $('#EndDate') in Jquery won't work, because there is no element with that ID.

The easiest option would be to add the ClientIDMode="static" property to your textboxes:

<asp:Textbox runat="server" ClientIdMode="static" ID="EndDate">

This forces the element to render with the given ID instead of being "rewritten". You can then access these elements just as you normally would and be on your merry way.

If you have something like an <asp:Repeater> or <asp:GridView>, avoid this method. Because the elements are repeated, this would result in duplicate IDs. In such a case, use ClientIdMode="Predictable", which would render your items as something more like EndDate_0, EndDate_1, and so on.