ParamQuery grid support forum

General Category => Help for ParamQuery Pro => Topic started by: qfinsoft on May 08, 2015, 11:38:10 pm

Title: Dynamically populate cell selectdropdown based on another cell's selected value
Post by: qfinsoft on May 08, 2015, 11:38:10 pm

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"
 },
]


Title: Re: Dynamically populate cell selectdropdown based on another cell's selected value
Post by: paramvir on May 11, 2015, 02:35:05 pm

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.

Title: Re: Dynamically populate cell selectdropdown based on another cell's selected value
Post by: qfinsoft on May 12, 2015, 12:09:24 am

Sure did help.  Excellent!  Thanks for the demo! ;D