DropDowns (Selects) are commonly used elements in the web. jqGrid supports dropdowns as editing/searching controls in an elegant way using the setSelectmethod. With this method you can attach dropdowns to all editing and serching forms. The method supports getting dropdown data directly from an SQL query or from pre-defined arrays.

The syntax of method is

The method should be called after setColModel method.

The first parameter is the column name generated from colModel.
The second parameter can be SQL query or associative array.

  • In case of SQL query, the first field should be the key which the will be posted or searched (e.g. "OrderID") and the second field should be the displayed name.
  • In case of associative array, the key element should correspond to the key (e.g. "OrderID") which then will be posted or searched and the value will correspond to the display name

The third parameter is formatter - default value is true. This tells the script that it should connect the key value with the name specified as first parameter. This allows you to not write SQL JOIN command to associate the key (column name) with another from other table. To disable this feature just set the parameter to false.

The fourth parameter is $editing,, which defaults to true. This tells the script that the select (dropdown) element will be used in editing modules. To disable this feature just set the parameter to false.

The fifth parameter is $searching , which defaults value to true. This tells the script that the select(dropdown) element will be used when we perform serching. To disable this feature just set the parameter to false.

The sixth parameters is $defvals. This parameter represents the default value, if none is selected. The parameter is used only in search modules. Can be something like arrary(""=>"All"); which will add additinal element to the select and they will appear at first place.

In order to demonstrate this feature we will include additional field in the SelectCommand ShipCity and will allow the user to filter the cities with select control. Here is the code:

<?php require_once 'jq-config.php'; // include the jqGrid Class require_once "php/jqGrid.php"; // include the driver class require_once "php/jqGridPdo.php"; // Connection to the server $conn = new PDO(DB_DSN,DB_USER,DB_PASSWORD); // Tell the db that we use utf-8 $conn->query("SET NAMES utf8"); // Create the jqGrid instance $grid = new jqGridRender($conn); // Write the SQL Query $grid->SelectCommand = 'SELECT OrderID, OrderDate, CustomerID, ShipName, ShipCity, Freight FROM orders'; // Set output format to json $grid->dataType = 'json'; // Let the grid create the model $grid->setColModel(); // Set the url from where we obtain the data $grid->setUrl('grid.php'); // Set some grid options $grid->setGridOptions(array( "rowNum"=>10, "rowList"=>array(10,20,30), "sortname"=>"OrderID" )); // Enable filter toolbar searching $grid->toolbarfilter = true; // we set the select for ship city $grid->setSelect("ShipCity", "SELECT DISTINCT ShipCity, ShipCity AS CityName FROM orders ORDER BY 2", false, false, true, array(""=>"All")); $grid->renderGrid('#grid','#pager',true, null, null, true,true); $conn = null; ?>


If the requierment is to search just on several citys we can pass a array with predefined values.
The code will look like this

<?php require_once 'jq-config.php'; // include the jqGrid Class require_once "php/jqGrid.php"; // include the driver class require_once "php/jqGridPdo.php"; // Connection to the server $conn = new PDO(DB_DSN,DB_USER,DB_PASSWORD); // Tell the db that we use utf-8 $conn->query("SET NAMES utf8"); // Create the jqGrid instance $grid = new jqGridRender($conn); // Write the SQL Query $grid->SelectCommand = 'SELECT OrderID, OrderDate, CustomerID, ShipName, ShipCity, Freight FROM orders'; // Set output format to json $grid->dataType = 'json'; // Let the grid create the model $grid->setColModel(); // Set the url from where we obtain the data $grid->setUrl('grid.php'); // Set some grid options $grid->setGridOptions(array( "rowNum"=>10, "rowList"=>array(10,20,30), "sortname"=>"OrderID" )); // Enable filter toolbar searching $grid->toolbarfilter = true; // we set the select for ship city // array tha holds the limitted citys $mycity = array("London"=>"London", "Paris"=>"Paris", "Torino"=>"Torino"); $grid->setSelect("ShipCity", $mycity , false, false, true, array(""=>"All")); $grid->renderGrid('#grid','#pager',true, null, null, true,true); $conn = null; ?>