Only first DatePickerFor renders in list

2 posts, 0 answers
  1. Eric
    Eric avatar
    19 posts
    Member since:
    Mar 2014

    Posted 01 Apr 2014 Link to this post

    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 class="col-sm-4 col-md-4 col-lg-4">
     @Html.TextBoxFor(m => item.Note, new { @class = "text-box single-line wide-full" })
     <div class="col-sm-2 col-md-2 col-lg-2">
     @(Html.Kendo().DatePickerFor(m => item.ExpirationDt)
     <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" })

    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"});});

    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"});});

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


  2. Alexander Popov
    Alexander Popov avatar
    1436 posts

    Posted 03 Apr 2014 Link to this post

    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.

    Alexander Popov

    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.

Back to Top