Friday, January 7, 2011

AS3 DataGrid component: Part 4

Today we'll learn how to format text in a data grid component.

Like this:


First we need to create TextFormat objects. These will contain all the information about the text's appearance - color, font, size, etc. I need 2 of these objects - one for header, and the other one for rows.

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

var textFormat2:TextFormat = new TextFormat();
textFormat2.size = 12;
textFormat2.italic = true;
textFormat2.font = "Verdana"

Now, we need to apply these formats to the data grid. We can use the setStyle() and setRendererStyle() methods:

myGrid.setStyle("headerTextFormat", textFormat1);
myGrid.setRendererStyle("textFormat", textFormat2);

So the full code is:

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=50
myGrid.columns[2].width=150

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

myGrid.setStyle("headerTextFormat", textFormat1);

var textFormat2:TextFormat = new TextFormat();
textFormat2.size = 12;
textFormat2.italic = true;
textFormat2.font = "Verdana"

myGrid.setRendererStyle("textFormat", textFormat2);


var myData:Array = [{Name: "John Jenkins", Age: "31", Job: "Shop manager"},
{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;

Thanks for reading!

Related:

AS3 DataGrid component: Part 1
AS3 DataGrid component: Part 2
AS3 DataGrid component: Part 3
AS3 DataGrid component: Part 5
AS3 DataGrid component: Part 6
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

7 comments:

Valerian said...

is there a way to create another header besides the one that is deplayed on the top? i mean for example after the row John Thompson there will be another header, not Bob Anderson, is it possible?

or as an alternative i can unite the 3 columns in the next row, so that it will look like a header? is this possible too?))

Valerian said...

is there a way to align headers to center?

Kirill Poletaev said...

There isn't a way to create another header, but you can stylize a row to look like a header if you want to. Sorting won't work in this situation, though, so you'll have to turn that off.

The best way would be to just create a new datagrid and then place the datagrids close to each other, so that they look like a whole.

And if by aligning headers to center you mean aligning the headers text, then yes, you can do any styling you want with the headers, just like with any text field.

Valerian said...

i googled and didnt find any solution to aligning headers, the align center for headers doesnt work, no one seems got this working

Vakhtangi Beridze said...

I have the same problem about aligning header text

Vakhtangi Beridze said...

I found header text align solution here,
tested and its works

http://www.kirupa.com/forum/showthread.php?350302-DataGrid-Header-text-align

Akiva said...

How could one change the font of a specific column?

Post a Comment