ItemRenderer by gridCell, DataGrid questions

Hi All,
I am using a DataGrid with 3 columns to display data. 1st colum is just a label - non editable text, 2nd column is where I want to set/unset an itemRenderer (in this case a comboBox), 3rd column is a label - non editable or a text editable field.
Here is my problem, I want to be able to set/unset the item rederer by cell. Meaning, right now you can only set it by column but I don't want all my rows to have the combo box renderer, i want it to be based on some data. So, let say for row 0 is set to the comboBox redenrer but for row 1 it is just set to the default label renderer. All the examples I have found you can only set the special renderer to the entire column.
Also, for column 3 i have it define as editable (user can edit/enter text in the cell) but again you can set it to the entire column, it is posible to set it by cell.
Many thanks in advance!

You can try overriding createColumnItemRenderer, but some folks find it easier to have a single renderer that will show a combobox or label based on the data.
Alex Harui
Flex SDK Developer
Adobe Systems Inc.
Blog: http://blogs.adobe.com/aharui

Similar Messages

ItemRenderer in a datagrid column setStyle() does not do anything to the appearance

I have a custom ItemRenderer in a datagrid column, however
the setStyle() does not do anything to the appearance. when it is
called. Any ideas?
<mx:DataGridColumn dataField="area" width="50"
headerText="Area">
<mx:itemRenderer>
<mx:Component>
<mx:Text>
<mx:Script>
<![CDATA[
override public function set data( value:Object ) : void {
super.data = value;
setStyle("Color",0xff0000);
if(data.area == 'G'){
setStyle("backgroundColor",0xff0000);
}else{
setStyle("backgroundColor",0xff0000);
]]>
</mx:Script>
</mx:Text>
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>

Your renderer code looks a little strange. This works, and
may get you started:

The itemRenderer CheckBox of Datagrid displays incorrect sometime.

The itemRenderer CheckBox of Datagrid displays incorrect
sometime.
A datagrid has a column:
<mx:DataGridColumn headerText="selectMe" editable="true"
dataField="_selected" itemRenderer="{new
ClassFactory(mx.controls.CheckBox)}"
rendererIsEditor="true" editorDataField="selected"/>
There are serveral records which have been get from database.
the records all are unchecked. after I checked some records , then
refresh the data from database, the checkBoxs will display
incorrect sometimes.
any suggestion?
thanks.

It occured frequently. What can I do?

Find the itemRenderer components in Datagrid

Hi,
I have defined my itemRenderer for a DataGrid with different
components like Checkbox, button etc according to the input.
I would like to access the components from the application
like dg.chkbox.
Is it possible to do that??
Thanks in advance...

Hi John,
I think u can not access directly
.but through itemRollOver event of datagrid u can access the
item renderer of particular column.
I think It will help you.
Megha

Problem with Checkbox ItemRenderer in a DataGrid

Hello Everyone,
I'm using a datagrid with two columns, which is used as a data entry grid. The first column has a simple text input field and the 2nd column has a checkbox as an itemrenderer. On creationComplete event, I'm passing an arraycollection as the dataprovider for this datagrid. The arraycollection:
<mx:ArrayCollection id="psAC">
 <mx:source>
 <mx:Array>
 <mx:Object PaText="line1" PaCheckbox="0" />
 <mx:Object PaText="line2" PaCheckbox="0" />
 <mx:Object PaText="line3" PaCheckbox="1" />
 <mx:Object PaText="line4" PaCheckbox="0" />
 <mx:Object PaText="line5" PaCheckbox="0" />
 </mx:Array>
 </mx:source>
 </mx:ArrayCollection>
There is a datagrid (dGa) in the main application. On click of this, a pop up window comes up which has the same datagrid layout(i.e, 2 columns). And this is where the data is entered. Here, if the user checks the check box, I have assigned a value of '1' for the 2nd column of the arraycollection. THis code(below) works fine.
<datagrid in pop up window>
<mx:DataGridColumn headerText="Best Possible Action?" textAlign="center" width="200" editable="false">
 <mx:itemRenderer>
 <mx:Component>
 <mx:CheckBox>
 <mx:Script>
 <![CDATA[
 override public function set data(value:Object):void{
 if(value.PaCheckbox == 1){
 this.selected = true;
 }else{
 this.selected = false;
 ]]>
 </mx:Script>
 
 </mx:CheckBox>
 </mx:Component>
 </mx:itemRenderer>
 </mx:DataGridColumn>
But I would also need to set the PaCheckbox value to 0 or 1, based on teh check condition of the check box. I tried using change event (commented in the code above). But there I get an error: Cannot access a property or method of a null object reference. I checekd in debug mode, there the data object is null! Can you please help me on how to pass back the values(0 o 1) to my arraycollection, based on the checkbox's status?
Cheers,
Deepak

heyo,
I solved it.....
i was missing this line of code super.data = value; in the ovverriden function...Once we have this line, the data object will have teh field names and their values in it, which can be accessed on the change event...

Setting a DataProvider to a custom itemRenderer in a DataGrid

Hi,
I've got a DataGrid, with one column using a custom AS itemRenderer to display a ComboBox. Everything works, but there are various "wierd" behaviors occuring (when I remove a row, the ComboBox of the next row in line resets to it's label, but none of the others do... When I add a row, various apparently random comboboxes change their selectedItem, etc...)
Anyways, I had some luck isolating each of these individual bugs and squashing them, but each time I do, others seem to pop up. I suspect the main issue is the way I'm setting the ComboBox's dataProvider. The dataProvider is dynamic - an XML file generated from a MySQL table using PHP. Knowing no other way to do so, I'm overriding the set data method and explicitly setting it there, like so:
override public function set data(value:Object):void{
super.data = value;
dataProvider = value.uom; // value.uom is the XML
Is there a better way to set the data provider - an approach where I can set it once and therefor avoid the override entirely? Again, the itemRenderer is an ActionScript class, and not implemented with XML...
<mx:DataGridColumn itemRenderer="renderers.UOMBox" dataField="uom" headerText="UOM" />
and...
package renderers{
public class UOMBox extends ComboBox{
 ... etc ...
Thanks in advance.

How does this code work for you:
override public function set data(value:Object):void{
if(value != null) {
 super.data = value;
 dataProvider = value.uom; // value.uom is the XML
super.invalidateDisplayList();
The missing invalidateDisplayList in your code might be what will help with your problems.
Chris

How To Update Custom ItemRenderer (Image) on DataGrid Edit

I have an DataGrid with 2 columns, column 1 called "Name" and column 2 called "Actions".
The "Name" column contains editable text and the "Actions" column uses a (inline) custom ItemRenderer which displays 2 icon images ( for Edit and Delete). All works fine. Clicking Edit or Delete calls the corrosponding outerDocument method.
The feature I am trying to add is as follows: when someone double-clicks on the text in the Name column to edit it, I would like the edit icon in the Actions column to ( grow/shrink, change color - or some such indication/reminder to click it ). Not seeing how to do this with the inline ItemRenderer, I created a custom item renderer class and, in that class, use mx:Resize to perform the "grow/shrink". I created a method called "pulse()" and, from within that renderer, all works well. ( for testing, I wired the icons click event to the pulse() method ). However, now I am not sure how to call that ItemRenderers "pulse()" method to perform the effect from the main DataGrid (when the user double-clicks on Name field to edit).
The tried using the DataGrid's "itemEditBegin", which fires correctly, but from that point I am not sure how to access the selected rows edit icon in the "Action" column. ( to call its pulse() ) method.
So any suggestions how I can achieve my end result? Being able to manipulate the edit icon in the "Actions" column, when the user double-clicks (edits) that row's "Name" column?
If I'm going about it all wrong, feel free to offer alternative solutions.
Any help would be appreciated.
Thanks,
~e

Hi,
Check the BAPI_MATERIAL_SAVEDATA ,in the BAPI is there a table parameter EXTENSIONIN ?
which you can use to pass the values for user defined fields to the BAPI..
Regards
Kiran Sure

DropDownList ItemRenderer within Flex Datagrid Not Refreshing

I have a datagrid which contains a Spark dropdownlist that needs to obtain dynamic data.
The datagrid uses a separate dataProvider.
When I use a static ArrayCollection within my ItemRenderer, it works (please see listing 1).
However, when I use Swiz to mediate a 'list complete' event to load the ArrayCollection, the dropdownlist does not show the new data (please see listing 2).
Using the debugger, I inspected the dropdownlist ItemRenderer and have confirmed the new data is being loaded into the ArrayCollection.
The new data is not shown in the UI control. I have tried invalidateProperties() + validateNow() and dispatching events on both the control and the renderer (this), but nothing seems to make the new data appear in the control on the datagrid.
Please help !!!
Listing 1: Datagrid and static ArrayCollection (this works)
<mx:DataGrid x="10" y="25" width="98%" id="dgInventory" paddingLeft="25" paddingRight="25" paddingTop="25" paddingBottom="25"
 editable="true"
 itemClick="dgInventory_itemClickHandler(event)" dataProvider="{acInventory}"
 creationComplete="dgInventory_creationCompleteHandler(event)"
 height="580">
 <mx:columns>
 <mx:DataGridColumn headerText="Item" dataField="itemName" itemRenderer="components.ItemRendererItem"
 rendererIsEditor="true" editorDataField="selection" editable="true"/>
 <mx:DataGridColumn headerText="Quantity Required" dataField="quantityReq" itemRenderer="components.ItemRendererQuantityRequired"
 rendererIsEditor="true" editorDataField="selection" editable="true"/>
 </mx:columns>
</mx:DataGrid>
<fx:Script>
 <![CDATA[
 import mx.collections.ArrayCollection;
 import spark.events.IndexChangeEvent;
 public var selection:int;
 [Bindable]
 protected var acItem:ArrayCollection = new ArrayCollection(
 [ { itemName: "Item1"},
 { itemName: "Item2"},
 { itemName: "Item3"},
 protected function dropdownlist1_changeHandler(e:IndexChangeEvent):void
 selection = e.newIndex;
 ]]>
</fx:Script>
<s:DropDownList id="ddlItem" prompt="Select Item" dataProvider="{acItem}" labelField="itemName"
 selectedIndex="{int(dataGridListData.label)}"
 change="dropdownlist1_changeHandler(event)"
 width="80%" top="5" bottom="5" left="5" right="5"/>
Listing 2: Dynamic ArrayCollection (does not work):
<?xml version="1.0" encoding="utf-8"?>
<s:MXDataGridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
 xmlns:s="library://ns.adobe.com/flex/spark"
 xmlns:mx="library://ns.adobe.com/flex/mx"
 focusEnabled="true">
 <fx:Script>
 <![CDATA[
 import event.ItemEvent;
 import mx.collections.ArrayCollection;
 import mx.events.FlexEvent;
 import spark.events.IndexChangeEvent;
 public var selection:int;
 [Bindable]
 protected var acItem:ArrayCollection = new ArrayCollection();
 protected function dropdownlist1_changeHandler(e:IndexChangeEvent):void
 selection = e.newIndex;
 protected function ddlItem_creationCompleteHandler(event:FlexEvent):void
 var eve : ItemEvent = new ItemEvent( ItemEvent.LIST_ITEM_REQUESTED );
 dispatchEvent( eve );
 [Mediate( event="ItemEvent.LIST_ITEM_COMPLETE", properties="acItem" )]
 public function refreshness( _acItem : ArrayCollection ):void
 acItem.removeAll();
 var len:int = _acItem.length;
 if (len > 0)
 for (var i:int=0; i < len; i++)
 var newItem:Object = new Object;
 newItem["itemName"] = _acItem[i].itemName;
 acItem.addItem(newItem);
 this.invalidateProperties();
 this.validateNow();
 //dispatchEvent(new FlexEvent(FlexEvent.DATA_CHANGE));
 ]]>
 </fx:Script>
 <s:DropDownList id="ddlItem" prompt="Select Item" dataProvider="{acItem}" labelField="itemName"
 selectedIndex="{int(dataGridListData.label)}"
 creationComplete="ddlItem_creationCompleteHandler(event)"
 change="dropdownlist1_changeHandler(event)"
 width="80%" top="5" bottom="5" left="5" right="5"/>
</s:MXDataGridItemRenderer>

After re-reading Peter Ent's ItemRenderer series, this turned out to be quite simple.
I extended DataGrid to have the ArrayCollection property I needed, then added this to my renderer:
[Bindable]
 protected var acItem:ArrayCollection = new ArrayCollection();
 override public function set data( value:Object ) : void
 super.data = value;
 acItem = (listData.owner as MyDataGrid).itemList; // get the data from the renderer's container (by extending it to add a property, if necessary)

ItemRenderer overides the DataGrid styles

Hi,
I have a CSS file where I have defined the styles for DataGrid like following:
DataGrid
 selection-color: #243E4F;
 text-selected-color: #FFFFFF;
 alternating-item-colors: #DCE3E8, #FFFFFF;
I have a Datagrid in my mxml component page. I use an ItemRenderer for the html text in one of my datagrid column.
<mx:DataGridColumn dataField="AccountName" headerText="Name" width="122">
 <mx:itemRenderer>
 <mx:Component>
 <mx:Text selectable="true" htmlText="{data.AccountName}" width="100%"/>
 </mx:Component>
 </mx:itemRenderer>
</mx:DataGridColumn>
But now when I select any of the DataGridColumn 'AccountName', the font color (ie. text-selected-color ) in this cell turns black.
Please help me to resolve this issue?
Thanks in advance,
Micheal

Hi,
Thank you for your quick response.
My DataGrid is inside a HBox.
//my component mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" >
 <mx:Script>
 <![CDATA[
 import mx.controls.Alert;
 import mx.collections.ArrayCollection;
 [Bindable]
 public var cashData:ArrayCollection = new ArrayCollection();
 private function formatBalance(item:Object, column:DataGridColumn):String
 return item.Balance.currencyCode+''+item.Balance.amount;
 ]]>
 </mx:Script>
 
 <mx:DataGrid width="100%" height="100%" id="gridID" dataProvider="{cashData}" showHeaders="false" verticalGridLines="true">
 <mx:columns>
 <mx:DataGridColumn dataField="AccountName" headerText="Name" width="122">
 <mx:itemRenderer>
 <mx:Component>
 <mx:Text selectable="true" htmlText="{data.AccountName}" width="100%"/>
 </mx:Component>
 </mx:itemRenderer>
 </mx:DataGridColumn>
 <mx:DataGridColumn dataField="Balance" headerText="Balance" labelFunction="formatBalance" width="122" textAlign="right"/>
 </mx:columns>
 </mx:DataGrid>
</mx:VBox>
Actually I set the dataprovider from PureMVC mediator. You can see that column 'AccountName' is an 'htmltext'. This value will be a link not a editable text.
ie. <a href= "someurl.do?x=20106650&y=10232371">details</a> Intranet Card
Thanks,
Michael

Problem with Datagrid itemrenderer with a Datagrid

Hi all,
I have this kind of a structure. I try to use a datagrid item renderer in a data grid column. However when I try to move rows inside the same datagrid I experience a problem. When my datagrid loads first it seems correct, but when I drag and drop a row in the same datagrid inner datagrids start to be drew in wrong rows. I checked the DB but there are no mistakes in DB records. Problem is with rendering. I suppose inner datagrids trying to draw to early or datagrid component is trying to reuse the itemrenderer. I could not find any solutions for that. Any help will be greatly appreciated..
<mx:DataGridColumn width="130" editable="false"
 headerText="{resourceManager.getString('resources', 'acl.content')}">
 <mx:itemRenderer>
 <mx:Component>
 <ACLInnerDataGrid rowCount="3" dragEnabled="true" dropEnabled="false"
 x="0" y="0" editable="true" dragInitiatorId="catGrid"
 filterGroupName="content" remoteDestination="zend"
 remoteSource="ACLFilterParamService" showHeaders="false"
 creationComplete="this.init();">
 <columns>
 <mx:DataGridColumn dataField="id" editable="false" visible="false"/>
 <mx:DataGridColumn dataField="ruleId" editable="false" visible="false"/>
 <mx:DataGridColumn dataField="filterKey" editable="false" visible="false"/>
 <mx:DataGridColumn dataField="param" editable="false" visible="false"/>
 <mx:DataGridColumn dataField="name" editable="true"/>
 </columns>
 </ACLInnerDataGrid>
 </mx:Component>
 </mx:itemRenderer>
</mx:DataGridColumn>
Thanks in advance.

I have attached the item renderer component source code.

How to bind an itemRenderer to a datagrid

I have a datagrid that uses an itemRenderer. The itemRenderer contains a checkbox. I want the selected checkbox in the datagrid to stay in the correct row when the datagrid is sorted, but when I sort a column the checkbox moves to the wrong row. How do I bind the checkBox to the datagrid? I tried playing around with the following 2 lines of code in the itemRenderer, but without success:
//super.data = value;
//dispatchEvent(new FlexEvent(FlexEvent.DATA_CHANGE));
Thanks for looking.
Here is my main file:
<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
 <mx:Script>
 <![CDATA[
 import mx.collections.ArrayCollection;
 [Bindable]
 private var initDG:ArrayCollection = new ArrayCollection([
 {Artist:'aaa', Album:'1', Price:3},
 {Artist:'ccc', Album:'2', Price:2},
 {Artist:'bbb', Album:'3', Price:1},
 {Artist:'ddd', Album:'2', Price:4}
 ]]>
 </mx:Script>
 <mx:DataGrid id="myGrid" dataProvider="{initDG}" >
 <mx:columns>
 <mx:DataGridColumn dataField="Artist"/>
 <mx:DataGridColumn dataField="Album"/>
 <mx:DataGridColumn dataField="Price"/>
 <mx:DataGridColumn itemRenderer="RendererDGImage"/>
 </mx:columns>
 </mx:DataGrid>
</mx:Application>
Here is my itemRenderer:RendererDGImage.mxml
<?xml version="1.0"?>
<mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml" horizontalAlign="center">
 <mx:Script>
 <![CDATA[
 import mx.events.FlexEvent;
 private var myVal:Boolean=false;
 public function checkSelected():void {
 myVal= ! myVal
 override public function set data(value:Object):void {
 //super.data = value;
 if (myVal){
 trace("true")
 myCheckBox.selected=true;
 } else {
 trace("false")
 myCheckBox.selected=false;
 // Dispatch the dataChange event.
 //dispatchEvent(new FlexEvent(FlexEvent.DATA_CHANGE));
 ]]>
 </mx:Script>
 <mx:CheckBox id="myCheckBox" enabled="true" click="checkSelected();"/>
</mx:HBox>

I would create an object let's say.. Album.. that has four properties.. and create instances of this object based on the length of the arrayCollection..
and..
[Bindable]
public var album:Album;
public function checkSelected():void {
 album.Buy = myCheckBox.selected.
change this too..
<mx:CheckBox id="myCheckBox" enabled="album.Buy" click="checkSelected();"/>
and finally..
override public function set data(value:Object):void {
 album = (value as Album);
hope this helps,
BaBo,

Datagrid questions

I have a datagrid whereI would like to select multiple rows
and then copy the rows into another object, manipulate them and the
shove them into antother data grid. The business process is to take
a shipment with a single start and end point (a single leg, or
route, if you will) and then introduce a hub into the route, thus
breaking a single-route into a two-leg-route, a two-leg-route into
a three-leg-route, and so on...
I found a method listed as:
copySelectedItems(useDataField:Boolean = true):Array which the help
says "Makes a copy of the selected items in the order they were
selected.", and it belongs to a ListBase which is a parent class.
Now, correct me if I'm wrong, but in Java I wouldn't have a problem
accessing a protected member of a parent class. That doesn't seem
to work in this case. I have tried to use the method like this:
private function setSelection(event:Event):void {
var list:Array =
event.currentTarget.copySelecteditems(true);
var list2:Array = list;
The exception is this:
ReferenceError: Error #1069: Property copySelecteditems not
found on mx.controls.DataGrid and there is no default value.
at
Pooling/setSelection()[F:\Eclipse6Workspaces\Services\Pooling\src\Pooling.mxml:27]
at
Pooling/__shipGrid_itemClick()[F:\Eclipse6Workspaces\Services\Pooling\src\Pooling.mxml:49 ]
at flash.events::EventDispatcher/dispatchEventFunction()
at flash.events::EventDispatcher/dispatchEvent()
at
mx.core::UIComponent/dispatchEvent()[E:\dev\flex_3_beta2\sdk\frameworks\projects\framewor k\src\mx\core\UIComponent.as:8915]
at
mx.controls.listClasses::ListBase/mouseClickHandler()[E:\dev\flex_3_beta2\sdk\frameworks\ projects\framework\src\mx\controls\listClasses\ListBase.as:8661]
I'm not sure what is the root of this issue, or if it's just
a matter of me not understanding actionScript. I can make the
process work by iterating through the selected items, and that's
not too bad, but it would be great if I could make the shortcut
method work.
I appreciate everyone's help, thanks...

Okay, I'll answer my own question. The selectedItems property
of the dataGrid returns an array.
var list:Array = event.currentTarget.selectedItems;
...does exactly what I need.
I don't feel too smart after this one!
Cheers,

ItemRenderer Issue with DataGrid and Label

<mx:DataGrid width="100%" height="100%" rowCount="5" dataProvider="{publish_status}">
 <mx:columns>
 <mx:DataGridColumn dataField="status" headerText="Status">
 <mx:itemRenderer>
 <fx:Component>
 <mx:Label text="{data.status}" fontSize="12">
 <fx:Script>
 <![CDATA[
 override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void {
 super.updateDisplayList(unscaledWidth, unscaledHeight);
 if(this.text == "A"){
 setStyle("color", "blue");
 else if(this.text == "B"){
 setStyle("color", "green");
 else if(this.text == "C"){
 setStyle("color", "red");
 else{
 setStyle("color","white");
 ]]>
 </fx:Script>
 </mx:Label>
 </fx:Component>
 </mx:itemRenderer>
 </mx:DataGridColumn>
 </mx:columns>
</mx:DataGrid>
I created an inline ItemRenderer as above. I understand that it gets recycled and have included the last "else" statement to return color to default if all tests fail. The problem is that the text is still showing up in the wrong colors. I have done a lot of reading on the forums but I can't figure out what I'm missing.
Thanks.
Btw, I am using Flash Builder 4.

Hi ,
Try changing the color in set data function override method instead of updateDisplayList override.
override public function set data(value:Object):void
 if(this.text == A){
 setStyle(color, blue);
 else if(this.text == B){
 setStyle(color, green);
 else if(this.text == C){
 setStyle(color, red);
 else{
 setStyle(color,white);
Thanks,
Bhasker

Access inline RadioButton within itemRenderer in a DataGrid

I have a RadioButton column in a DataGrid. I added the RadioButtons in this way:
<mx:DataGrid id="dg" x="0" y="25" width="510" height="260" selectedIndex="0" dataProvider="{department.prof}" showHeaders="false" itemClick="handleClick(event);" >
 <mx:columns>
 <mx:DataGridColumn headerText="Selection" dataField="selection" width="75" >
 <mx:itemRenderer>
 <mx:Component>
 <mx:VBox>
 <mx:RadioButton id="rb" />
 </mx:VBox>
 </mx:Component >
 </mx:itemRenderer>
 </mx:DataGridColumn>
 //Other <mx:DataGridColumn> go here. Their inline components' contents are provided with the dataProvider="{department.prof}"
 </mx:columns>
</mx:DataGrid>
I want the RadioButton in the clicked row is selected and others are unselected using the handleClick(event) function:
private function handleClick(event:ListEvent):void {
 var s:Object = event.itemRenderer.data['name']; // dataProvider is a mx:Model in XML form and there is a <name> sub element under <prof>
 Alert.show(event.rowIndex + " clicked "+s['last']); // I can access the String content in <last>
 // How do I access all the RadioButton in the DataGrid? I do not have a key
 // (event.itemRenderer.data['Selection'] as RadioButton).selected = true; this is NOT working as 'Selection' is just a Column title, not a key.
 // the RadioButton id 'rb' is also NOT working: rb[event.rowIndex].selected = true;
<?xml version="1.0"?>
<department>
<prof>
 <name>
 <first>Mike</first>
 <last>Smith</last>
 </name>
 </prof>
</department>
I also tried a RadioButtonGroup for all the RadioButton's in different rows, but it does not work.
Thanks for any suggestions...

For these kinds of things, I separate the code out more. You could create another object where you create all your radio buttons as the DataGrid needs them. Add a method to the Object that allows you to retrieve the correct radio button from the List and then set it as selected or not selected based on what row you have identified that should change.
I do this with DataGroups a lot. For instance, if I have a scroller where I have a bunch of items that have custom renderers, I build all custom items individually in AS (or MXML and AS), store them in ArrayLists and then I tell the object that created them to update them whenever I need to. This will cause for some more coding, but it solves the problem and once you've done it once, you should be able to reuse.
Here is an example of an item renderer where I do what you are trying to do:
<?xml version="1.0" encoding="utf-8"?>
<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
 xmlns:s="library://ns.adobe.com/flex/spark"
 xmlns:mx="library://ns.adobe.com/flex/mx"
 autoDrawBackground="true">
 <fx:Script>
 <![CDATA[
 private var isChecked:Boolean = false;
 private var imageHeight:uint = 75;
 private var imageWidth:uint = 100;
 private var videoID:String;
 private var cbLabel:String;
 public function getIsChecked():Boolean {
 return isChecked;
 * You can use this if need to from outside. This
 * object also checks and unchecks itself.
 public function setIsChecked(isChecked:Boolean):void {
 this.isChecked = isChecked;
 fcvCheckBox.selected = isChecked;
 public function setVidImage(vidImage:Image):void {
 vidImage.height = getImageHeight();
 vidImage.width = getImageWidth();
 public function getImageHeight():uint {
 return imageHeight;
 public function getImageWidth():uint {
 return imageWidth;
 public function setVideoID(videoID:String):void {
 this.videoID = videoID;
 public function getVideoID():String {
 return videoID;
 public function setCBLabel(cbLabel:String):void {
 this.cbLabel = cbLabel;
 fcvCheckBox.label = cbLabel;
 public function getCBLabel():String {
 return cbLabel;
 public function setVidTitle(vidTitle:String):void {
 fcvVidTitle.text = vidTitle;
 fcvVidTitle.toolTip = vidTitle;
 public function setVidDescription(vidDescript:String):void {
 fcvVidDescript.text = vidDescript;
 fcvVidDescript.toolTip = vidDescript;
 private function updateChecked():void {
 this.isChecked = fcvCheckBox.selected;
 ]]>
 </fx:Script>
 <s:HGroup>
 <mx:Image id="fcvVidImage"
 height="{getImageHeight()}"
 width="{getImageWidth()}"/>
 <s:Label id="fcvVidTitle"
 text=""
 width = "80"/>
 <s:TextArea id="fcvVidDescript"
 editable="false"
 width="80"
 height="{getImageHeight()}"
 />
 <s:CheckBox id="fcvCheckBox"
 label="{getCBLabel()}"
 click="{updateChecked()}"/>
 </s:HGroup>
</s:ItemRenderer>
Here is me adding the renderer to a Scroller:
 public function setPanelData(panelData:ArrayList,
 checkBoxLabel:String
 ):FeedConfigVideoScroller{
 videoScroller = new FeedConfigVideoScroller();
 for(var i:uint = 0; i < panelData.length; i++) {
 var o:Object = panelData.getItemAt(i);
 var videoID:String = String(o.videoId);
 var videoTitle:String = String (o.videoTitle);
 var videoDescript:String = String(o.descript);
 var posterURL:String = String(o.posterURL);
 var fcvLayout:FeedConfigVidLayout = new FeedConfigVidLayout();
 fcvLayout.setVideoID(videoID);
 var image:Image = new Image();
 image.source = posterURL;
 fcvLayout.setVidImage(image);
 fcvLayout.setCBLabel(checkBoxLabel);
 fcvLayout.setIsChecked(false);
 fcvLayout.setVidTitle(videoTitle);
 fcvLayout.setVidDescription(videoDescript);
 videoScroller.addFCVLayoutComp(fcvLayout);
 return videoScroller;
Now, because I've used OO and I've added all renderers to an ArrayList, I can get down to the individual components any time I like and do anything to them that I want.

Simple dataProvider for dataGrid question

I have a question about accessing some values from an
xmllist. I have a piece of xml that is returned from an httpservice
that looks similar to this.
<topnode>
<list>
<item>value</item>
<item>value2</item>
<item>value3</item>
</list>
</topnode>
I'm interested in creating a datagrid to display the values
of each list.item, so: value, value2, value3. I'm not sure what my
data provider should look like in this case since there are no
nodes underneath the repeating node.
I can create an xml list like:
myList = event.result.list.item
but this gives me an xmllist with values of [0].item.value,
[1].item.value etc. I'm just unsure how to setup my datagrid to
extract values from the item node.
I think if my xml looked like the following I could access it
like:
(in my httpservice result handler)
myList = event.result as XML
(the datagrid provider would look like)
dataProvider={myList.item}
(and the column would have an entry like this)
dataField="name"
<topnode>
<list>
<item>
<name>bob</name>
</item>
<item>
<name>stan</name>
</item>
<item>
<name>bill</name>
</item>
</list>
</topnode>
But in my case, the value I'm extracting is the value set at
the top level node that repeats. Maybe I'm missing something
obvious here.
Any thoughts?

Thanks again for responding. I've tried that, but when I do
all the values show up in the first row of the datagrid. Which
looks like this:
<item>value</item>
<item>value2</item>
<item>value3</item>
Perhaps I'm making an incorrect assumption below:
[Bindable]
public var myList:XMLList;
myList = event.result.list;
<mx:DataGrid dataProvider="{myList}" width="100%">
<mx:columns>
<mx:DataGridColumn headerText="Names"
dataField="item"/>
</mx:columns>
</mx:DataGrid>
xml from server:
<topnode>
<list>
<item>value</item>
<item>value2</item>
<item>value3</item>
</list>
</topnode>

ItemRenderer by gridCell, DataGrid questions

Similar Messages

Maybe you are looking for