Cloning div containing kendo inputs

问题

I have an application which allows users to dynamically create divs containing kendo inputs. To do so I have a div which contains multiple kendo inputs which I use as a sort of template. When the user decides to add a section to the page, i clone my div using jquery.clone(). Everything looks fine in the UI, but since the kendo inputs only get initialized one time in HTML and are then copied, the inputs are not rebuilt therefore the initial ID is not unique and the inputs are not functional.

I tried to fix this programmatically by doing

var $kendoInputs = $$(".draggableContainer .k-input");
for (var j = 0; j < $kendoInputs.length; j++) {
    if ($($kendoInputs[j]).attr("id")) {
        var newid = "newid" + j;
        $($kendoInputs[j]).attr("id", newid).attr("name", newid);
    }
}

but since the inputs have already been initialized, changing the ids at this point is useless. Is there any way to change the ID of a kendo input and then rebuild it?

Sorry for the long block of text and thanks in advance

回答1:

This is almost there: http://dojo.telerik.com/@Stephen/EWEna

Try cloning just the base inputs of the kendo elements(with a new id) instead of the all the elements that kendo adds. Then get the type and options of the original widget and initialize the new element as the original type with the original options.

var originalElement = $("#" + originalID);
var originalWidgetType = "kendo" + kendo.widgetInstance(originalElement).options.name;
var originalWidget = originalElement.data(originalWidgetType);

element[originalWidgetType](originalWidget.options);

My dojo example is close...but for some reason the cloned DatePickers are too wide...and I haven't tested with all the possible elements but I think it could be used as a start.

EDIT

I found this technique using Kendo MVVM that seems like it would be better: http://jsfiddle.net/krustev/U6nSv/

This is not my solution(not sure how to credit).

Here is my original example updated to use that technique: http://dojo.telerik.com/@Stephen/aquRE

来源：https://stackoverflow.com/questions/37976015/cloning-div-containing-kendo-inputs

标签

javascript