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?
Hello Striker8118,
I just developed a sample demonstrating this.
I am attaching the sample here,
Download it and let me know your comments.
Looking forward to hear from you.
Sincerely,
Georgi Sashev
Developer Support Engineer
Infragistics, Inc.
http://es.infragistics.com/support
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>