Sunday, January 9, 2011

AS3 DataGrid component: Part 6

In this tutorial we will learn how to change the height of rows in a data grid and enable text word-wrapping.

This is how it is going to look:


To change the height of rows, you can use the rowHeight property of the grid:

myGrid.rowHeight = 40;

To make the text in a collumn multiline, you'll need to create a custom cell renderer and apply it to the collumn. I apply the wordWrapCellRenderer class to my col_job column:

col_job.cellRenderer = wordWrapCellRenderer;

Now, the class itself:

package 
{

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

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

public function wordWrapCellRenderer()
{
tf = new TextFormat();
tf.align = TextFormatAlign.CENTER;
}

override protected function drawLayout():void
{
textField.setTextFormat(tf);
textField.wordWrap = true;
super.drawLayout();
}
}
}

As you can see, we simply set the wordWrap property of the cell's textfield to true. Remember that you can also make new lines manually using "\n", for example: "First line\n Second line\n Third line".

Here's the final code in the .fla:

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);
col_job.cellRenderer = wordWrapCellRenderer;

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's assistant"},
{Name: "Anna Watson", Age: "28", Job: "Doctor"},
{Name: "Susan McCallister", Age: "29", Job: "Chef"},
{Name: "Joe Thompson", Age:"32", Job: "Janitor"},
{Name: "Bob Anderson", Age:"31", Job: "Bank assistant"},
{Name: "William Thompson", Age:"2", Job: "Little kid"},
{Name: "Oscar Anderson", Age:"3", Job: "Little kid"}];

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

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 7
AS3 DataGrid component: Part 8
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

3 comments:

xinlouis said...
This comment has been removed by the author.
xinlouis said...

Nice tutorial, thanks for all parts.

Jignesh Dedhia said...

Scene 2, Layer 'Layer 1', Frame 2, Line 16 1120: Access of undefined property wordWrapCellRenderer.

pls help

Post a Comment