Using cell Renderer with Datagrid in flash:

Cell Renderer API: components inside a Datagrid


Goals

This example shows how you can use components or MovieClip inside the the datagrid (ie into datagrid cells).

In this example a custom Exit Button icon is used inside the datagrid component. When we click the Button that row will be deleted. Let us now create a actionscript class file to attach the button into the Datagrid cell. Name it as exitButton.as


You can get this "exitButton.as" attched with this post.


Create and Flash Document:

1) First Open a Flash Document.
2) Drag an instance of the Datagrid in to the stage, name it as gridBox. 3) Create an exit button icon as you wish, its size should be fit into the Datagrid cell. Name it as 'exbtn" and set its linkage identifier as "exbtn".
4) Then create a movieclip but nothing should be draw inside the clip and name it as "gridCellRenderer", it is the mediater to connect AS class file and the Flash document .
5) Right Clik the gridCellRenderer" movieclip and select linkage, its shows the linkage properties box. 6) Click the Export for ActionScript CheckBox, Set the linkage identifier to "exitButton" and AS 2.0 Class to "exitButton" (this should be same as the class file we created).
7) we must save the Flash Document and the ActionScript class file in the same path, then only it will take effect.
8) Write the codes in Main TimeLine.

gridBox.setSize(150,100);
gridBox.setStyle("borderStyle","solid");
gridBox.rowHeight = 20;
gridBox.setStyle("alternatingRowColors",[0xD8F9FC,0xeeeee6]);
gridBox.setStyle("fontSize", 11);
gridBox.setStyle("hGridLines", true);
gridBox.setStyle("hGridLineColor", 0xCCCCCC);
gridBox.setStyle("vGridLines", false);
gridBox.setStyle("fontFamily", "Verdana");
gridBox.setStyle("useRollOver", true);

gridBox.addColumn("name");
gridBox.addColumn("exit");
gridBox.getColumnAt(0).width =110;
gridBox.getColumnAt(1).width =20
gridBox.showHeaders=false;

var myDP_array:Array = new Array({name:"John"},{name:"Jose"},{name:"James"},{ name:"Jonathan"});
gridBox.dataProvider = myDP_array;
gridBox.getColumnAt(1).cellRenderer = "exitButton";


Thats All.

Note : Also i have attched a sample swf file for the demo purpose. if you want further details contact me.

Attached Files

exitButton.zip (62.4 KB, 413 views)

so its empty... great!

dude, your zip is empty

Its Empty............................