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 50 51 52 | use phpCtrl\C_DataGrid; require_once("/file/path/to/conf.php"); $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 “autocomplete” edit 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.
Knowledge Base:
Help! I still cannot get Nested Dropdown to work!