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

Changing data in list from different endpoint

1 Answer 51 Views
DropDownList
This is a migrated thread and some comments may be shown as answers.
Roderick
Top achievements
Rank 1
Roderick asked on 30 Aug 2012, 11:26 PM
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?

1 Answer, 1 is accepted

Sort by
0
Roderick
Top achievements
Rank 1
answered on 09 Sep 2012, 08:21 AM
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.
Tags
DropDownList
Asked by
Roderick
Top achievements
Rank 1
Answers by
Roderick
Top achievements
Rank 1
Share this question
or