beta
Click here to ask Question Now
Its free No registration required. Flash, Flex, Flash
Media Server, ActionScript,Adobe Air. Most questions receive a response in an hour.
Answered
7/28/2010 4:35:53 AM
Title: Get selected item from itemrenderer checkbox
Hi,
I need to get the selected items from the itemrenderer checkbox.
I'm facing issue while searching list, which the checkbox checked randomly.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
width="400" height="300" layout="vertical">
<mx:Script>
<![CDATA[
import mx.events.CollectionEvent;
import mx.events.ListEvent;
import mx.controls.Alert;
import mx.collections.ArrayCollection;
[Bindable]
public var arrcoll:ArrayCollection = new ArrayCollection(
[ {fname:"Bob", userid:"45678"},
{fname:"John", userid:"95468"},
{fname:"Peter", userid:"12345"},
{fname:"Flex", userid:"75688"},
{fname:"Tom", userid:"66899"},
{fname:"Jerry", userid:"84322"},
{fname:"Alex", userid:"84722"},
{fname:"Rex", userid:"95875"},
{fname:"David", userid:"34566"},
{fname:"Ling", userid:"45877"},
{fname:"Steph", userid:"45688"},
{fname:"Amy", userid:"34996"},
{fname:"Jack", userid:"48635"}]);
private function onInit():void
{
keyword.setFocus();
}
public function filterResults():void
{
arrcoll.filterFunction = _sortRows;
arrcoll.refresh();
}
private function _sortRows(item:Object):Boolean
{
var col:String = "all";
var key:String = keyword.text;
key = key.toLowerCase();
if(key != "")
{
if(col != "all")
{
var value:String = item[col];
if(value == null){}
else{
// Alert.show("Value ::"+value);
value = value.toLowerCase();
if(value.indexOf(key) >= 0)
{
return true;
}
}
} else {
// Check each column for filter the keyword.
if(item.fname == null ||item.userid == null )
{
}
else
{
if (item.fname.toLowerCase().indexOf(key) >= 0)
return true;
else if (item.userid.toLowerCase().indexOf(key) >= 0)
return true;
}
}
} else {
return true;
}
return false;
}
private function checkForSelectedItems():void {
}
private function onChange(e:ListEvent):void
{
Alert.show("Selected item :: "+e.itemRenderer[ "itemlist" ].text);
}
]]>
</mx:Script>
<mx:HBox width="100%">
<mx:Label text="Search:"/>
<mx:TextInput id="keyword" width="100%" change="filterResults();" styleName="searchInput"/>
</mx:HBox>
<mx:VBox width="100%" height="100%">
<mx:List id="itemlist" dataProvider="{arrcoll}"
width="100%" height="100%" allowMultipleSelection="true" itemClick="onChange(event)"
alternatingItemColors="[#EEEEEE, white]">
<!-- checkbox to be rendered -->
<mx:itemRenderer>
<mx:Component>
<mx:Box>
<mx:CheckBox id="itemcheckbox" label="{data.fname} ({data.userid})"/>
</mx:Box>
</mx:Component>
</mx:itemRenderer>
</mx:List>
<mx:Label id="lbl" fontWeight="bold"/>
<mx:Button label="GetItem" click="checkForSelectedItems()"/>
</mx:VBox>
</mx:Application>
1
Hello,
I am not sure what you need exactly,
As per my understanding you need item when the checkbox is selected.
for the change this function like..
I am not sure what you need exactly,
As per my understanding you need item when the checkbox is selected.
for the change this function like..
private function onChange(e:ListEvent):void
{
Alert.show("Selected item :: "+e.itemRenderer.data[ "fname" ]);
}
2
Hi Veer, thanks for your reply.
I need to get all the selected items finally .
have u selected the items by searching.
I need to get all the selected items finally .
have u selected the items by searching.
3
create an array and store the item when checked in that array , finally you can get all values from that array when required.
4
use this code to get array of all selected items, I have not written the code to remove the items . You can write that in the else condition.
private var chkArray:Array=new Array();
private function onChange(e:ListEvent):void
{
Alert.show("Selected item :: "+e.itemRenderer[ "itemcheckbox" ].selected);
//if selected add item to array
if(e.itemRenderer[ "itemcheckbox" ].selected){
chkArray.push(e.itemRenderer[ "itemcheckbox" ].label)
}else{
//write code here to remove the item from array if found
}
}
5
@Justin.Thank you
@Friend .Thanks for your reply.
My Major issue is, If you select the first couple checkboxes and scroll down toward the bottom of the list, random checkboxes will be shown as checked. Is there any workaround.
@Friend .Thanks for your reply.
My Major issue is, If you select the first couple checkboxes and scroll down toward the bottom of the list, random checkboxes will be shown as checked. Is there any workaround.
6
ok, in this case when list is scrolled it re renders the rows causing the checked value to be misplaced. To fix this problem, you should declare the selected value in the dataProvider and set that the check box , now check list cannot remember the selected values until you set that value in the dataProvider on checkbox click. so here goes your code , first declare another value
//declare "isChecked" as false for every checkbox, so that initially all the checkboxes are unchecked
{fname:"Bob", userid:"45678",isChecked:false},
//Now see the checkbox tag
//I have set the checked value from "arrcoll" and also updated the value when clicked
<mx:CheckBox id="itemcheckbox" label="{data.fname} ({data.userid})" selected="{data.isChecked}" click="{data.isChecked = (data.isChecked != 'true') ? 'true' : 'false';}"/>
// now you can always get the list of checked rows from the "arrcoll" because we saved our clicks in it.
good luck
7
Accepted Answer
Hey,
Use this as your itemRenderer. as external component.
Use this as your itemRenderer. as external component.
<?xml version="1.0" encoding="utf-8"?>
<mx:Box xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
<![CDATA[
private var _bool:Boolean = false;
[Bindable] private var _selected:Boolean = false;
override public function set data(value:Object):void
{
super.data = value;
if(value)
{
_bool = true;
commitProperties();
}
}
override protected function commitProperties():void
{
super.commitProperties();
if(_bool)
{
chkBox.label = data.fname + " " +data.userid;
chkBox.selected = Boolean( data.selected );
_bool = false;
}
}
private function onChange(event:Event):void
{
data.selected = ( event.currentTarget as CheckBox ).selected;
commitProperties();
}
]]>
</mx:Script>
<mx:CheckBox id="chkBox" change="onChange(event)" />
</mx:Box>
8
@Veer. yeah, perfect solution.. This is exactly what i need.
@Friend. Thank you for your support. it works, but with random selection check-boxes issue.
@Friend. Thank you for your support. it works, but with random selection check-boxes issue.
Post your Reply