Help! I still cannot get Nested Dropdown to work
The setup can be quite tricky. Keep in mind that the dependency logic is essentially embedded in the javascript. It's crucial to follow the instructions EXACTLY.
- the dropdowns must be set to "
autocomplete
" edit type - The 3rd parameter of
set_col_edittype
() must contain an ENTIRE string of all the "key:value"
pair of that column
In the demo,
$countryStateData
is an array (array() replaced with shorthand [ ] for brevity) that contains two countries, 'usa' and 'canada' where each contains its states in sub-array respectively. This is the data to populate the first dropdown.The second array
$stateCityData
contains the state details which are going to be displayed in the second dropdown, which is the nested dropdown.$countryStateData =
[
'usa' => [
['id'=>'', 'text'=>''],
['id'=>'ca', 'text'=>'CA'],
['id'=>'al', 'text'=>'AL'],
['id'=>'nj', 'text'=>'NJ']
],
'canada' => [
['id'=>'', 'text'=>''],
['id'=>'ab', 'text'=>'AB'],
['id'=>'qc', 'text'=>'QC'],
['id'=>'bc', 'text'=>'BC']
]
];
$stateCityData =
[
'ca' => [
['id'=>'', 'text'=>''],
['id'=>'ca', 'text'=>'San Francisco'],
['id'=>'al', 'text'=>'Los Angeles'],
['id'=>'nj', 'text'=>'San Diego']
],
'al' => [
['id'=>'', 'text'=>''],
['id'=>'ab', 'text'=>'test'],
['id'=>'qc', 'text'=>'test2'],
['id'=>'bc', 'text'=>'city2']
],
'bc' => [
['id'=>'', 'text'=>''],
['id'=>'ab', 'text'=>'2342344'],
['id'=>'qc', 'text'=>'bc city2'],
['id'=>'bc', 'text'=>'bc city333']
]
];
Call
set_col_edittype()
on both dropdown and set them to autocomplete
as shown below. The 3rd parameter must contain the ENTIRE "key:value"
pair of that column. In other words, not only Country dropdown must contain the key pair value of all the countries, the States dropdown must contain "key:value"
pair for all the states including both USA and Canada, merged all in one "key:value"
pair string.$dg->set_col_edittype('country', 'autocomplete', ':;usa:USA;canada:Canada;France:France;Germany:Germany;Norway:Norway;Poland:Poland;Australia:Australia;Spain:Spain;Denmark:Denmark;Singapore:Singapore;Belgium:Belgium;Finland:Finland;New Zealand:New Zealand;Italy:Italy;Japan:Japan;Irelan:Ireland;Hong Kong:Hong Kong;Russia:Russia;Israel:Israel');
$dg->set_col_edittype('state', 'autocomplete', ':;bc:BC;ab:AB;qc:QC;al:AL;nj:NJ;ca:CA;Co. Cork:Co. Cork;CT:CT;Isle of Wight:Isle of Wight;MA:MA;NH:NH;NSW:NSW;NV:NV;NY:NY;Osaka:Osaka;PA:PA;Pretoria:Pretoria;Québec:Québec;Queensland:Queensland;Tokyo:Tokyo;Victoria:Victoria');
One final step, to call
set_nested_dropdown()
$dg->set_nested_dropdown('country', 'state', 'countryStateData');
Nested dropdown values can be PARTIALLY loaded from database.
For example, replacing the following:
$dg->set_col_edittype('country', 'autocomplete',
':;usa:USA;canada:Canada;France:France;Germany:Germany;Norway:Norway;Poland:Poland;Australia:Australia;Spain:Spain;Denmark:Denmark;Singapore:Singapore;Belgium:Belgium;Finland:Finland;New Zealand:New Zealand;Italy:Italy;Japan:Japan;Irelan:Ireland;Hong Kong:Hong Kong;Russia:Russia;Israel:Israel');
with:
$dg->set_col_edittype('country', 'autocomplete', 'SELECT CountryCode, CountryName FROM AllCountries')
And replacing the following:
$dg->set_col_edittype('country', 'autocomplete',
':;bc:BC;ab:AB;qc:QC;al:AL;nj:NJ;ca:CA;Co. Cork:Co. Cork;CT:CT;Isle of Wight:Isle of Wight;MA:MA;NH:NH;NSW:NSW;NV:NV;NY:NY;Osaka:Osaka;PA:PA;Pretoria:Pretoria;Québec:Québec;Queensland:Queensland;Tokyo:Tokyo;Victoria:Victoria');
with
$dg->set_col_edittype('country', 'autocomplete', 'SELECT StateCode, StateName, CountryName FROM AllCountryStates')
Assuming both AllCountries and AllCountryStates database table exist.