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

2 posts, 0 answers
  1. Tina
    Tina avatar
    7 posts
    Member since:
    Apr 2011

    Posted 24 Sep 2013 Link to this post


    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);
    });
  2. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2598 posts

    Posted 25 Sep 2013 Link to this post

    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!
Back to Top