I am trying to create a cascading effect with 2 comboboxes.
The first combobox contains states and the second contains cities in those states. When the user chooses a state, the second combobox should only display cities that are in that selected state.
I am trying to clear the datasource and reset it, but I am not having much luck.
Is it possible to do what I am trying to do?
Thanks!
Bobby
Just checking back in. Does anyone have any insight into how I could go about implementing this?
Hi Bobby,
The igCombo should support changes to dataSource. For example,
$('#cities').igCombo('option', 'dataSource', newDataSource);If valueKey and textKey stay the same as in previous dataSource, then no other statements are required. If new data have different text/valueKey, then new values for those options should be set before dataSource (come in front dataSource option).
I wrote for you example, which uses selectionChange event of "state" combo to change data source of "cities" combo. That sample is somehow advanced, because it assumes different value/textKeys for different data sources. If those keys stay the same and value/textKeys were set within init of "cities", then to change data source, there is no need to call configureCombo function, but use only commented line.
To test, you may copy/paste into the <body> of any html, which has references to js/css resources used by igCombo.
<script type="text/javascript"> var states = [{name: "NJ", id: 0}, {name: "NY", id: 1}, {name: "PA", id: 2}]; var citiesNJ = [{city: "Trenton", val: 0}, {city: "Monroe", val: 1}, {city: "Princeton", val: 2}]; var citiesNY = [{city: "New York", val: 0}, {city: "Albany", val: 1}]; var citiesPA = [{textKeyTest: "Allentown", valueKeyTest: 0}, {textKeyTest: "Philadelphia", valueKeyTest: 1}]; function configureCombo(id) { var options; if (id === 0) { options = { valueKey: 'val', textKey: 'city', dataSource: citiesNJ }; } else if (id === 1) { options = { valueKey: 'val', textKey: 'city', dataSource: citiesNY }; } else if (id === 2) { options = { valueKey: 'valueKeyTest', textKey: 'textKeyTest', dataSource: citiesPA }; } else { options = { dataSource: null }; } $('#cities').igCombo(options); } $(function () { $('#states').igCombo({ selectionChanged: function (evt, ui) { var name = null, id = -1, items = ui.items; if (items && items.length >= 0) { // example to get original record from dataSource //var index = items[0].index; //var originalItem = ui.owner.options.dataSource[index]; id = items[0].value; name = items[0].text; } //$('#cities').igCombo('option', 'dataSource', window['cities' + name]); configureCombo(id, name); }, valueKey: 'id', textKey: 'name', dataSource: states }); //$('#cities').igCombo({ valueKey: 'val', textKey: 'city' }); $('#cities').igCombo(); });</script><span id="states"></span><span id="cities"></span>
Hi Viktor!
First off, thanks for the example. However, I am having issues getting it to work properly. I understand exactly what you are trying to accomplish, but when I 'reset' the datasource it causes the dropdown to never show.
i.e. I default the cities combo to show all cities, then when the select the 'state', I swap out the datasource with the state specific one. When I do this, the dropdown with values no longer displays. I can tell that the datasource has not changed because if I type in a name of a city that is not in that state and move focus from the combo, the city will still display.
I think my issue has more to do with changing of the datasource of the comobox. I am using your example code. Is it possible that there is a bug with resetting the datasource? I am using version: 11.2.20112.1023
I really have got to stop posting so quickly :)
I did some more research and found that if I destory the combo first and then re-initialize it, it works as expected.
$('#cities').igCombo('destroy');$('#cities').igCombo({ valueKey: 'city', textKey: 'city', dataSource: window['cities' + name]});
There appears to be an issue with just updating the datasource directly...
Again, thanks for you assistance.
I am glad you found solution with destroy.
About failure to change dataSource: I experimented with the most latest version, and it is possible that igCombo had some issues with changing dataSource, which already have been fixed.