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

How do I retrieve a collection of Kendo Widgets by class?

1 Answer 35 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Tina
Top achievements
Rank 1
Tina asked on 24 Sep 2013, 11:03 PM

I'm trying to loop through some widgets by class ID to add some additional configuration.  Suppose I have the mark up below with the following script . . . how do I get widgets by class?

<input id="afCity1" name="City1" data-bind="value: dataEntryItem.City1" class="afCityDropDown" />
 <input id="afCity2" name="City2" data-bind="value: dataEntryItem.City2" class="afCityDropDown" />
 <input id="afCity3" name="City3" data-bind="value: dataEntryItem.City3" class="afCityDropDown" />
<input id="afState1" name="State1" data-bind="value: dataEntryItem.State1" class="afStateDropDown" /> 
<input id="afState2" name="State2" data-bind="value: dataEntryItem.State2" class="afStateDropDown" />

. . .
// this works no problem
$(".afCityDropDown").kendoDropDownList({
optionLabel: " ",
height: 150,
autoBind: false
});

. . .
 $(".afCityDropDown").each(function () {
 // this doesn't work
 $(this).data("kendoDropDownList").setDataSource(dataReturned);
});

1 Answer, 1 is accepted

Sort by
0
Kiril Nikolov
Telerik team
answered on 25 Sep 2013, 12:36 PM
Hi Tina,

In general it is not a good practice to initialize Kendo UI widgets using it's class names, as it might cause some discrepancies.

In your case the problem comes from the fact that when initialized the DropDownList creates a span element with the same class name as the input element. So you have total of 6 elements in your $.each() statement and you need only the input elements nested in the span, that were used to initialize the widget.

 I would suggest you to take the whole collection and use only the elements that you need and then set their dataSource. Please check the following example:

http://jsbin.com/UCIHawi/4/edit
 
Regards,
Kiril Nikolov
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
General Discussions
Asked by
Tina
Top achievements
Rank 1
Answers by
Kiril Nikolov
Telerik team
Share this question
or