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

Let's dig deeper.

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.

But it is not done.


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']
        ]
    ];

There is one more step...

Be sure to 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');


Lastly, call set_nested_dropdown()

$dg->set_nested_dropdown('country', 'state', 'countryStateData');


Happy Gridding!

Feedback and Knowledge Base