KoolGrid - Powerful PHP Grid
When it comes to web DataGrids, fast loading of large data combined with advanced Excel-like operations has been always a challenge. Having a solid experience in web technologies, we designed our AJAX powered PHP Grid to eliminate this tradeoff. Easy-to-use, rich client-side API, myriad of features topped with an unbeatable performance is what we call KoolGrid.

Key features:
  • Very easy to use, simple PHP code.
  • Rich client-side API and events
  • AJAX Capability
  • State persistence through postback and ajax callback
  • Support Auto CRUD ( Create, Update, Delete)
  • Scrolling with position persistence
  • Sorting
  • Filtering
  • Grouping
  • Row Selecting
  • Form and Inline Editing
  • Localization
  • Many skins are available to choose.
  • Skin can be all customized as wished.
  • Easy-to use, with support of Code Generator

Step by step guides

<?php
	//Step 1: Register KoolGrid component to your page
	require "KoolControls/KoolGrid/koolgrid.php";
	require "KoolControls/KoolAjax/koolajax.php";
	$koolajax->scriptFolder = "KoolControls/KoolAjax";
 
	//Step 2: Create datasource
	$db_con = mysql_connect($dbhost,$dbuser,$dbpass);
	mysql_select_db($dbname,$db_con);
	$ds = new MySQLDataSource($db_con);
	$ds->SelectCommand = "select customerNumber,customerName,phone,city from customers";
 
	//Step 3: Init KoolGrid and settings
	$grid = new KoolGrid("grid");
	$grid->scriptFolder = "KoolControls/KoolGrid";
	$grid->styleFolder="default";
	$grid->DataSource = $ds;
	$grid->AjaxEnabled = true;
	$grid->Width = "655px";
	$grid->AllowInserting = true;
	$grid->AllowSorting = true;
	$grid->AutoGenerateColumns = true;
	$grid->MasterTable->Pager = new GridPrevNextAndNumericPager();
 
 
	//Step 4: Process Grid
	$grid->Process();
?>
 
<html>
    <head>
        <title></title>
        <?php echo $koolajax->Render();?>
    </head>
    <body>
        <form id="form1" method="post">
            <!-- Step 5: Get KoolGrid render -->
            <?php echo $grid->Render();?>
        </form>
    </body>
</html>