Saturday, July 18, 2009

Modify cell color in Datagrid component

The DataGrid control is a list that can display more than one column of data. It is a formatted table of data that lets you set editable table cells, and is the foundation of many data-driven applications.

For information on the following topics, which are often important for creating advanced data grid controls, see:

  • How to format the information in each DataGrid cell and control how users enter data in the cells.
  • How to drag objects to and from the data grid

For complete reference information, see the Adobe Flex Language Reference.

About the DataGrid control

The DataGrid control provides the following features:

  • Resizable, sortable, and customizable column layouts, including hidable columns
  • Optional customizable column and row headers, including optionally wrapping header text
  • Columns that the user can resize and reorder at run time
  • Selection events
  • Ability to use a custom item renderer for any column
  • Support for paging through data
  • Locked rows and columns that do not scroll
This sample for modify color cell in datagrid and using action script,

The flex code for datagrid component :
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
creationComplete="getListDataBrg.send()">
<mx:HTTPService id="getListDataBrg" method="POST" showBusyCursor="true"
useProxy="false" url="http://localhost/projectDir/srv/myPHP.php"/>
<mx:DataGrid x="312" y="57" dataProvider="{getListDataBrg.lastResult.data.detail}">
<mx:columns>
<mx:DataGridColumn headerText="Item Code" dataField="kode" width="130"
itemRenderer="TextOrHTMLRenderer"/>
<mx:DataGridColumn headerText="Item Name" dataField="nama"/>
<mx:DataGridColumn headerText="Item Unit" dataField="unit"/>
</mx:columns>
</mx:DataGrid>
</mx:Application>


This ActionScript for coloring cell in datagrid, TextOrHTMLRenderer.as :
package
{
import mx.controls.DataGrid;
import mx.controls.dataGridClasses.DataGridItemRenderer;
import mx.controls.dataGridClasses.DataGridColumn;

public class TextOrHTMLRenderer extends DataGridItemRenderer
{

public function TextOrHTMLRenderer()
{
super();
}

override public function validateProperties():void
{
super.validateProperties();
if (listData)
{
var dg:DataGrid = DataGrid(listData.owner);

var column:DataGridColumn = dg.columns[listData.columnIndex];
htmlText = data[column.dataField];

if (getStyle("plainText"))
{
text = text;
}
}
}

}

}

This PHP code for myPHP.php, this code used to setting color properties in HTML code :
<?
header('Content-Type: text/xml');
include('adodb/adodb.inc.php'); # load code common to ADOdb
$connectX = ADONewConnection('mssql'); # create a connection
$connectX -> Connect("yodi-it","USERNAME","PASSWORD",'DATABASENAME');

$databrg = $connectX->Execute("SELECT KDBRG,NMBRG,UNIT FROM TABLE_NAME");
$xml="<data>";
$xml.="<count>".$databrg->RecordCount()."</count>";
while(!$databrg->EOF)
{
if(trim($databrg->fields[0])=="A001")
{
$colorx="color='#000000'";
}
else
{
$colorx="color='#CFB004'";
}
$xml.="<detail>";
$xml.="<kode> <FONT $colorx >".trim($databrg->fields[0])."</FONT>
</kode>";

$xml.="<nama>".trim(str_replace('&','&',$databrg->fields[1]))."</nama>";
$xml.="<unit>".trim($databrg->fields[2])."</unit>";
$xml.="</detail>";
$databrg->MoveNext();
}
$xml.="</data>";
print($xml);
?>

No comments:

Post a Comment