The following example will show you how you can use a CheckBox control as a custom item renderer in a List control in Flex.
I haven’t done a lot of testing yet, so if you have any tips/suggestions/improvements, please, share them in the comments.
Full code after the jump.
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/01/27/using-a-checkbox-control-as-a-list-item-renderer-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:vo="*"
layout="horizontal"
verticalAlign="middle"
backgroundColor="white"
creationComplete="init();">
<mx:Script>
<![CDATA[
import mx.events.CollectionEvent;
import mx.utils.ObjectUtil;
private function init():void {
arrColl.dispatchEvent(new CollectionEvent(CollectionEvent.COLLECTION_CHANGE));
}
private function arrColl_collectionChange(evt:CollectionEvent):void {
try {
var tArr:Array = arrColl.source.filter(selectedOnly);
textArea.text = ObjectUtil.toString(tArr);
lbl.text = tArr.length.toString() + " item(s) selected";
} catch (err:Error) {
// ignore.
}
}
private function selectedOnly(item:ListItemValueObject, idx:uint, arr:Array):Boolean {
return item.isSelected;
}
]]>
</mx:Script>
<mx:Array id="arr">
<vo:ListItemValueObject label="One" isSelected="true" />
<vo:ListItemValueObject label="Two" isSelected="true" />
<vo:ListItemValueObject label="Three" isSelected="true" />
<vo:ListItemValueObject label="Four" isSelected="true" />
<vo:ListItemValueObject label="Five" isSelected="false" />
<vo:ListItemValueObject label="Six" isSelected="false" />
<vo:ListItemValueObject label="Seven" isSelected="false" />
<vo:ListItemValueObject label="Eight" isSelected="false" />
<vo:ListItemValueObject label="Nine" isSelected="false" />
<vo:ListItemValueObject label="Ten" isSelected="false" />
<vo:ListItemValueObject label="Eleven" isSelected="false" />
<vo:ListItemValueObject label="Twelve" isSelected="false" />
</mx:Array>
<mx:ArrayCollection id="arrColl"
source="{arr}"
collectionChange="arrColl_collectionChange(event);" />
<mx:Panel id="panel"
title="Items"
status="{arrColl.length} total"
styleName="opaquePanel">
<mx:List id="list"
dataProvider="{arrColl}"
alternatingItemColors="[#EEEEEE, white]"
width="150"
rowCount="8">
<mx:itemRenderer>
<mx:Component>
<mx:CheckBox selectedField="isSelected"
change="onChange(event);">
<mx:Script>
<![CDATA[
private function onChange(evt:Event):void {
data.isSelected = !data.isSelected;
}
]]>
</mx:Script>
</mx:CheckBox>
</mx:Component>
</mx:itemRenderer>
</mx:List>
<mx:ControlBar horizontalAlign="right">
<mx:Label id="lbl" />
</mx:ControlBar>
</mx:Panel>
<mx:TextArea id="textArea"
verticalScrollPolicy="on"
width="100%"
height="{panel.height}" />
</mx:Application>
/**
* http://blog.flexexamples.com/2008/01/27/using-a-checkbox-control-as-a-list-item-renderer-in-flex/
*/
package {
public class ListItemValueObject {
[Bindable]
public var label:String;
[Bindable]
public var isSelected:Boolean;
public function ListItemValueObject() {
super();
}
}
}
View source is enabled in the following example.
For lots more information on item renderers from somebody who knows what he’s talking about, check out Alex Harui’s excellent item renderer articles: “Thinking About Item Renderers” and “More Thinking About Item Renderers”.
I am attempting to build a filter that will add or remove items from a Datagrid. The two fields I would like to filter are categories and locations. I would like to filter the two fields with a checkbox for each field. Here is the example. A user selects a location which filters the categories available at that location, it also filters the Datagrid. The user then selects a category which filters the DataGrid. If the user removes the check mark, the filtered data is removed from the DataGrid. The filter also has the ability to display all items. Is it possible to use your code in the example above?
Hi Keith,
The way I accomplish that is to dispatch a custom DoFilter event each time a checkbox is checked/unchecked.
The DoFilter event triggers 2 things. First, it updates a list of active filters (unchecked check boxes). Second, it calls myDataGrid.dataProvider.refresh().
The refresh() call triggers the dataprovider’s sort() and filterFunction() functions.
You’ll need to define the filterFunction for the dataProvider such that it looks through the list of active filters and returns true/false for each item appropriately.
Jesse
I’m trying to figure out how to make a List box multi-select using check-boxes as well as the standard ctrl/shift shortcuts.
I’ve tried modifying the selectedItems collection and overriding ctrlKey during the capture stage of the mouse events. Neither seem to work right.
Any ideas?
Finally figured it out. I’ll try to post the code on http://nathanaeljones.com/ when I get a chance to fully document it.
I subclassed List (CheckList) and overrode the mouseDownHandler and mouseUpHandler functions, and changed the event.ctrlKey property when the mouse was over a checkbox (actually, I delegated the decision to the item renderer through mouseEventToItemRenderer(e); and a custom ICheckListRenderer interface.
I subclassed Checkbox (BlindCheckbox) and overrode clickHandler, leaving it blank (except for the stopImmedatePropogation command when disabled).
I added an event handler for each checkbox in the renderer (listData set function).
To get the parent list from the item renderer you use IDropInListItemRenderer and implement listData.
_parentList.addEventListener(ListEvent.CHANGE, function():void{ chkSelected.selected = _parentList.isItemSelected(me.Data); }); chkSelected.selected = _parentList.isItemSelected(me.Data);Here’s how to translate mouse coordinates arbitrarily from any UI element event to local coordinates (Used by the item renderer to determine whether the checkbox was clicked. I give the user a larger click area).
any idea how to write following code using ActionScript??
Thanks in Advance….Pratap
Hello Friends,
I have used this Multi-Selected Checkbox, but finding it difficult to write a function which does Select-All or Deselects All.
Can anyone please supply/guide me with the code.
Appreciate the help.
Regards,
Vijay
thanks for the code - I used it to create a very long list of items and had some trouble with the events. It ends up picking up scroll events too and so checkboxes end up getting random states.
I fixed it with changing your onChange fn to;
private function onChange(evt:Event):void {
data.isSelected = selected;
}
so that it used the new checkbox state rather than assuming a state change. Hopefully that wan’t a dumb thing to do (worked at least).
Nik
Hi ,
I am very new to Flex. I want to do the same thing with Checkbox but i need it to display horizontally , how can I do it?
Please help
Bharathi
I have used this Multi-Selected Checkbox, but i wants to display selected checkboxes and as well as which one is not selected checkboxes in jsp code one page to another page .
Can anyone please supply/guide me with the code.
I have used this Multi-Selected Checkbox, but i wants to display selected checkboxes and as well as which one is not selected checkboxes in jsp code one page to another page .
Can anyone please supply/guide me with the code.
* Select the checkbox for those students who are present, for absentees do not select.
Student Name
Leave Applications
pavan pavan
-
Prasad Rao-
Ramesh Shrestha
-
satish india-
star starworld-
Vikas Verma-