Convert an jquery <Select> in Kendo.

[Pierre]

HI, we got a javascrip program that parse an html file in memory and then do some work on it and add the element to the active DOM. 
When I try to convert an <select></select> contained in a jQuery variable in a KendoDropDown list, a strange thing append.

if I use the "normal way" to convert the select in KendoDropdown. In this case the <select> is aleready in the active DOM:

<select id="testSel">
</select>

$('#testSel').kendoDropDownList();

I got this result:

<span class="k-widget k-dropdown k-header" style="" unselectable="on" role="listbox" aria-haspopup="true" aria-expanded="false" tabindex="0" aria-owns="testSel_listbox" aria-disabled="false" aria-readonly="false" aria-busy="false">
   <span class="k-dropdown-wrap k-state-default" unselectable="on">
      <span class="k-input" unselectable="on"> </span>
      <span class="k-select" unselectable="on">
           <span class="k-icon k-i-arrow-s" unselectable="on">select</span>
      </span>
   </span>
   <select id="testSel" data-role="dropdownlist" style="display: none;"></select>
</span>

Now, if I try to convert it from memory:

$srcElem.kendoDropDownList();

where $srcElem is a jQuery DOM object that containt 

<select id="test2Sel" data-acteur="SELTHEME"></select>

I got this result in the active DOM:

<select id="test2Sel" data-acteur="SELTHEME">
    <select id="test2Sel" data-acteur="SELTHEME" data-role="dropdownlist" style="display: none;"></select>
</select>

I am doing someting wrong... 

[Pierre]

Hi, I found part of the problem. When I add the element in the DOM, I added it 2 time this cause the <select> in the <select>.

But I can do that:

var $tt = $('<select id="uioui"></select>');
var b = $('body');
$tt.kendoDropDownList();
$tt.appendTo(b);

nothing appears in the page.

thanks

[Dimo]

Hello Pierre,

Please create Kendo UI widgets only from elements that are already part of the page DOM. Initializing widgets from document fragments is not supported.

Regards,
Dimo
Telerik

[Pierre]

Hooo I see! That work well with the KendoNumericTextBox....

If I push the Element in the "active" DOM before initializing the Kendo objet, I think I "lost" the pointer on it.
I add the element like:

$elemCur.appendTo($destElem);

Then 

$elemCur.kendoDropDownList();

I think the $elemCur do not change because is already added.

[Pierre]

Ok, I try several thing to keep an active pointer on the new appended Dom element. But nothing work when I try to convert it to Kendo.
example:

var tt = $(':last-child', $destElem);
tt.kendoDropDownList();

The only way for now, is to asing it a temporaray ID et convert to kendo like:

$('#test2Sel').kendoDropDownList();

It is normal? Kendo absolutly need the $('#ID') to work from JS ?

If I need to parse the active Dom elements then if I found a "data-" attribut I convert the element in Kendo Widget. I will still have a pointer to the element in DOM. But this not woking, the result element are not converted in Kendo widget.

[Dimo]

Hello Pierre,

Generally, an ID is not required for initializing a Kendo UI widget, but if the element has no ID, preserving its reference is more cumbersome.

I am not sure what exactly is the problem in your case. Please check your selectors and make sure they return the correct element. If the issue persists, please provide a runnable example for further investigation.

Regards,
Dimo
Telerik