Select and deselect checkboxes in a dataGrid in Flex

While reading forum http://www.flexdeveloper.eu/forums/mxml/ some one wanted to know how to make the following functionality in Flex.

For each row in a dataGrid we have two checkboxes (in his example one is compulsory and the other optional). What we want is that all the time only one checkbox is checked, so if I check optional to true, I want the other one (compulsory) to be false.

This can be done with an itemRenderer that will function also as our itemEditor. Here is the code of the app:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" initialize="init()">
<mx:Script>
	<![CDATA[
		import mx.collections.ArrayCollection;
		[Bindable] public var ac:ArrayCollection = new ArrayCollection;
		public function init():void{
			ac.addItem({id: 1, compulsory: true, optional:false});
			ac.addItem({id: 2, compulsory: false, optional:true});
			ac.addItem({id: 3, compulsory: true, optional:false});
		}
	]]>
</mx:Script>
	<mx:DataGrid dataProvider="{ac}" id="DG">
		<mx:columns>
			<mx:DataGridColumn headerText="ID" dataField="id"/>
			<mx:DataGridColumn headerText="Compulsory" itemRenderer="CheckBoxComponent" 
				editable="true" rendererIsEditor="true" dataField="compulsory"/>
			<mx:DataGridColumn headerText="Optional" itemRenderer="CheckBoxComponent" 
				editable="true" rendererIsEditor="true" dataField="optional"/>
		</mx:columns>
	</mx:DataGrid>
</mx:Application>

So we have an initialize function set to init(), in there we just add arrayCollection ac to dataGrid with id DG as it’s dataprovider. In the DataGrid itself we have 3 columns (id, compulsory and optional), since our itemRenderer will also be our editor of data we set rendererIsEditor=”true”.

Now let’s take a look at the code that is used as our itemRenderer.

<?xml version="1.0" encoding="utf-8"?>
<mx:CheckBox xmlns:mx="http://www.adobe.com/2006/mxml" change="change()">
	<mx:Script>
		<![CDATA[
		import mx.controls.Alert;
			override public function set data( value:Object ) : void {
				super.data = value;
			}
			private function change():void{
				if (data.optional){
					data.optional = false;
					data.compulsory = true;
				} else {
					data.optional = true;
					data.compulsory = false;
				}
				document.ac.refresh();
			}
		]]>
	</mx:Script>
</mx:CheckBox>

Everything here is very straightforward, we first have to get data for the clicked row, we do this by overriding set data function, and in it calling super.data = value.

As this component is based on CheckBox component we add a function to be called when CheckBox is changed (change=”change()”).

Since we know that if we know that every time one checkbox is checked other one has to be unchecked and vice versa.

Inside change() function we check if optional is true, and if it is we set optional to false and compulsory to true, if optional is false we set it to true and compulsory to false.

At the end we have to ensure that dataGrid will show the data we changed so we have to call document.ac.refresh() function, which just says to the arraycollection to refresh it self (along with our changed data).

You can try the app right here: http://www.tdteam.com/work/engineeringtheworld/example.swf

Advertisements

, ,

  1. Leave a comment

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: