Dynamically populate cell selectdropdown based on another cell's selected value

[qfinsoft]

I'm a new user of pqGrid...so far so good!  I'm using inline editing and I do have a question regarding interdependent dropdowns (i.e. interdependent 'select' column editors).  For example, I have a 'country' column using a 'select' type editor containing a list of valid countries (i.e. "name").  Predictably, I would then like to have a 'region' column whose valid select options are dependent on the country that has been chosen.  Currently, I'm referencing an array of JSON countryRegion objects (example entries shown below) to populate the country select options, and hopefully the corresponding region dropdown options as well.

Code: [Select]

myJSNamespace.countryRegions = [
{name: "Canada", id:"CA", regions:"Alberta|British Columbia|Manitoba|New Brunswick|Newfoundland|Northwest Territories|Nova Scotia|Nunavut|Ontario|Prince Edward Island|Quebec|Saskatchewan|Yukon Territory"},
{name: "Virgin Islands, U.S.",id:"VI",regions:"St. Thomas|St. John|St. Croix"}
] 

How would one best accomplish this desired functionality?  FYI, here are the correspoding colModel entries as they stand (with working country select editor, but no interdependent region select):

Code: [Select]

var colModel = [
{
                    title: "country",
                    width: 150,
                    dataType: "string",
                    dataIndx: "country",
                    editor: {
                        type: "select",
                        options: myJSNamespace.countryRegions,
                        mapIndices: {name: "country"},
                        labelIndx: "name",
                        valueIndx: "name"
                    }
 },
 {
                    title: "region",
                    width: 150,
                    dataType: "string",
                    dataIndx: "region"
 },
]


[paramvir]

Cascade / interdependent select list editors is common use case scenario.

editor.options of dependent select list can be implemented as a callback that returns options depending upon selected country.

Code: [Select]

options: function (ui) {
      var countries = pq.countries,
           id = ui.rowData.id;

           if (id) {
                  for (var i = 0; i < countries.length; i++) {
                        var row = countries[i];
                        if (row.id == id) {
                              return row.regions.split("|");
                        }
                  }
           }
           return [];
}

I've set up a demo here.

http://paramquery.com/pro/demos/cascade_select

Hope it helps.

[qfinsoft]

Sure did help.  Excellent!  Thanks for the demo!