DHTMLX Docs & Samples Explorer

Formatting/Changing Data before Loading

base formatting methods

APPLICABLE TO: Grid, TreeGrid, Tree, Combo, Scheduler, DataView, Chart, Form, DataStore, DHTMLX Touch components

When you need to update values which were returned from database table or set some specific formatting before sending data to client-side, you should use the beforeRender event handler.

common usage

$res=mysql_connect($mysql_server,$mysql_user,$mysql_pass);
mysql_select_db($mysql_db);
require("../../codebase/grid_connector.php");	
 
function color_rows($row){
	if ($row->get_index()%2)
	$row->set_row_color("red");
}
 
$grid = new GridConnector($res);
$grid->event->attach("beforeRender","color_rows");
$grid->render_table("grid50000","item_id","item_nm,item_cd");
  • color_rows function sets colors for rows subject to their indices
  • during data generation, for each record outputed for client-side beforeRender event will be executed, i.e. color_rows function will be called for each record
  • $row is an instance of GridDataItem object related to current record

date formatting

APPLICABLE TO: Grid, TreeGrid, Tree, Combo, Scheduler, DataView, Chart, Form, DateStore, DHTMLX Touch Components

function formatting($row){
                  //render field as details link
                  $data = $row->get_value("some_field");
                  $row->set_value("some_field","<a href='details.php?id={$data}'>Details</a>");
 
                  //formatting date field
                  $data = $row->get_value("other_field");
                  $row->set_value("other_field",date("m-d-Y",strtotime($data)));
}
 
$grid = new GridConnector($res);
$grid->event->attach("beforeRender","formatting");
  • get_value and set_value methods allow to get or set value of any field related to the record ( it doesn't affect actual values in DB )
  • If alias was used during data configuration - you need to use it instead of real db field name as the first parameter of get|set command.

using extra fields

APPLICABLE TO: Grid, TreeGrid, Tree, Combo, Scheduler, DataView, Chart, Form, DataStore, DHTMLX Touch components

More complex formating rules can be defined by using extra fields while configuration.

function formatting($row){
           //set row color
           $row->set_row_color($row->get_value("color"));
           //save in userdata 
           $row->set_userdata("some_data",$row->get_value("count"));
}
 
$grid = new GridConnector($res);
$grid->event->attach("beforeRender","formatting");
$grid->render_table("some_table","id","name,price","color,count");
  • field color isn't outputed to client-side but used to define property of row.
  • during update|insert operation only 'name' and 'price' columns may be changed, 'color' will stay untouched.
  • 'count' field will be sent to client-side as userdata of the row and it will be possible to access it on client-side through related data.

tree/treegrid specificity

APPLICABLE TO: Tree, TreeGrid

treeGrid provides TreeGridDataItem and tree provides TreeDataItem as input parameter of beforeRender event handler. Both of them support base operations and few specific ones.

function custom_format($item){
                if ($item->get_value("complete")>75) 
		        $item->set_check_state(1);
 
		if ($item->get_value("duration")>10)
			$item->set_image("true.gif");
		else
			$item->set_image("false.gif");
}
$tree->event->attach("beforeRender","custom_format");
  • set_image method allows to set image of tree element ( for treegrid it accepts the only parameter, while for tree it can be 3 different images for 3 states of tree's item)
  • set_check method exists only in TreeDataItem object and allows to set the state of related checkbox ( tree need to have checkboxes enabled in js. configuration code as well)
  • beforeRender event can be used in dynamic Tree and TreeGrid to define which elements of hierarchy are branches and which are leafs (see details here).