Creating a cascading combobox | Infragistics Forums

200

Creating a cascading combobox

Bobby posted over 12 years ago

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

Parents

No Data

Reply

200

Bobby posted over 12 years ago

Just checking back in. Does anyone have any insight into how I could go about implementing this?

Thanks!

Bobby
Cancel
Reply

Cancel

Children

7566

Suggested Answer
Georgi Georgiev posted over 12 years ago in reply to Bobby

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://ko.infragistics.com/support

ComboBoxCascading.zip
Cancel
Reply

Reject Answer

Cancel
24497

[Infragistics] Viktor Snezhko posted over 12 years ago in reply to Bobby

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>
Cancel
Reply

Cancel