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

Convert an jquery <Select> in Kendo.

5 Answers 101 Views
DropDownList
This is a migrated thread and some comments may be shown as answers.
Pierre
Top achievements
Rank 1
Pierre asked on 24 May 2013, 04:57 PM
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... 

5 Answers, 1 is accepted

Sort by
0
Pierre
Top achievements
Rank 1
answered on 24 May 2013, 09:11 PM
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
0
Dimo
Telerik team
answered on 27 May 2013, 12:26 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Pierre
Top achievements
Rank 1
answered on 27 May 2013, 03:06 PM
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.
0
Pierre
Top achievements
Rank 1
answered on 27 May 2013, 03:31 PM
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.
0
Dimo
Telerik team
answered on 28 May 2013, 09:10 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
DropDownList
Asked by
Pierre
Top achievements
Rank 1
Answers by
Pierre
Top achievements
Rank 1
Dimo
Telerik team
Share this question
or