I have a form, portions of which are required to be dynamically cloned via javascript to allow users to enter additional details. Everything works fine, except if one of the textboxes being cloned has a CalendarExtender attached for date picking. The textbox is cloned, but the calendar extender is not, as it obviously does not exist as an element in the DOM and the events are not directly attached to the textbox being cloned.
So, what I am looking for is a way to determine, preferably by inspecting some attribute of the textbox itself, if there is a calendar extender attached. Or if there is some way to check the collection of extenders for the textbox id etc. Then I could add a new behavior to the cloned textbox.
Any advice for where to find this data would be appreciated. Thanks.
Update, examples
This is the asp.net ajax calendarExtender I am using, the page has live examples of it in use. (I believe you can also download the toolkit from the site.)
http://www.asp.net/AjaxLibrary/AjaxControlToolkitSampleSite/Calendar/Calendar.aspx
I will provide here a simplified version of the code I am using (cut out everything on the page except the controls in question.)
On the ASP.Net page I have a table containing a textbox with the calendar extender attached. As you can see here it is the property of the calendar extender that refers to the textbox, so the textbox has no special properties server side.
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" Runat="Server">
<table>
<tr>
<td>
<asp:TextBox ID="txtDateFrom" runat="server" />
<ajx:CalendarExtender ID="calFrom" runat="server" TargetControlID="txtDateFrom" Format="dd/MM/yyyy" />
</td>
</tr>
</table>
</asp:Content>
The rendered client side HTML is as follows. As you can see there is nothing in the table to indicate the presence of the calendar extender, it only exists as a script generated as the very last thing in the page.
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>...</head>
<body>
<form method="post" action="Default.aspx" id="ctl101">
<table>
<tr>
<td>
<input name="ctl00$MainContent$txtDateFrom" type="text" id="txtDateFrom">
</td>
</tr>
</table>
...
<script type="text/javascript">
//<![CDATA[
Sys.Application.add_init(function() {
$create(Sys.Extended.UI.CalendarBehavior, {"format":"dd/MM/yyyy","id":"calFrom"}, null, null, $get("txtDateFrom"));
});
//]]>
</script>
</form>
</body>
</html>
The javascript used to clone the table row is as follows:
function addRow(tr) {
var cl = tr.cloneNode(true);
cl.style.display = "table-row";
for (var i = 0; i < cl.cells.length; i++)
if (cl.cells[i].firstChild) {
cl.cells[i].firstChild.value = ""; // reset inputs
if (cl.cells[i].firstChild.id.match(/date/i)) // check & add calendar extender
$create(Sys.Extended.UI.CalendarBehavior, { "format": "dd/MM/yyyy", "id": "cal"+tr.rowIndex }, null, null, cl.cells[i].firstChild);
}
tr.parentNode.insertBefore(cl, tr.nextSibling);
}