This is a migrated thread and some comments may be shown as answers.

Only first DatePickerFor renders in list

1 Answer 25 Views
Date/Time Pickers
This is a migrated thread and some comments may be shown as answers.
Eric
Top achievements
Rank 2
Eric asked on 01 Apr 2014, 01:16 PM
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


1 Answer, 1 is accepted

Sort by
0
Alexander Popov
Telerik team
answered on 03 Apr 2014, 07:49 AM
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
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
Tags
Date/Time Pickers
Asked by
Eric
Top achievements
Rank 2
Answers by
Alexander Popov
Telerik team
Share this question
or