This sample demonstrates how to change AmbiGrid appearance.
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
);
// defining grid options
$grid_options = array(
'height' => 250,
'renderHeader' => false
);
// creating provider and grid
$provider = $api->createProvider($params);
$grid = $api->createGrid('xcDataGrid1', $provider, 25, $grid_options);
// changing grid options
$grid->setOption('selectAllowed', false);
// 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"></div>
</body>
</html>
Comments:
- AmbiGrid appearance is controlled by external stylesheet file - xc_grid_default.css. You can edit styles there, but this is not recomended. The better way is creating a user stylesheet file which redefines required styles (see list of stlyles in the xc_grid_default.css). In our example we create silver.css file. Note: it must be included after printJS() call:
<?php $api->printJS(); ?>
<link rel="stylesheet" type="text/css" href="silver.css" />
- Here is silver.css source:
.xcGridCell, .xcGridAlternatingCell, .xcGridActiveRowCell {
padding: 0px 5px 0px 5px;
}
.xcGridAlternatingCell {
background-color: #f9f5ed;
}
.xcGridActiveRowCell {
background-color: #fec779;
}
.xcGridHeaderCell {
background-image: url('images/header_bg.gif');
border-right: 0px solid #999999;
border-top: 1px solid #999999;
border-left: 0px solid #999999;
border-bottom: 1px solid #999999;
padding: 0px 5px 0px 5px;
height: 28px;
}
.xcGridFooterCell {
background-image: url('images/footer_bg.gif');
border-right: 0px solid #999999;
border-top: 1px solid #999999;
border-left: 0px solid #999999;
border-bottom: 1px solid #999999;
color: #FFFFFF;
padding: 0px 3px 0px 3px;
height: 28px;
}
.xcGridTable {
width: 100%;
}
- Additionally you can control datagrid appearance and behavior by setting datagrid options. You can set options in three ways:
1. By changing default option values in /apis/simple_api/config.php configuration file. These changes will affect all AmbiGrid instances on your website.
2. By passing array of options to the createGrid() API function to set up datagrid instance to be created:
// defining grid options
$grid_options = array(
'height' => 250,
'renderHeader' => false
);
// creating provider and grid
$provider = $api->createProvider($params);
$grid = $api->createGrid('xcDataGrid1', $provider, 25, $grid_options);
3. By calling API function setOption() to change single datagrid instance represented by $grid variable:
// changing grid options
$grid->setOption('selectAllowed', false);