It demonstrates how to use column templates.
Sample source code:
<?php
require_once 'grid/main.php';
// getting SimpleAPI class
$api = XC_AmbiGrid::getSimpleAPI();
// defining db provider parameters
$query = <<<ENDOFQUERY
SELECT
co.Code,
co.Name,
co.Continent,
co.Region,
co.SurfaceArea,
co.Population,
cy.Name
FROM Country co
LEFT JOIN City cy ON cy.ID = co.Capital
ENDOFQUERY;
$params = array(
'db_type' => 'MySql',
'db_name' => 'your_db_name',
'db_server' => 'localhost',
'db_username' => 'username',
'db_password' => 'password',
'cmd_select' => $query
);
// creating provider and grid
$provider = $api->createProvider($params);
$grid = $api->createGrid('xcDataGrid1', $provider, 25);
// after all initialization call to processAjaxRequest() required
$api->processAjaxRequest();
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>SimpleAPI example</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<?php $api->printJS(); ?>
<link rel="stylesheet" type="text/css" href="silver.css" />
</head>
<body>
<div id="xcDataGrid1" style="width: 1000px">
<table>
<thead>
<tr>
<td>Code</td>
<td>Name</td>
<td>Continent</td>
<td>Region</td>
<td>Surface Area</td>
<td>Population</td>
<td>Capital</td>
</tr>
</thead>
<tbody>
<tr>
<td>{Code}</td>
<td>{co.Name}</td>
<td>{Continent}</td>
<td>{Region}</td>
<td>{SurfaceArea} km<sup>2</sup></td>
<td>{Population}</td>
<td><a href="http://maps.google.com/maps?f=q&hl=en&geocode=&q={cy.Name}&ie=UTF8&z=10&iwloc=addr&om=1"
target="_blank">{cy.Name}</a></td>
</tr>
</tbody>
<tfoot>
</tfoot>
</table>
</div>
</body>
</html>
Comments:
- It is possible to customize AmbiGrid header and body content by defining grid template. To do this add table to the grid placeholder. thead section contains column headers, tbody section contains column templates. Column template allows representing column data within arbitrary HTML, for instance, you can treat data as image URL and display images in cells by placing data pieces into image src attributes or, like in the sample below, you can compose link with parameters controlled by column data (google maps link in the sample). To insert column data to a template use {column_name} expression. All {column_name} expressions are replaced to corresponding values when AmbiGrid rendered on page:
<div id="xcDataGrid1" style="width: 1000px">
<table>
<thead>
<tr>
<td>Code</td>
<td>Name</td>
<td>Continent</td>
<td>Region</td>
<td>Surface Area</td>
<td>Population</td>
<td>Capital</td>
</tr>
</thead>
<tbody>
<tr>
<td>{Code}</td>
<td>{co.Name}</td>
<td>{Continent}</td>
<td>{Region}</td>
<td>{SurfaceArea} km<sup>2</sup></td>
<td>{Population}</td>
<td><a href="http://maps.google.com/maps?f=q&hl=en&geocode=&q={cy.Name}&ie=UTF8&z=10&iwloc=addr&om=1"
target="_blank">{cy.Name}</a></td>
</tr>
</tbody>
<tfoot>
</tfoot>
</table>
</div>