Kendo MVC DatePickerFor does not render in list after first record

Question

VS 2012 Pro MVC4 Internet app with

• Microsoft.AspNet.MVC 5.1.1 NuGet packages loaded
• jQuery 2.1.0 (with UI Combined 1.10.4, validation, and unobtrusive items)
• Boostrap 3.1
• Modernizer 2.7.2
• WebGrease 1.6.0
• Microsoft ASP.NET Identity Owin 2.0.0 (and all dependencies)
• Kendo Commercial license for version 2014.1.318.545

On a partial view, with a model:

@model IEnumerable<HTServices.Models.TableName>

@foreach (var item in Model)
{
    @Html.HiddenFor(m => item.TableNameId)
    <div class="row" style="margin-top: 8px;">
        <div class="col-sm-4 col-md-4 col-lg-4">
            @Html.DisplayFor(m => item.TableNameShow)
        </div>
        <div class="col-sm-4 col-md-4 col-lg-4">
            @Html.TextBoxFor(m => item.Note, new { @class = "text-box single-line wide-full" })
        </div>
        <div class="col-sm-2 col-md-2 col-lg-2">
            @(Html.Kendo().DatePickerFor(m => item.ExpirationDt)
                 .Start(CalendarView.Month)
                 .Min(DateTime.Now.AddMonths(-2))
                 .Max(DateTime.Now.AddMonths(12)))
         </div>
         <div class="col-sm-1 col-md-1 col-lg-1">
            @Html.ActionLink("Delete", "TableNameDelete", new { id = item.TableNameId }, new { onclick = "return deleteTableNameRecById(this);", @class = "RemoveLinkImage" })
         </div>
    </div> 
}

Here, only the first DatePickerFor control is rendered.

In the HTML, the script block for the DatePicker is added to the HTML, but the entire span wrapper for the Kendo dpf is missing:

here is the first one that is good, and works:

<div class="col-sm-2 col-md-2 col-lg-2">
    <span class="k-widget k-datepicker k-header k-input" style="width: 100%;">
        <span class="k-picker-wrap k-state-default">
            <input name="item.ExpirationDt" class="k-input" id="item_ExpirationDt" role="combobox" aria-disabled="false" aria-expanded="false" aria-readonly="false" aria-owns="item_ExpirationDt_dateview" style="width: 100%;" type="text" value="4/1/2014" data-val-required="The Expiration Date field is required." data-val="true" data-val-date="The field Expiration Date must be a date." data-role="datepicker">
                <span class="k-select" role="button" aria-controls="item_ExpirationDt_dateview" unselectable="on">
                       <span class="k-icon k-i-calendar" unselectable="on">select</span>
                </span>
        </span>
    </span>
    <script>
        jQuery(function(){jQuery("#item_ExpirationDt").kendoDatePicker({"format":"M/d/yyyy", "min":new Date(2014,1,1,8,56,43,286), "max":new Date(2015,3,1,8,56,43,286), "start":"month"});});
     </script>
</div>

The above only exists for the first item rendered.

All others after the first are only :

<div class="col-sm-2 col-md-2 col-lg-2">
       <input name="item.ExpirationDt" id="item_ExpirationDt" type="date" value="4/1/2014">
            <script>
               jQuery(function(){jQuery("#item_ExpirationDt").kendoDatePicker({"format":"M/d/yyyy","min":new Date(2014,1,1,8,56,43,286),"max":new Date(2015,3,1,8,56,43,286),"start":"month"});});
             </script>
</div>

See this image for visual:

How do I get all DatePickerFor items rendered in the list?

The answer must also bind the items to the model correctly. Is the only way to do this with a grid?

R

Answer 1

Your problem is conflicting Ids on your input elements!

You have to ensure unique ids for your inputs, which in kendo ui mvc wrapper for datepicker is defined through the name property:

@model IEnumerable<HTServices.Models.TableName>

@foreach (var item in Model)
{
    @Html.HiddenFor(m => item.TableNameId)
    <div class="row" style="margin-top: 8px;">
        <div class="col-sm-4 col-md-4 col-lg-4">
            @Html.DisplayFor(m => item.TableNameShow)
        </div>
        <div class="col-sm-4 col-md-4 col-lg-4">
            @Html.TextBoxFor(m => item.Note, new { @class = "text-box single-line wide-full" })
        </div>
        <div class="col-sm-2 col-md-2 col-lg-2">
            @(Html.Kendo().DatePickerFor(m => item.ExpirationDt)
                 .Name("[SOME UNIQUE ID]")
                 .Start(CalendarView.Month)
                 .Min(DateTime.Now.AddMonths(-2))
                 .Max(DateTime.Now.AddMonths(12)))
         </div>
         <div class="col-sm-1 col-md-1 col-lg-1">
            @Html.ActionLink("Delete", "TableNameDelete", new { id = item.TableNameId }, new { onclick = "return deleteTableNameRecById(this);", @class = "RemoveLinkImage" })
         </div>
    </div> 
}