Wednesday, January 19, 2011

AS3 DataGrid component: Part 14

In this tutorial we will learn how to make specific columns in a DataGrid editable by the user.

Say, you need to display some information in a DataGrid to the user and you want to allow him to be able to edit the data. This can be done by setting the editable property of the DataGrid to true, either through the component inspector or using AS3:

myGrid.editable = true;

However, what if you don't want to let him edit certain columns? For example, you only want to give him the ability to edit data in the Name column, but not be able to edit the ID, like in this example:


You'll need to set the column's parameter 'editable' to false. Like this:

var col_id:DataGridColumn = new DataGridColumn("ID");
myGrid.addColumn(col_id);
col_id.editable = false;

Full code for the DataGrid like in the example:

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

myGrid.move(10,10);
myGrid.setSize(280, 180);

myGrid.editable = true;

var col_id:DataGridColumn = new DataGridColumn("ID");
myGrid.addColumn(col_id);
col_id.editable = false;

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

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", ID: "1025001"},
{Name: "Ralph", ID: "1025002"},
{Name: "Ted", ID: "1025003"},
{Name: "Bob", ID: "1025004"},
{Name: "Jack", ID: "1025005"},
{Name: "Claire", ID: "1025006"},
{Name: "Michael", ID: "1025007"},
{Name: "Daniel", ID: "1025008"}
];

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

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

7 comments:

Anonymous said...

I built my own Datagrid in Flash CS5, sick and tired of the original one.
See the output here....
http://www.flashbackstage.com/private/datagrid.swf

Cheers
www.saintgeorgehotel.net

Anonymous said...

Can I populate this DataGrid with an xml and save it...?

Andre said...

Sorry double post, can I populate this DataGrid with an xml and save it...?

Kirill Poletaev said...

To pass data from an XML to the datagrid, you simply pass the XML object to the data provider:

myGrid.dataProvider = new DataProvider(myXML);

You might want to read this tutorial.

Anonymous said...

Ok i got it...:=;)

Andre said...

Thank you, for your tutorials, they are incredible well explaneid, and help me a lot.

Daniel Silva said...

Hello, how can i change the size of the font in the field that is editing?

myGrid.setRendererStyle("textFormat", textFormat2); only change the style with isn´t editing the field

Thanks

Post a Comment