Adding CheckBox instances to a DataGrid column

Once in a while somebody wants to add an icon or more often a component in the DataGrid component. This seemed to be easier with AS2 components and there are some tutorials. However, this is different with AS3 components. Adobe has a nice article about manipulating the DataGrid. One of the tutorials on that site shows how to add images to the DataGrid using the UILoader component. In the following we want to add CheckBox instances to cells of one column.

Extending the CheckBox class – implementing the ICellRenderer interface

I will show two ways, but the aim is different. In the first part we add a CheckBox and clicking a DataGrid row will select the CheckBox as shown in this movie. We first create a Documnent class where we add the DataGrid. We associate a CellRenderer to the row, where we want to show CheckBox instances. Clicking another row will select the CheckBox in that row and unselect the previous CheckBox.

_check.cellRenderer = SpriteCellRenderer_1;

We then write the class SpriteCellRenderer_1. This class extends the CheckBox class and implements the ICellRenderer class. We need to add some functions to this class, which basically stay empty. This is because the ICellRenderer interface has certain properties and methods. Some of these overlap with the CheckBox class but some not and those are the ones we add. If you test movie at this stage you will see CheckBox instances added but without label. So in the constructor of this class just add this line

label = "Check it out";

and that is all.

Using the CheckBox in the DataGrid to select items for a shopping cart

That was quite simple, however, there is no real functionality of the CheckBox. In the next example we select CheckBox instances and the items associated with them will be added to a shopping cart list. The Document class is very similar as previously except for some important differences, which I will explain. We extend the Document class to a new Abstract class, which we have to write. This is because we need to communicate from outside the Document class. I have documented this in a separate blog article. Another change is of course that data which we receive from the CheckBox selection will be monitored and stored in an array, which is the listener function when a row is pressed.

So now let’s have a look at the SpriteCellRenderer class, which is equivalent to the SpriteCellRenderer_1 class from the previous movie. The SpriteCellRenderer class this time extends the Sprite class and also implements the ICellRenderer interface. Our strategy is to create a Sprite instance and then using addChild we add a CheckBox instance, which is independent from the DataGrid row MouseEvent. We need to add all the methods from the ICellRenderer interface, since the Sprite class does not share any of those. In order to add the CheckBox to the DataGrid we create a Sprite in the fla and name it “MyIcon”. This Sprite is associated with its own class. If you go back and look at the Document class of this movie you should look at the place where we add items to columns.

dp.addItem ({no:"1",item:"Apples",price:"$1,50",data:"MyIcon"});

The last part is the “_check” column with “data” as the variable. We place a Sprite instance in the DataGrid by adding this script to the function “set data” in the SpriteCellRenderer class.

public function set data (value:Object):void
{
	_data = value;
	if (!wasSelected)
	{
		var ClassReference:Class = getDefinitionByName(_data.data) as Class;
		var instance:Object = new ClassReference();
		addChild (DisplayObject(instance));
		wasSelected = true;
	}
}

The Boolean “wasSelected” is to prevent that every time a DataGrid row is selected more instances are added to the Displaylist. We have now achieved to add an instance of MyIcon to a row of the DataGrid.

Next we need to add the CheckBox. We do that using the MyIcon class. Go through the script and you see where. The last task is to communicate with the Document class to manipulate which items the user wants to select. If you look at the “MyIcon” class you see that it also extends the Abstract class and so shares properties and methods with the Document class. So we use the the set_Message method to send a message to the Document class. The nice thing here is that when we select the CheckBox we also trigger the DataGrid CLICK event and by using the get_message method know what is the selection status. Finally, we add our selection to an array or delete it again if we decide to unselect it. Check the scripts, which have a lot of additional comments. You can download all files here.

Leave a Reply

You must be logged in to post a comment.