Get KoolPHP UI with 30% OFF!

Ajax/UpdatePanel/Load KoolControl example

ADavid Wulkan
OK I got this to work based on the Ajax / UpdatePanel / Load KoolControl example:
control2div.php
<?php include "inc/header_inc.php"; ?>
<?php //include "inc/dbkool.php"; ?>
<?php include "inc/ajax.php"; ?>
<form id="form1" method="post">
<script type="text/javascript" src="<?php echo $KoolControlsFolder; ?>/KoolAjax/koolajax_extension.js"></script>
<style>
  #target {
    width:655px;
    border:dotted 1px gray;
    min-height:50px;
    padding:10px;
  }
</style>
		
<div id="target"></div>
<script type="text/javascript">
  function load_treeview() {
    koolajax.load("tree.php",handle_ondone);
  }
  function load_listbox() {
    koolajax.load("listbox.php",handle_ondone);
  }
  function load_grid() {
    //document.write('<div>Grid should be here</div>');
    koolajax.load("gridbasic.php",handle_ondone); 
  }
  function handle_ondone(result) {
    var _target = document.getElementById("target");
    _target.innerHTML = result;
    run_script_in_element("target");//This function is inside koolajax_extension.js
  }
</script>
<input type="button" value="Load TreeView" onclick="load_treeview()" />
<input type="button" value="Load ListBox" onclick="load_listbox()" />
<input type="button" value="Load Grid" onclick="load_grid()" />
</form>
</body></HTML>

Now, the grid PHP file:
1. Does not need the ajax control since it is in the control2div.php file
2. Does need the environment variables (I have mine in inc/gvars.php)
3. Does the connection to the database set up inc/dbkool.php
4. Notice the $koolajax->Render() should not be there! (it's comented out)
<?php
require_once "inc/gvars.php";
include_once "inc/dbkool.php"; 
         require $KoolControlsFolder."/KoolGrid/koolgrid.php";
	 $lvl1Datasource = new MySQLDataSource($db_con); 
         $lvl1sql="select customerNumber,customerName,phone,city from customers";
	 $lvl1Datasource->SelectCommand = $lvl1sql;
	 $lvl2Datasource = new MySQLDataSource($db_con); 
         $lvl2sql="select orderNumber,orderDate,status,customerNumber from orders";
	 $lvl2Datasource->SelectCommand = $lvl2sql;
 
	 $lvl3Datasource = new MySQLDataSource($db_con); 
         $lvl3sql="select orderNumber,productName,quantityOrdered,priceEach from orderdetails,products where orderdetails.productCode=products.productCode";
	 $lvl3Datasource->SelectCommand = $lvl3sql;
	 $grid = new KoolGrid("grid");
	 $grid->scriptFolder = $KoolControlsFolder."/KoolGrid";
	 $grid->styleFolder="default";
	 $grid->Width = "655px";
	 $grid->RowAlternative = true;
	 $grid->AjaxEnabled = true;
	 $grid->AjaxLoadingImage =  $KoolControlsFolder."/KoolAjax/loading/5.gif";
//LEVEL 3 TABLE
	 $lvl3Table = new GridTableView();
	 $lvl3Table->Width = "100%";
	 $lvl3Table->DataSource = $lvl3Datasource;
	 $lvl3Table->AddRelationField("orderNumber","orderNumber");
	 $lvl3Table->AutoGenerateColumns = true;//Auto Generate all column from tables
	 $lvl3Table->DisableAutoGenerateDataFields = "orderNumber";//Disable generate column for orderNumber data fields.
 
//LEVEL 2 TABLE
	 $lvl2Table = new GridTableView();
	 $lvl2Table->Width = "100%";	
	 $lvl2Table->DataSource =$lvl2Datasource;
	 $lvl2Table->AddRelationField("customerNumber","customerNumber");
	 $lvl2Table->AutoGenerateExpandColumn = true;
	 $lvl2Table->AutoGenerateColumns = true;
	 $lvl2Table->DisableAutoGenerateDataFields = "customerNumber";
	 $lvl2Table->AddDetailTable($lvl3Table);
	
//MASTER TABLE
	 $grid->MasterTable->DataSource = $lvl1Datasource;
	 $grid->MasterTable->AutoGenerateExpandColumn = true;
	 $grid->MasterTable->AutoGenerateColumns = true;
	 $grid->MasterTable->AddDetailTable($lvl2Table);
 
	 $grid->MasterTable->Pager = new GridPrevNextAndNumericPager();
	 $grid->Process();
	//echo $koolajax->Render();
	echo $grid->Render();
?>
Posted Dec 25, 2015 , edited Dec 30, 2015 Kool