Render from dynamically added partial view

[Mike]

I'm attempting to add multiple partial views based on the click of a button. I have various controls including a date/time picker.  This works with the initial page loaded instance (index 0) however once I try to add the 2nd (index 1) from an AJAX call, the controls render but not with the Kendo UI front.  Attached file is a screen shot of the result when a new instance of the partial view is added.  What am I doing wrong that they will not render with the Kendo front?

Partial View:

<div class="col-12 col-md-3 col-lg-3 col-xl-3 order-1">
    <kendo-datetimepicker id="MyCollection[@Model.CollectionIndex].StartDateTime" format="{0:g}" class="w-100" />
</div>

 

Controller:

public PartialViewResult SplitTime(int newIndex)
        {
            return PartialView("_TimeRow", new MyModel() { CollectionIndex = newIndex });
        }

[Mike]

Javascript:

function AddNewTime()
{
    var timeDiv = document.getElementById("TimeItems");

    $.ajax(
        {
            url: ".../SplitTime?newIndex=" + timeRows,
            success: function (html)
            {
                timeDiv.innerHTML += html;
                timeRows++;
            },
            error: function (errorThrown)
            {
                console.log(errorThrown);
            }
        });

    return false;
}

[Viktor Tachev]

Hi Mike,

 

Thank you for the code snippets and the screenshot.

The behavior can be observed when the ids of the components are not unique. If there are multiple elements with the same id on the page only one widget will be initialized. You can check if this is the case by inspecting the rendered HTML of the page.

Would you ensure that each widget is using an unique id and see how the behavior changes? In case the issue persists please send us a runnable sample where it is replicated so we can examine it locally.

 

Regards,
Viktor Tachev
Progress Telerik

[Mike]

Here is the HTML of the rendered partial view.  I didn't notice until now when the new instance of the partial view is amended, there is a number of elements not rendered as expected even though the ID's are unique.

 

<div class="col-12 col-md-3 col-lg-3 col-xl-3 order-1">
            <span style="" class="k-widget k-datetimepicker w-100"><span class="k-picker-wrap k-state-default"><input id="MyCollection[0].StartDateTime" class="w-100 k-input" title="Start" name="MyCollection[0].StartDateTime" type="text" value="" data-role="datetimepicker" style="width: 100%;" role="combobox" aria-expanded="false" autocomplete="off" aria-disabled="false"><span unselectable="on" class="k-select"><span class="k-link k-link-date" aria-label="Open the date view" aria-controls="MyCollection[0].StartDateTime_dateview"><span unselectable="on" class="k-icon k-i-calendar"></span></span><span class="k-link k-link-time" aria-label="Open the time view" aria-controls="MyCollection[0].StartDateTime_timeview"><span unselectable="on" class="k-icon k-i-clock"></span></span></span></span></span><script>kendo.syncReady(function(){jQuery("#MyCollection\\[0\\]\\.StartDateTime").kendoDateTimePicker({"format":"{0:g}"});});</script>
            <span class="text-danger field-validation-valid" data-valmsg-for="StartDateTime" data-valmsg-replace="true"></span>
        </div>

...other code omitted for brevity...

<div class="col-12 col-md-3 col-lg-3 col-xl-3 order-1">
            <input id="MyCollection[1].StartDateTime" class="w-100" title="Start" name="MyCollection[1].StartDateTime" type="text" value=""><script>kendo.syncReady(function(){jQuery("#MyCollection\\[1\\]\\.StartDateTime").kendoDateTimePicker({"format":"{0:g}"});});</script>
            <span class="text-danger field-validation-valid" data-valmsg-for="StartDateTime" data-valmsg-replace="true"></span>
        </div>

 

[Viktor Tachev]

Hello Mike,

 

Would you send us a runnable project where the behavior is replicated? This will enable us to examine the issue and look for what is causing it.

 

Regards,
Viktor Tachev
Progress Telerik

[Mike]

Can I not attach zip files now?

[Mike]

I've submitted ticket 1442719 that may help.

[Viktor Tachev]

Hello,

 

Indeed attaching a zip files is not available in the forums. 

Thank you for submitting a ticket with attached project. We will examine the sample and reply in the ticket.

 

Regards,
Viktor Tachev
Progress Telerik