Only first DatePickerFor renders in list

[Eric]

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>

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


R

[Alexander Popov]

Hi Alex,

This behavior is expected, because each Kendo UI widget should have a unique name. Basically all For helpers assign a widget name, equal to the Model field, which in this case creates several widgets with an "item_ExpirationDt" ID. I would recommend using the Name method to specify a widget ID that includes some unique item identifier.

Regards,
Alexander Popov
Telerik