Friday, January 21, 2011

AS3 DataGrid component: Part 16

In this tutorial I will show you how to use html links in DataGrid component.

We are going to have a DataGrid with two columns, Name and Email. The text in the email column will be links and call a mailto:some@mail.com once clicked.

Here's the code for the .fla file.

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


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

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

var col_mail:DataGridColumn = new DataGridColumn("Email");
myGrid.addColumn(col_mail);
col_mail.cellRenderer = htmlCellRenderer;

var myData:Array = [{Name: "John Jenkins", Email: "<a href='mailto:john@domain.com'>john@domain.com</a>"},
{Name: "Anna Watson", Email: "<a href='mailto:anna@domain.com'>anna@domain.com</a>"},
{Name: "Susan McCallister", Email: "<a href='mailto:susan@domain.com'>susan@domain.com</a>"},
{Name: "Joe Thompson", Email:"<a href='mailto:joe@domain.com'>joe@domain.com</a>"}];

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

As you can see, I am using the HTML tags in my data array. Here's the custom cell renderer class:

package 
{

import fl.controls.listClasses.CellRenderer;

public class htmlCellRenderer extends CellRenderer
{

public function htmlCellRenderer()
{
mouseChildren = true;
mouseEnabled = true;
focusEnabled = true;
}

override protected function drawLayout():void
{
textField.htmlText = textField.text;
super.drawLayout();
}
}
}

As you can see, I set the htmlText of the cell to its text, enabling html this way.

And there you have it.

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

7 comments:

CoDo said...

Very good tutorial!!
Thank you!!!

I have 1 issue:
My site resizes to the users resolution, and then my datagrid gets distorded. Here you can see a screendump: http://www.codobyte.com/problem/problemDatagrid.jpg

How can I solve this?

Kirill Poletaev said...

If your text gets cut off like that you could manually change the height of the rows in your data grid using the rowHeight property of your dataGrid object.

myGrid.rowHeight = 36;

CoDo said...

Thanks Kirill!

The text look good when it is viewed in 1024x768, but only when a user has a bigger resolution, it gets distorded. So, is there a way to let the datagrid adjust itself dynamically??

Kristtee said...

Hi
These tutorials are great and you rock. Only thing that is missing is that how to use the event handler on datagrid. For instance, I want to display the selected row information in a Text Field or load a web page when i lick on a row in datagrid.

Well, I am too new to this, hence if you could do some tutorials on eventhandlers that would make complete course on this subject.
Thank you
Kristtee

Anna Vanova said...

Nice and easy. Thanks a lot. a.

dev@climbapps.com said...

I am curious if there is any way you can do timeline navigation through a datagrid, like a link to a certain frame.

Again, love your site. In my eyes the best AS3 site tuts around!

Did Laz said...

I come back to this wonderful tuto every time I need to know something about DataGrrids. Just a huge Thank You for having taken the time to make this tuto, also for the quality, no mistake, all works... Great job!

Post a Comment