Changing data in list from different endpoint

2 posts, 0 answers
  1. Roderick
    Roderick avatar
    2 posts
    Member since:
    Jun 2012

    Posted 30 Aug 2012 Link to this post

    Bottom line: How do I load items in a dropdown list from a different url after it's been initialized?

    I have a 3 dropdown lists that are bound to 3 kendo data sources which read json from 3 different endpoints. I want to be able to select something from the first dropdown, and have the second and third dropdowns change. Just as an example, if the first dropdown is names of grandfathers, second dropdown is list of fathers and third dropdown is a list of sons, the third dropdown should only list sons related to the selected father, and the second dropdown should only list fathers related to the selected grandfather.

    Cascading dropdowns aren't useful because I'm graphing data about grandfathers, fathers, and sons regardless of their relationships.

    The endpoints are:
    1. "service/getGrandfatherList/"
    2. "service/getFatherList/grandfatherID"
    3. "service/getSonList/fatherID"
    Problem is, I can't get the second and third dropdowns to change. In my onclose event handler I've tried:
    • $("fathers").data("kendoDropDownList").dataSource.read(); as suggested in this thread
    • Re-initializing the dropdown list, though that makes it disappear (see thread linked above)
    • Assigning the kendo data source to a new kendo.data.DataSource that reads from the appropriate URL then calling datasource.read(), datasource.fetch(),dropdownlist.refresh()
    Those do nothing. What's weird is that even after assigning the data source to a new datasource and calling fetch(), it reads from the old url instead of the new one.

    Hope I've explained this properly... any ideas?
  2. Roderick
    Roderick avatar
    2 posts
    Member since:
    Jun 2012

    Posted 09 Sep 2012 Link to this post

    I've found the solution to this. If anyone has problems with their dropdowns disappearing because they try to initialize it more than once, here's an easy solution using regular jquery:

    HTML:
    <div id="myDropdownContainer>
        <div id="myDropdown></div>
    </div>

    JS:
    $("#myDropdownContainer").empty(); // or $("#myDropdown").remove();
    $("#myDropdownContainer").html("<div id=\"myDropdown\"></div>");
     
    loadDropdown("myDropdown"); // or whatever function you use to initialize your dropdowns

    Hope that helps someone.
Back to Top