[Solved] DatePicker doesn't work when binding to a collection

[Larry]

Found a bug with the DatePicker although I'm guessing that the same bug applies to most of the controls.

I have a model as follows:

public class Order
{
    public List<ShippingLocations> Locations { get; set; }
{

public class ShippingLocation
{
    public DateTime? EventDate { get; set; }
}

I'm using MvC 2.0's support for binding to collections as follows:

<table>
<%  for (int i=0; i < Model.ShippingLocations.Count; i++) { %>
    <tr>
        <td>
        <%=Html.EditorFor(x => x.ShippingLocations[i].EventDate)%>
        </td>
    <tr>
<% }%>
</table>

And of course I use a Date.ascx template for instantiating the Telerik DatePicker control which I have not included here for brevity.

The control renders find (with the little calendar on the right) and the markup looks fine, but the control doesn't work when you click on it.

This is because the Telerik controls do not generate correct identifiers when binding to collections.  Notice below that the id attribute of the outer DIV has bracket characters (which are invalid in html id attributes).  Whenever MvC detects you are binding to a collection, brackets are converted to underscores.  I've also included what MvC would have generated as a sample.

// incorrect identifier as generated by Telerik
// html does not allow brackets in identifiers

<DIV id="ShippingLocations[0]_ShipByDate" class="t-widget t-datepicker">
    <INPUT ... /><A...>select date</A></DIV>

// correct identifier as though generated by MvC (assuming the MvC naming conventions)

<DIV id="ShippingLocations_0__ShipByDate" class="t-widget t-datepicker">
    <INPUT ... /><A...>select date</A></DIV>

Because the identifiers are invalid, the generated jQuery selectors do not bind to the elements since they cannot be found.

So I have to ask, I've got a project due in literally less than a week.  What's the chance of a super-quick hotfix?

[Georgi Krustev]

Hello Larry,

This issue was added to our backlog and we will try to include its fix in our next official release of Telerik Components for ASP.NET MVC.

Currently I can suggest you to use the following workaround in order to avoid the aforementioned erroneous behavior:

[Date.ascx]

<%= Html.Telerik().DatePicker()
        .Name(ViewData.TemplateInfo.GetFullHtmlFieldName(string.Empty))
        .HtmlAttributes(new { id = ViewData.TemplateInfo
                                           .GetFullHtmlFieldId(string.Empty)
                                           .Replace("[","_")
                                           .Replace("]", "_") + DateTime.Now.Millisecond.ToString() })
        .Value(Model > DateTime.MinValue? Model : DateTime.Today)
%>

As you probably noticed, you need to replace "[" and "]" with "_". Thus the problem will be resolved.

I have updated your Telerik points.

Regards,
Georgi Krustev
the Telerik team

[HaBo]

I have same problem with Razor Engine
But this is not working Can any one got this worked in your projects?
My DateTime Code

@(Html.Telerik().DatePicker()
        .Name(ViewData.TemplateInfo.GetFullHtmlFieldName(string.Empty))
            .HtmlAttributes(new
            {
                id = ViewData.TemplateInfo
                             .GetFullHtmlFieldId(string.Empty)
                             .Replace("[", "_")
                             .Replace("]", "_") + DateTime.Now.Millisecond.ToString()
            })
        .Value(Model > DateTime.MinValue? Model : DateTime.Today)
)

My View

@Html.EditorFor(model=>Model.EndDate)
though This brings the value calender Icon but
when I click on Icon or text box it wont show the calender to pick date.