877-GRID-666 24/7 online support 604, Tower A, New Trade Plaza, N.T., Hong Kong

Nested/Cascade/Dependent Dropdown

Use “autocomplete” control and set_nested_dropdown() method, dependent dropdown, something called cascaded filter or nested dropdown, are also supported.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
$countryStateData =
    array(
        'usa' => array(
            array('id'=>'',   'text'=>''),
            array('id'=>'ca', 'text'=>'CA'),
            array('id'=>'al', 'text'=>'AL'),
            array('id'=>'nj', 'text'=>'NJ')
         ),
        'canada' => array(
            array('id'=>'',   'text'=>''),
            array('id'=>'ab', 'text'=>'AB'),
            array('id'=>'qc', 'text'=>'QC'),
            array('id'=>'bc', 'text'=>'BC')
        )
    );

$stateCityData =
    array(
        'ca' => array(
            array('id'=>'',   'text'=>''),
            array('id'=>'ca', 'text'=>'San Francisco'),
            array('id'=>'al', 'text'=>'Los Angeles'),
            array('id'=>'nj', 'text'=>'San Diego')
         ),
        'al' => array(
            array('id'=>'',   'text'=>''),
            array('id'=>'ab', 'text'=>'test'),
            array('id'=>'qc', 'text'=>'test2'),
            array('id'=>'bc', 'text'=>'city2')
        ),
        'bc' => array(
            array('id'=>'',   'text'=>''),
            array('id'=>'ab', 'text'=>'2342344'),
            array('id'=>'qc', 'text'=>'bc city2'),
            array('id'=>'bc', 'text'=>'bc city333')
        )
    );
echo '<script>';
echo 'var countryStateData = '. json_encode($countryStateData).";\n";
echo 'var stateCityData = '. json_encode($stateCityData).";\n";
echo '</script>';

$dg = new C_DataGrid('select * from customers', 'customerNumber', 'customers');
$dg->enable_edit('INLINE');
$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;al:al;bc:bc;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');
$dg->set_nested_dropdown('country', 'state', 'countryStateData');

$dg->display();

Programming Note:

  • The example demonstrates dependent dropdown, or sometimes called nested or cascadingw dropdown. It can be nested in unlimited level.
  • It’s important that all the dropdowns must be set to “autocomplete” edit type before calling set_nested_dropdown() method.
  • Due to the way the select is implemented in jqGrid, the 3rd parameter of set_col_edittype() method must contain the ENTIRE string of all the key:value pair of that column, or the data will appear to be missing when display. There is no way around due to the jqGrid limitation.
  • The dependency logic is essentially embedded in the javascript data source (e.g. $countryStateData) used to populate the dropdown dynamically based on its selected parent value.

In a nutshell, the phpGrid displays the datagrid rendered by jqGrid. Select2 does the autocomplete and nested dropdown completely on the client side. It is also the reason why the data javascript data source must be structured correctly.

See Live Example!