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:

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

  • 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.
  • The example demonstrates dependent dropdown or sometimes called nested or cascading dropdown. It can be nested in an unlimited level.
  • It’s important that all the dropdowns must be set to “autocompleteedit type before calling set_nested_dropdown() method.
  • Due to the way 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 this due to the jqGrid limitation.

Visit Demo

CLOSE
CLOSE