Fire itemrenderer in datagrid

Hi All,
I am adding a row in my datagrid dynamically using an external button but couple columns contain a combo box as itemrenderer.
The first item (index 0) in my comboBox have option "---select---".
How can I set this first index for both comboBox item renderers after I add the new row?
Thanks

Hello RootSounds,
Good to hear from you again. Well yes, your understanding is correct.
How do i do that?
Bo

Similar Messages

Using a custom itemrenderer in datagrid to update value in the same row but different column/cell

Here's what I have so far. I have one datagrid (dg1) with enable drag and another datagrid (dg2) with dropenabled. Column3 (col3) of dg2 also has a custom intemrenderer that's just a hslider.
When an item from dg1 is dropped on dg2, a custom popup appears that asks you to use the slider in the popup to set a stress level. Click ok and dg2 is populated with dg1's item as well as the value you selected from the popup window. I was also setting a sliderTemp variable that was bound to the itemrender slider to set it but that's obviously causing issues as well where all the itemrenderer sliders will change to the latest value and I don't want that.
What is needed from this setup is when you click ok from the popup window, the value you choose from the slider goes into dg2 (that's working) AND the intemrenderer slider needs to be set to that value as well. Then, if you used the intemrenderer slider you can change the numeric value in the adjacent column (col2).   I just dont know how to hook up the itemrenderer slider to correspond with that numeric value (thatds be in col2 on that row);
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" minWidth="955" minHeight="600"
                    xmlns:viewStackEffects="org.efflex.mx.viewStackEffects.*" backgroundColor="#FFFFFF" creationComplete="init(event)"
                    xmlns:components="components.*" xmlns:local="*">
     <mx:Script>
          <![CDATA[
               import mx.binding.utils.ChangeWatcher;
               import mx.collections.ArrayCollection;
               import mx.controls.Alert;
               import mx.controls.TextInput;
               import mx.core.DragSource;
               import mx.core.IUIComponent;
               import mx.events.CloseEvent;
               import mx.events.DataGridEvent;
               import mx.events.DragEvent;
               import mx.events.FlexEvent;
               import mx.events.ListEvent;
               import mx.events.SliderEvent;
               import mx.events.SliderEventClickTarget;
               import mx.managers.DragManager;
               import mx.managers.PopUpManager;
               import mx.utils.ObjectUtil;
               [Bindable]private var myDP1:ArrayCollection;
               [Bindable]private var myDP2:ArrayCollection;
               [Bindable]public var temp:String;
               [Bindable]public var slideTemp:Number;
               private var win:Dialog;
               protected function init(event:FlexEvent):void{
                    myDP1 = new ArrayCollection([{col1:'Separation from friends and family due to deployment'},{col1:'Combat'},{col1:'Divorce'},{col1:'Marriage'},
                         {col1:'Loss of job'},{col1:'Death of a comrade'},{col1:'Retirement'},{col1:'Pregnancey'},
                         {col1:'Becoming a parent'},{col1:'Injury from an attack'},{col1:'Death of a loved one'},{col1:'Marital separation'},
                         {col1:'Unwanted sexual experience'},{col1:'Other personal injury or illness'}])
                    myDP2 = new ArrayCollection()
               protected function button1_clickHandler(event:MouseEvent):void
                    event.preventDefault();
                    if(txt.text != "")
                         Alert.yesLabel = "ok";
                         Alert.show("", "Enter Stress Level", 3, this,txtClickHandler);
               private function image_dragEnter(evt:DragEvent):void {
                    var obj:IUIComponent = IUIComponent(evt.currentTarget);
                    DragManager.acceptDragDrop(obj);
               private function image_dragDrop(evt:DragEvent):void {
                    var item:Object = dg2.selectedItem;
                    var idx:int = myDP2.getItemIndex(item);
                    myDP2.removeItemAt(idx);
               protected function dg1_changeHandler(event:ListEvent):void
                    temp=event.itemRenderer.data.col1;
               protected function dg2_dragDropHandler(event:DragEvent):void
                    event.preventDefault();
                    dg2.hideDropFeedback(event as DragEvent)
                    var win:Dialog = PopUpManager.createPopUp(this, Dialog, true) as Dialog;
                    win.btn.addEventListener(MouseEvent.CLICK, addIt);
                    PopUpManager.centerPopUp(win);
                    win.mySlide.addEventListener(Event.CHANGE, slideIt);
               private function txtClickHandler(event:CloseEvent):void {
                    trace("alert");
                    if (event.detail==Alert.YES){
                         myDP2.addItem({label:temp});
               private function addIt(event:MouseEvent):void{
                    myDP2.addItem({col1:temp, col2:slideTemp})
               private function slideIt(event:SliderEvent):void{
                    slideTemp = event.target.value;
          ]]>
     </mx:Script>
               <mx:Panel x="10" y="10" width="906" height="481" layout="absolute">
                    <mx:Image x="812" y="367" source="assets/woofie.png" width="64" height="64" dragDrop="image_dragDrop(event);" dragEnter="image_dragEnter(event);"/>
                    <mx:DataGrid x="14" y="81" width="307" height="251" dragEnabled="true" id="dg1" dataProvider="{myDP1}" wordWrap="true" variableRowHeight="true" change="dg1_changeHandler(event)">
                         <mx:columns>
                              <mx:DataGridColumn headerText="Examples of Life Events" dataField="col1"/>
                         </mx:columns>
                    </mx:DataGrid>
                    <mx:DataGrid x="329" y="81" height="351" width="475" dragEnabled="true" dropEnabled="true" id="dg2"
                                    wordWrap="true" variableRowHeight="true" dataProvider="{myDP2}" editable="true"
                                    dragDrop="dg2_dragDropHandler(event)" rowHeight="50" verticalGridLines="false" horizontalGridLines="true" >
                         <mx:columns>
                              <mx:DataGridColumn headerText="Stressor" dataField="col1" width="300" wordWrap="true" editable="false">
                              </mx:DataGridColumn>
                              <mx:DataGridColumn headerText="Stress Level" dataField="col2" width="82" editable="false"/>
                              <mx:DataGridColumn headerText="Indicator" dataField="col3" width="175" paddingLeft="0" paddingRight="0" wordWrap="true" editable="false">
                                   <mx:itemRenderer>
                                        <mx:Component>
                                             <components:Compslide/>
                                        </mx:Component>
                                   </mx:itemRenderer>
                              </mx:DataGridColumn>
                         </mx:columns>
                    </mx:DataGrid>
                    <mx:Text x="14" y="10" text="The first category of underlying stressors is called Life Events. The list includes both positive and negative changes that individuals experience. Both can be stressful. For example, becoming a parent is usually viewed as a positive thing, but it also involves many new responsibilities that can cause stress. " width="581" height="73" fontSize="12"/>
                    <mx:TextInput x="10" y="380" width="311" id="txt"/>
                    <mx:Text x="10" y="335" text="Add events to your list that are not represented in the example list. Type and click "Add to List"
" width="311" height="51" fontSize="12"/>
                    <mx:Button x="234" y="410" label="Add to List" click="button1_clickHandler(event)"/>
               </mx:Panel>
</mx:Application>

how do i go about doing that? do i put a change event function in the itemrenderer? and how would i eventually reference data.col2?

Dynamic setting of itemRenderer in datagrid

Can we dynamically set the itemrenderer in a datagrid
depending upon some value in data?

HI,
how about to display different controls in a rows for that column? Can it be done?
Thanks,,
-jenue

ItemRenderer and DataGrid Problem

Hi guys.
I'm on creating a small app that simply pulls information
from an XML file, displays it in a DataGrid then allows the user to
filter and search it. First things first though; I'll explain what
I have so far then detail my problem.
I get the XML file via HTTPService then place the results in
a Bindable ArrayCollection. When the Datagrid's source is set to
that ArrayCollection it works fine. What I am initially trying to
do is use an itemRenderer in one of the columns that displays lines
of text depending on the values of the current row.
For example, the structure of my XML file is (roughly):
<content>
<name>Name1</name>
<description>Description Goes Here</description>
<audience1>yes</audience1>
<audience2>no</audience2>
<audience3>yes</audience3>
</content>
So what I am trying to do is group the audiences that each
piece of "content" has a yes value to. So under the "Audiences"
column in the datagrid, the above content would say
"Audience1
Audience3"
as it has a yes value in between audience 1 and 3. I've tried
writing very basic code within the itemRenderer whereby I override
the public function set data and do some checks there but it never
seems to work right. I've tried using Arrays within that to store
the current audiences but I clearly haven't got the right format
for that.
There must be a more efficient way of doing this. I'm fairly
new to both Flex and AS3 (been using AS2 quite a while now) but I
have a feeling there would be some way to store each row's audience
list in an array/object/model so I can refer to it later (I'm
intending to filter these results by audience type later so I think
I will HAVE to do it this way eventually). I've read quite a few
tutorials and guides but I honestly don't know where to look
anymore, none of them seem to cover this specific problem.
I hope this makes sense to you guys and any guidance you
could give me would be greatly appreciated.
Cheers

LabelFunction produces a display-only column.
To filter, you will need to use the underlying data.
Another solution to consider is to create a custom item
class. Loop over the xmllist and build instances of the class,
populating the properties from the xml.
have a property who's value is calculated based on the
audience properties values. Since it is a "real" data property in
each item, you can filter on it directly.
Tracy

Itemrenderer in datagrid

i've the following datagrid code:
<mx:DataGrid id="empdg"
dataProvider="{employeeService.lastResult.employees.employee}"
width="40%" editable="true"
itemClick="addRow(event)">
<mx:columns>
<mx:DataGridColumn headerText="Reportees" editable="false" itemRenderer="components.empname" width="40"/>
</mx:columns>
</mx:DataGrid>
the components.empname code is follows:
<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"
autoDrawBackground="true">
<mx:HBox>
<mx:Image source="http://abc.com/add.png"/>
</mx:HBox>
</s:MXDataGridItemRenderer>
addrow method (in the datagrid) adds a new row when clicked on the column. i would like to change the image source in the above code dynamically to point to "delete.png" with the first column in the first row still pointing to add.png but first column in the second row pointing to delete.png (and so on). As of now when ever new row gets added, it comes with add.png in the first column of the new row...i want to replace this with delete.png.
something like this:
+
Can somebody help?
Thank you
Bo

Hello RootSounds,
Good to hear from you again. Well yes, your understanding is correct.
How do i do that?
Bo

ItemRenderer for DataGrid

Here's a nice problem
Please test the code below.
As you will see, it works fine! The scores (7) are presented neatly. That's because in the itemRenderer for column 2, I bind the text property to
data.item2.score.
BUT
In my application, I DON'T KNOW WHAT THIS PROPERTY WILL BE because the dataProvider is generated dynamically. The names of the properties are generated dynamically using a prefix ("item") and a suffix which is an id from the database. So the dataProvider could hold the props 'item325' and 'item23' and so on...
What I want to do is to store the name of the property in the labelField of the column (as I did in the example). The itemRenderer should now get its data using that labelField.
In my ItemRenderer which says now 'text="{data.item2.score}"' should be 'text="{data[referenceToLabelField].score}"'
Any Ideas?
thx;
d
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init()">
    <mx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
            [Bindable]
            private var dp:ArrayCollection = new ArrayCollection();
            private function init():void
                var a:Array = new Array();
                for (var i:int = 0; i < 10; i++)
                    a.push({pupil: "Pupil " + i, item2: {score: 7}});
                dp.source = a;
        ]]>
    </mx:Script>
    <mx:DataGrid dataProvider="{dp}">
        <mx:columns>
            <mx:DataGridColumn headerText="Column 1" dataField="pupil" width="200"/>
            <mx:DataGridColumn headerText="Column 2" dataField="item2" width="200">
                <mx:itemRenderer>
                    <mx:Component>
                        <mx:Label text="{data.item2.score}" width="10"/>
                    </mx:Component>
                </mx:itemRenderer>
            </mx:DataGridColumn>
        </mx:columns>
    </mx:DataGrid>
</mx:Application>

The project I'm working on is a school test generator. I created a test generator. Let's say I create a test named "Final exam". In this test I link a student group and I add as much testItems as I want. Let's say I make 2 testItems named "Written result" and "Attendance during schoolyear". Now, my application will generate scores for each student and for each item.
We'll generate a dataGrid as:
                    Written result          Attendance during schoolyear
Pupil 1               7                                   5
Pupil 2               6                                   9
Pupil 3               8                                   2
In this simple example, my dataProvider could look like this:
{pupil: "Pupil 1", score1: 7, score2: 5},
{pupil: "Pupil 2", score1: 6, score2: 9},
{pupil: "Pupil 3", score1: 8, score2: 2}
Setting the labelField to 'score1' and 'score2' will work.
So far, so good! My problem however is that the scores are not just figures but Objects! Why? Because my system makes it possible to VIEW the scores in diffrent ways, such as figures, smileys, checkboxes etc. The diffrent columns in my grid will each have a diffrent itemRenderer. The itemRenderers will take properties from their dataObject to render the output. My dataProvider looks like:
{pupil: "Pupil 1", score1: {score: 7, foo: 'whatever'}, score2: {score: 5, foo: 'whatever'}},
{pupil: "Pupil 2", score1: {score: 6, foo: 'whatever'}, score2: {score: 9, foo: 'whatever'}},
{pupil: "Pupil 3", score1: {score: 8, foo: 'whatever'}, score2: {score: 2, foo: 'whatever'}}
Setting the labelField to 'score1' and 'score2' won't work!
The data property for the itemRenderer of column 2 should be
     {score: 7, foo: 'whatever'}
instead of
     {pupil: "Pupil 1", score1: {score: 7, foo: 'whatever'}, score2: {score: 5, foo: 'whatever'}}
Does that make things clearer?
Thx,
d

Move focus from one to another itemRenderer inside DataGrid itemRenderer

I have a mx: DataGrid with 4 columns that have a itemRenderer with the following settings:
- Mx:DataGrid:
<code>
<mx:DataGrid id="itensPedidoCompraList"
      width="100%"
height="120"
dataProvider="{ model.pedidoCompra.itens }"
editable="true"
itemEditEnd="itensPedidoCompraList_itemEditEndHandler(event)">
</code>
- Mx:DataGridColumn:
<code>
<mx:DataGridColumn headerText="{resourceManager.getString('cadastroPedidoCompra', 'ident.PercentualDesconto') }"
                   width="60"
                   textAlign="right"
                   rendererIsEditor="true"
                                      editorDataField="data">
      <mx:itemRenderer>
                 <fx:Component>
                       <mx:Canvas>
                                 <input:NumberInput width="55"                                                                number="@{ data.percentualDesconto }"/>
                       </mx:Canvas>
            </fx:Component>
      </mx:itemRenderer>
</mx:DataGridColumn>
</code>
The user clicks on the line of the grid and click on the column to edit.
After him change or add value, ENTER key and have to move the focus to another column in the same line.
The way I'm doing, is moving to the column below.
What is the best way to do to move to the right column?
thank you

Try adding a capture phase event listener to DataGrid for keyDown and changing the key from ENTER to TAB

Proper URL for LinkButton in itemRenderer within datagrid

I am having problems figuring out the best way to open a URL
using the LinkButton function within an itemRenderer under a
DataGridColumn. I use a HTTPService to call a PHP script to pull
data from a MySQL database. The datagrid fills in properly and all
the data is being displayed. The link button works in that it will
open a new browser (if I put in a fake URL without my required
data).
Below is an example of my column with the link button and the
URL I'm tring to open.
<mx:DataGridColumn headerText="Script ID"
dataField="scriptid">
<mx:itemRenderer>
<mx:Component>
<mx:LinkButton label="{data.scriptid}"
click="navigateToURL(new URLRequest('
http://remoteurl/index.php?file=ext&id='data.scriptid),
'_blank')"/>
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
The error that I get is this:
The reference to entity "id" must end with the ';' delimiter.
It's like Flex Builder thinks that the "id" in the URL is a
parameter for the control? I tried enclosing the data.scriptid
within the single quotes. I also tried putting curly brackets {}
around data.scriptid as well.
Any assistance would be appreciated.
Thanks,
Chris

Spark DataGrid or MX DataGrid?

Using itemRenderer in dataGrid?

I wish to restrict user input, to match database type, in a
dataGrid.
I have used an itemRenderer with the 'restrict' property set:
<mx:itemRenderer>
<mx:Component>
<mx:TextInput restrict="0-9."/>
</mx:Component>
</mx:itemRenderer>
to restrict user input to numeric input only.
This does not work. But, if I use the 'restrict' property on
a
textInput outside the dataGrid it does.
What am I doing wrong?

how do i go about doing that? do i put a change event function in the itemrenderer? and how would i eventually reference data.col2?

Database driven combobox itemrenderer in DataGrid

Hi
I created a database driven combobox itemrenderer, code see below:
The data is loaded and shown correctly, but when I change the combobox, suddenly a "0" appears:
I can see in the debugger in combobox1_changeHandler, that the correct data is taken from the combo "this.selectedItem.data=3;" and written to "data.professionGroup", (changed from "1" to "3")
but then when the code jumps to set data the "value.professionGroup" is "0"?!?!
Thank yor for any pointers!
The DataGrid:
    <mx:DataGrid id="personDg" dataProvider="{sm.persons}" width="100%" height="100%" editable="true">
         <mx:columns>
            <mx:DataGridColumn headerText="firstName" dataField="firstName"/>
             <mx:DataGridColumn headerText="lastName" dataField="lastName"/>
             <mx:DataGridColumn headerText="professionGroup" dataField="professionGroup" editable="true" editorDataField="data"
                 rendererIsEditor="true"
                 itemRenderer="com.xxx.view.components.combobox.ProfessionGroupCombo">
             </mx:DataGridColumn>
        </mx:columns>
     </mx:DataGrid>
The ItemRenderer:
<?xml version="1.0" encoding="utf-8"?>
<mx:ComboBox xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/halo"
     change="combobox1_changeHandler(event)" initialize="combobox1_initializeHandler(event)" >
         <fx:Script>
             <![CDATA[
                 import mx.controls.dataGridClasses.DataGridListData;
                 import com.myfim.model.ShellModell;
                   import mx.events.ListEvent;
                    import mx.events.FlexEvent;
                 [Bindable]
                 private static var sm:ShellModell=ShellModell.getInstance();
                    public function setSelectedItemByValue(val:int):void{
                         this.selectedIndex = -1; // Show prompt if value is not found
                         for (var i:int=0;i<this.dataProvider.length;i++){
                            if(this.dataProvider[i].data == val){
                                 this.selectedIndex = i;
                                 break;
                         }// for
                 override public function set data(value:Object):void{
                    super.data=value; // value is the VO!
                     setSelectedItemByValue(value.professionGroup);
                 protected function combobox1_changeHandler(event:ListEvent):void
                    data.professionGroup=this.selectedItem.data;
                    // I can see in the debugger that "data.professionGroup" gets the correct data f.e. ="3" , but if it jumps to the "set data" the                          value.professionGroup is "0" !??
                protected function combobox1_initializeHandler(event:FlexEvent):void
                    this.dataProvider=sm.comboData.professionGroupAc; // AC of (label, data)
             ]]>
         </fx:Script>
</mx:ComboBox>

Hi,
yupiiee! I found the answer by myself, I had to change
editorDataField="data" to editorDataField="value"
Thats all! Then it works!
Martin Zach

Reappearing date in datefield itemRenderer of DataGrid

Hello, I have a datagrid with an item renderer on one column,
which is a datefield. The column (and the whole datagrid) is linked
to a MySQL db. when you edit a column it edits the db real time. My
problem is that when i delete a date from the datefield, it
spuratically reapears when i start editing another cell. anyone
know of this or can help me fix this?

myDateField component:
<mx:Canvas xmlns:mx="
http://www.adobe.com/2006/mxml"
width="100%" height="100%">
<mx:Script>
<![CDATA[
private function onChange():void{
// df.text = dtformat.format(df.selectedDate);
public function set _selected(val:String):void{
df.text = dtformat2.format(val);
public function get _selected():String{
return dtformat.format(df.selectedDate);
]]>
</mx:Script>
<mx:DateFormatter id="dtformat"
formatString="YYYY-MM-DD"/>
<mx:DateFormatter id="dtformat2"
formatString="MM-DD-YYYY"/>
<mx:DateField editable="true"
yearNavigationEnabled="true" change="onChange()" id="df" width="90"
horizontalCenter="0" height="22" />
</mx:Canvas>
column inside datagrid:
<mx:DataGridColumn id="dgc36" headerText="Init Call Date"
dataField="call_date" rendererIsEditor="true"
editorDataField="_selected">
<mx:itemRenderer>
<mx:Component>
<mx:Canvas>
<mx:Script>
<![CDATA[
public function get _selected():String{return
mdf._selected};
]]>
</mx:Script>
<assets:myDateField id="mdf"
_selected="{data.call_date}"/>
</mx:Canvas>
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>

Facing problem with Itemrenderer in Datagrid...

Hi,
Any idea how the following code using Action script..
<mx:DataGridColumn headerText="Online"
dataField="online">
<mx:itemRenderer>
<mx:Component>
<mx:CheckBox id="chkBox"/>
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
As it is in actionscript....
I dont want to create seperate component... everything i want
to write in single file.
something like...
var dgc:DataGridColumn=new DataGridColumn();
var chkBox:CheckBox=new CheckBox();
Here how to add chkBox to dgc using Itemrenderer??? any
idea??
Is its possible???

I am having the exact same issue! All my components are
DYNAMICALLY generated with AS3 here is my post:
http://www.adobe.com/cfusion/webforums/forum/messageview.cfm?forumid=60&catid=585&threadid =1344455&enterthread=y
ALL examples I find or are given involve static components
which I cannot have!
I hope someone helps us out.

Dropdownlist itemrenderer within datagrid

hi
just wondering if anyone has any advice or good examples for the following, I'm finding it a little tough to find a good example on the net
i've got a datagrid, and one column with an item renderer that has a dropdown list
i want of course to be able to reflect the choice in this dropdown list back into my data provider ie. the original array collection
i cant seem to be able to catch any events from the item renderer ?
also need to be able to select the right drop down item when the grid loads up
would appreciate any pointers !
cheers
Stephen

Spark DataGrid or MX DataGrid?

Getting selected item from combobox itemrenderer and storing in object

Hi Guys,
Can anyone help me in this regard. Its very urgent.
I have a combo box itemrenderer in datagrid column. I want to get the user selected item from the dropdown of the row(s) (User may select values from combo box from multiple rows of datagrid) and corressponding values of all other columns of the rows and store it in an object . Then pass this object to database to update only those rows that user has changed.
I am able to get the selected item from combo box using "event.currentTarget.selectedItem" and corressponding values of all other columns of the rows using "valueSelect.ID", etc where valueSelect is object which contains data for datagrid. But am stuck up with, how to store the selected item value of the combobox and corressponding values of all other columns of the rows into an Object ?.
Can anybody help me with sample to store selected item from combobox and its corressponding values of all other columns into an object which i can send to db...?
Kindly help me in this regard.
Thanks,
Anand.

Hi!
Are you using a collection of VO or DTO as the dataprovider of the combobox component?
If so, have you created some attribute there to control the user's selection in the combobox?
For instance:
private var selected:Boolean = false;
If your solution fits this approach, you may create a new collection that contains just the objects that were selected by the user, it means you can loop through the datagrid's dataprovider and only insert in this new collection those objects that have the attribute "selected" set to true.
For instance:
private function getSelectedRecords(datagridDataProvider:ArrayCollection):ArrayCollection
    var newCollection:ArrayCollection = new ArrayCollection();
    for each (var item:Object in datagridDataProvider)
        if (item.selected)
            newCollection.addItem(item)
    return newCollection;
Afterwards, you may serialize this new collection with your back-end.
Hope it helps you!
Cheers,
@Pablo_Souza

ComboBox with custom ItemRenderer

This is my combobox where I am trying to have a custom renderer:
<?xml version="1.0" encoding="utf-8"?>
<mx:ComboBox xmlns:fx="http://ns.adobe.com/mxml/2009"
                xmlns:s="library://ns.adobe.com/flex/spark"
                xmlns:mx="library://ns.adobe.com/flex/halo">
     <fx:Script>
          <![CDATA[
          import mx.events.FlexEvent;
          import mx.collections.ArrayCollection;
          import mx.controls.CheckBox;
          public var datas:XML;
          [Bindable]
          var ItemRenderer:ClassFactory;
          override public function set data(value:Object):void
               dataProvider = datas["sku" + value.sku];
               ItemRenderer = new ClassFactory(comboBoxCheckBoxItemRenderer);
               itemRenderer = ItemRenderer;
          public function saveCheckState(evt:Event):void
               var dataProviderItem:Object = dataProvider.getItemAt(dataProvider.getItemIndex(selectedItem));
               dataProviderItem.selected = CheckBox(evt.currentTarget).selected;
               dataProvider.setItemAt(dataProviderItem, dataProvider.getItemIndex(selectedItem));
          ]]>
     </fx:Script>
</mx:ComboBox>
This combobox is used as a custom itemrenderer in datagrid.
Here is code for comboBoxCheckBoxItemRenderer:
package modulecode
     import mx.containers.HBox;
     import mx.controls.CheckBox;
     import mx.controls.Label;
     import mx.controls.Spacer;
     public class comboBoxCheckBoxItemRenderer extends HBox
          private var action:Label;
          private var spacer:Spacer;
          private var checkBox:CheckBox;
          public function comboBoxCheckBoxItemRenderer()
               super();
          override protected function createChildren():void {
               // Call the createChildren() method of the superclass.
               super.createChildren();
               action = new Label();
               // Add the child component to the custom component.
               addChild(action);
               spacer = new Spacer();
               spacer.percentWidth = 100;
               // Add the child component to the custom component.
               addChild(spacer);
               checkBox = new CheckBox();
               // Add the child component to the custom component.
               addChild(checkBox);
          override public function set data(value:Object):void
               action.text = value.action;
               checkBox.selected = value.selected;
What's happening is that nothing is happening untill I drop combobox down in the grids. As the result checkboxes are not selected properly.
Any help?

How would I set up a custom itemrenderer to use data binding but properly have selected property in the following code:
<<mx:itemRenderer>
          <fx:Component>
               <mx:HBox width="100%">
                    <mx:Label text="{XML(data).action}"/>
                    <mx:Spacer width="100%"/>
                    <mx:CheckBox id="check" selected="{XML(data).selected}"
                                    change="outerDocument.saveCheckState(event);"/>
               </mx:HBox>
          </fx:Component>
     </mx:itemRenderer>

Fire itemrenderer in datagrid

Similar Messages

Maybe you are looking for