xecampa/gist:007ca92b40bba42e5c922a5f25dd0494

## gistfile1.txt

<?php
include_once("include/phpgrid/config.php");

// include and create object
include(PHPGRID_LIBPATH."inc/jqgrid_dist.php");

$db_conf = array(
                    "type"      => PHPGRID_DBTYPE,
                    "server"    => PHPGRID_DBHOST,
                    "user"      => PHPGRID_DBUSER,
                    "password"  => PHPGRID_DBPASS,
                    "database"  => PHPGRID_DBNAME
                );

$g = new jqgrid($db_conf);


// set few params
$opt["caption"] = "Ports with tariffs ";
$opt["rowNum"] = 30;
$opt["rowList"] = array(10,20,30,'All');
$opt["autowidth"] = true;
$opt["autoresize"] = true; // defaults to false
$opt["height"] = "400";
$opt["cellEdit"] = true;

$g->set_options($opt);


// set database table for CRUD operations
$g->table = "port";

$col = array();
$col["name"] = "PortID";
$col["editable"] = false;
$col["title"] = "ID"; // caption of column, can use HTML tags too
$col["edittype"] = "textarea";

$cols[] = $col;

$col = array();
$col["name"] = "NameWithDiacritics";
$col["editable"] = true;
$col["title"] = "Port"; // caption of column, can use HTML tags too
$col["edittype"] = "textarea";

$cols[] = $col;


$col = array();
$col["title"] = "Country"; // caption of column, can use HTML tags too
$col["name"] = "CountryID";
$col["editable"] = true;
$col["edittype"] = "select";


$str = $g->get_dropdown_values("select distinct Name as v, CountryID as k  from country");
$col["editoptions"] = array(
    "value"=>$str,
    "onchange" => array(
        "sql"=>"select * from country where Name = '{name}'",
        "callback" => "fill_form" )
   );
$col["editoptions"]["dataInit"] = "function(){ setTimeout(function(){ link_select2('{$col["name"]}'); },200); }";

$col["stype"] = "select"; // enable dropdown search
$col["searchoptions"] = array("value" => ":;".$str);
$cols[] = $col;

$g->set_columns($cols);


// render grid and get html/js output
$out = $g->render("list1");
?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>

    <!-- these css and js files are required by php grid -->
    <link rel="stylesheet" href="include/phpgrid/lib/js/themes/redmond/jquery-ui.custom.css"></link>
    <link rel="stylesheet" href="include/phpgrid/lib/js/jqgrid/css/ui.jqgrid.css"></link>
    <script src="include/phpgrid/lib/js/jquery.min.js" type="text/javascript"></script>
    <script src="include/phpgrid/lib/js/jqgrid/js/i18n/grid.locale-en.js" type="text/javascript"></script>
    <script src="include/phpgrid/lib/js/jqgrid/js/jquery.jqGrid.min.js" type="text/javascript"></script>
    <script src="include/phpgrid/lib/js/themes/jquery-ui.custom.min.js" type="text/javascript"></script>
    <!-- these css and js files are required by php grid -->

    <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />
	<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>

</head>

<body>
    <div style="margin:10px">

    <!-- display grid here -->
    <?php echo $out?>
    <!-- display grid here -->

    </div>


<script>
	function link_select2(id)
	{
		$('select[name='+id+'].editable, select[id='+id+']').select2({onSelect: function(){ jQuery(this).trigger('change'); }});
		$(document).unbind('keypress').unbind('keydown');
	}


	</script>
</body>
</html>

	<?php
	include_once("include/phpgrid/config.php");

	// include and create object
	include(PHPGRID_LIBPATH."inc/jqgrid_dist.php");

	$db_conf = array(
	"type" => PHPGRID_DBTYPE,
	"server" => PHPGRID_DBHOST,
	"user" => PHPGRID_DBUSER,
	"password" => PHPGRID_DBPASS,
	"database" => PHPGRID_DBNAME
	);

	$g = new jqgrid($db_conf);




	// set few params
	$opt["caption"] = "Ports with tariffs ";
	$opt["rowNum"] = 30;
	$opt["rowList"] = array(10,20,30,'All');
	$opt["autowidth"] = true;
	$opt["autoresize"] = true; // defaults to false
	$opt["height"] = "400";
	$opt["cellEdit"] = true;

	$g->set_options($opt);


	// set database table for CRUD operations
	$g->table = "port";

	$col = array();
	$col["name"] = "PortID";
	$col["editable"] = false;
	$col["title"] = "ID"; // caption of column, can use HTML tags too
	$col["edittype"] = "textarea";

	$cols[] = $col;

	$col = array();
	$col["name"] = "NameWithDiacritics";
	$col["editable"] = true;
	$col["title"] = "Port"; // caption of column, can use HTML tags too
	$col["edittype"] = "textarea";

	$cols[] = $col;


	$col = array();
	$col["title"] = "Country"; // caption of column, can use HTML tags too
	$col["name"] = "CountryID";
	$col["editable"] = true;
	$col["edittype"] = "select";


	$str = $g->get_dropdown_values("select distinct Name as v, CountryID as k from country");
	$col["editoptions"] = array(
	"value"=>$str,
	"onchange" => array(
	"sql"=>"select * from country where Name = '{name}'",
	"callback" => "fill_form" )
	);
	$col["editoptions"]["dataInit"] = "function(){ setTimeout(function(){ link_select2('{$col["name"]}'); },200); }";

	$col["stype"] = "select"; // enable dropdown search
	$col["searchoptions"] = array("value" => ":;".$str);
	$cols[] = $col;

	$g->set_columns($cols);



	// render grid and get html/js output
	$out = $g->render("list1");
	?>

	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
	<html>
	<head>

	<!-- these css and js files are required by php grid -->
	<link rel="stylesheet" href="include/phpgrid/lib/js/themes/redmond/jquery-ui.custom.css"></link>
	<link rel="stylesheet" href="include/phpgrid/lib/js/jqgrid/css/ui.jqgrid.css"></link>
	<script src="include/phpgrid/lib/js/jquery.min.js" type="text/javascript"></script>
	<script src="include/phpgrid/lib/js/jqgrid/js/i18n/grid.locale-en.js" type="text/javascript"></script>
	<script src="include/phpgrid/lib/js/jqgrid/js/jquery.jqGrid.min.js" type="text/javascript"></script>
	<script src="include/phpgrid/lib/js/themes/jquery-ui.custom.min.js" type="text/javascript"></script>
	<!-- these css and js files are required by php grid -->

	<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />
	<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>

	</head>

	<body>
	<div style="margin:10px">

	<!-- display grid here -->
	<?php echo $out?>
	<!-- display grid here -->

	</div>


	<script>
	function link_select2(id)
	{
	$('select[name='+id+'].editable, select[id='+id+']').select2({onSelect: function(){ jQuery(this).trigger('change'); }});
	$(document).unbind('keypress').unbind('keydown');
	}


	</script>
	</body>
	</html>