Tuesday, January 11, 2011

AS3 DataGrid component: Part 8

Today we'll learn how to manually highlight some of the rows in a datagrid.

Like this:


Basically, we set a parameter for each row and then the cell renderer checks its value and sets the style of the cell according to that value.

Let's edit our array that stores the data by adding one more parameter RowColor and setting some of the values to white, and some to red.

var myData:Array = [{Name: "John Jenkins", Age: "31", Job: "Shop manager", RowColor: "white"},
{Name: "Anna Watson", Age: "28", Job: "Doctor", RowColor: "white"},
{Name: "Susan McCallister", Age: "29", Job: "Chef", RowColor: "white"},
{Name: "Joe Thompson", Age:"32", Job: "Janitor", RowColor: "red"},
{Name: "Bob Anderson", Age:"31", Job: "Bank assistant", RowColor: "red"},
{Name: "William Thompson", Age:"2", Job: "Little kid", RowColor: "red"},
{Name: "Oscar Anderson", Age:"3", Job: "Little kid", RowColor: "white"}];

Then we set the cellRenderer of the whole datagrid to a custom colorCellRenderer class.

myGrid.setStyle("cellRenderer", colorCellRenderer);

The full code of the .fla file will be:

import fl.data.DataProvider;
import fl.controls.dataGridClasses.DataGridColumn;

myGrid.move(10,10);
myGrid.setSize(300, 100)

var col_name:DataGridColumn = new DataGridColumn("Name");
myGrid.addColumn(col_name);

var col_age:DataGridColumn = new DataGridColumn("Age");
myGrid.addColumn(col_age);
col_age.sortOptions = Array.NUMERIC;

var col_job:DataGridColumn = new DataGridColumn("Job");
myGrid.addColumn(col_job);

myGrid.columns[0].width=140
myGrid.columns[1].width=70
myGrid.columns[2].width=150

var textFormat1:TextFormat = new TextFormat();
textFormat1.size = 16;
textFormat1.color = 0x333333;
textFormat1.bold = true;
textFormat1.font = "Arial"

myGrid.setStyle("headerTextFormat", textFormat1);

var textFormat2:TextFormat = new TextFormat();
textFormat2.size = 10;
textFormat2.font = "Verdana"

myGrid.setRendererStyle("textFormat", textFormat2);


var myData:Array = [{Name: "John Jenkins", Age: "31", Job: "Shop manager", RowColor: "white"},
{Name: "Anna Watson", Age: "28", Job: "Doctor", RowColor: "white"},
{Name: "Susan McCallister", Age: "29", Job: "Chef", RowColor: "white"},
{Name: "Joe Thompson", Age:"32", Job: "Janitor", RowColor: "red"},
{Name: "Bob Anderson", Age:"31", Job: "Bank assistant", RowColor: "red"},
{Name: "William Thompson", Age:"2", Job: "Little kid", RowColor: "red"},
{Name: "Oscar Anderson", Age:"3", Job: "Little kid", RowColor: "white"}];

myGrid.dataProvider = new DataProvider(myData);
myGrid.rowCount = myGrid.length;

myGrid.setStyle("cellRenderer", colorCellRenderer);

Now, the colorCellRenderer class.

package 
{

import fl.controls.listClasses.CellRenderer;
import flash.text.TextFormat;
import flash.text.TextFormatAlign;

public class colorCellRenderer extends CellRenderer
{
private var tf:TextFormat;

public function colorCellRenderer()
{
}

override protected function drawBackground():void
{
if (data.RowColor == "red")
{
setStyle("upSkin", CellRenderer_upSkin2);
}
else
{
setStyle("upSkin", CellRenderer_upSkin);
}
super.drawBackground();
}

}
}

As you can see, we override the already existing drawBackground() method of the already existing class CellRenderer and add our own code, which checks the RowColor value of the current item in the array (we can refer to it using data.RowColor). Just like in the previous tutorial, we set the style of the cell to an already existing movieclip in our library that has a class path of CellRenderer_upSkin2.

Thanks for reading!

Related:

AS3 DataGrid component: Part 1
AS3 DataGrid component: Part 2
AS3 DataGrid component: Part 3
AS3 DataGrid component: Part 4
AS3 DataGrid component: Part 5
AS3 DataGrid component: Part 6
AS3 DataGrid component: Part 7
AS3 DataGrid component: Part 9
AS3 DataGrid component: Part 10
AS3 DataGrid component: Part 11
AS3 DataGrid component: Part 12
AS3 DataGrid component: Part 13
AS3 DataGrid component: Part 14
AS3 DataGrid component: Part 15
AS3 DataGrid component: Part 16

No comments:

Post a Comment