Tuesday, January 4, 2011

AS3 DataGrid component: Part 2

Today we will look into columns and rows and see what can we do with them.

First let's add 2 more users to the data array, whose ages are 2 and 3. This is needed to demonstrate how to manage sorting in columns.

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"}];

Let's get rid of the scrolling. To do that, we can set the number of all displayed rows to the number of rows in total:

myGrid.rowCount = myGrid.length;

Here's what we get:


Try sorting numbers by clicking the Age title. As you can see, the numbers are sorted like simple characters (according to they keycodes) and not like numbers should be sorted. However, we can set numeric sorting to that column. We will create each column separately for this. Firstly, import the DataGridColumn class:

import fl.controls.dataGridClasses.DataGridColumn;

Now we create all these 3 columns separately, and set the Age column's sorting to numeric:

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);

Check out the results, try sorting the numbers now:


Full code:

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

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 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 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

2 comments:

Anonymous said...

Great tutorial, but if i want sort a dg automatically by...age, or name, without press the header?
How can do this?

tks

Luca

Kirill Poletaev said...

Sort the arrays:

Tutorial 1
Tutorial 2

Post a Comment