ItemRenderer

Hi,
Having a problem with using an itemRenderer in datagrid
column, the custom column appears correctly but whenever I
dynamically change the dataProvider I get a repeat of the custom
column and as I'm potentially using a dataProvider with a different
schema to the initially loaded schema I then get a mixture of the
old schema and current schema fields. It all appears to work
correctly though if I don't create the custom column.
See attached code for creating custom column which is created
when I get the data result(onResult) and also the code for the
itemRenderer (ButtonAddToPlaylist).
Thanks,
Mike

Similar Messages

Inline item mx:Image ... in mx:itemRenderer could not see the defination of method

I have following code and got a compilation error ("possiblely called an undefined function") because the <mx:Image ...> in the <mx:itemRenderer > could not see the defination of "aMethod" method:
<mx:Form ....>
<mx:Script><![CDATA[
private function aMethod(evt:Event):void {
           // code...
]]></mx:Script>
<mx:Canvas label="Tile View" width="100%" height="100%" >
          <mx:TileList id="photosTileList" dataProvider="{this.photoDP}" width="100%" height="100%" >
                    <mx:itemRenderer >
                        <mx:Component>
                            <mx:Image horizontalAlign="center" source="{data.url.text()}"
                                toolTip="{data.caption.text()}" width="55" height="38" complete="aMethod(event)"/> 
                        </mx:Component>
                    </mx:itemRenderer>
         </mx:TileList>
         <mx:Image .... complete="aMethod(event)"/> 
</mx:Canvas>
</mx:Form>
I do not know why the inline <mx:Image> inside <mx:itemRenderer> can not see the "aMethod" function defination in the same mxml file.
Any suggestions?

You need outerDocument, and the method cannot be private, it should be public:
complete="outerDocument.aMethod(event)"
If this post answers your question or helps, please mark it as such.
Greg Lafrance - Flex 2 and 3 ACE certified
www.ChikaraDev.com
Flex / AIR Development, Training, and Support Services

DataChange event not triggering in itemRenderer

Hi,
I have a tileList on the stage, which is dataBound to an
XMLList object, the items of which are programatically updated with
the results from an httpService.
The tileList uses a custom itemRenderer. Inside the
itemRenderer, I want to be able to change the color of the
background based on the data. For example, when data.@arrow = 1, I
want the background to be green, and when data.@arrow = 0, red etc.
I am trying to call this function on dataChange event of one
of the containers inside the itemRenderer. however it doesnt seem
to be firing when the data updates
Please advise as to what I am doing wrong?

Found the answer. My stupidity!
I wasnt updating the arrow field properly

Image Not getting displayed in DataGridColumn ItemRenderer

I have a DataGridColumn ItemRenderer and based on the value,
I am displaying image in the DataGridColumn
However the image is not getting displayed.
Below is my code. What could be the problem?
Thanks

"ajesing" <[email protected]> wrote in
message
news:gbcd0n$8sn$[email protected]..
>I have a DataGridColumn ItemRenderer and based on the
value, I am
>displaying
> image in the DataGridColumn
> However the image is not getting displayed.
>
> Below is my code. What could be the problem?
@Embed embeds at compiletime, so it can't take a variable. If
you want to
embed the graphics, embed them to the main file and use
DataGrid's
iconFunction to pass an icon to the itemRenderer.
HTH;
Amy

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

Creating a common itemRenderer different data properties

Ok, first let me set the context. I creating a dashboard-like
table where each row represents an object, and the first column of
the table shows the name of the object and subsequent columns are
various dashboard compliance items.
[Name] [Prop A] [Prop B] [Prop C] [Prop D]
Item 1 {graphic) {graphic) {graphic) {graphic)
Item 2 {graphic) {graphic) {graphic) {graphic)
Item 3 {graphic) {graphic) {graphic) {graphic)
Each dashboard cell displays a different graphic based on
that property. There are 6 graphics, so the itemRenderer looks at
the data for that given property, and then translates the #0-#5
into a class reference for 1 of those 6 graphics using the Switch
method.
override public function set data(value:Object):void {
super.data = value;
switch(value.type) {
case 0:
img.source = scanFailed8;
break;
case 1:
img.source = needsScan8;
break;
etc...
So since the calculation is the same for all of these
properties, what I want to do is create a generic itemRenderer
where I can pass in the property name and then use that reference
in the Switch method. My problem is that the Switch method works
fine if it's:
switch(value.PropA)
But in need to set a public variable that can get passed in
to replace that value. I tried this as a string, and that clearly
failed. Can someone help me get through this issue? I really don't
want to have to maintain a separate item renderer for each
property. :)
Thanks.

OK, here it is in all it's infamy....
<?xml version="1.0" encoding="utf-8"?>
<mx:HBox
xmlns:mx="
http://www.adobe.com/2006/mxml"
implements="mx.controls.listClasses.IDropInListItemRenderer"
horizontalAlign="center" verticalAlign="middle"
horizontalScrollPolicy="off" verticalScrollPolicy="off"
preinitialize="preinit()" creationComplete="init()">
<mx:states>
<mx:State name="long">
<mx:SetStyle name="horizontalAlign" value="left"/>
<mx:SetStyle name="paddingLeft" value="10"/>
</mx:State>
<mx:State name="short">
<mx:RemoveChild target="{theLabel}"/>
</mx:State>
</mx:states>

<mx:Script source="../Scripts/LoadIcons.as" />
<mx:Script>
<![CDATA[
import mx.controls.listClasses.BaseListData;
import mx.controls.dataGridClasses.DataGridListData;
import flash.events.Event;
[Bindable]
public var showLongFormat:Boolean;
//private var _listData:DataGridListData;
private var _listData:BaseListData;
// Make the listData property bindable.
[Bindable("dataChange")]
// Define the getter method for listData.
public function get listData():BaseListData {
return _listData;
// Define the setter method for listData
public function set listData(value:BaseListData):void {
_listData = value;
public function preinit():void {
// When data changes the handleDataChanged function is
called
addEventListener("dataChange", handleDataChanged);
public function handleDataChanged(event:Event):void {
// Cast listData to DataGridListData object.
var theListData:DataGridListData =
DataGridListData(listData);
// Access information about the data passed to the item
renderer
// and spit out the right image and text.
switch(theListData.label) {
case '0':
theIcon.source = scanFailed8;
theIcon.toolTip = theListData.dataField + ': Scan Failed';
theLabel.text = 'Scan Failed';
break;
case '1':
theIcon.source = needsScan8;
theIcon.toolTip = theListData.dataField + ': Needs
Scanning';
theLabel.text = 'Needs Scanning';
break;
case '2':
theIcon.source = scanning8;
theIcon.toolTip = theListData.dataField + ': Scanning';
theLabel.text = 'Scanning';
break;
case '3':
theIcon.source = noncompliant8;
theIcon.toolTip = theListData.dataField + ': Non-Compliant';
theLabel.text = 'Non-Compliant';
break;
case '4':
theIcon.source = partial8;
theIcon.toolTip = theListData.dataField + ': Partial
Compliance';
theLabel.text = 'Partial Compliance';
break;
case '5':
theIcon.source = compliant8;
theIcon.toolTip = theListData.dataField + ': Compliant';
theLabel.text = 'Compliant';
break;
default:
theIcon.source = notApplicable8;
theIcon.toolTip = 'Not Applicable';
break;
// Check to see if form is 'long' or 'short'
public function init():void {
if (showLongFormat == true) {
currentState='long';
}else{
currentState='short';
]]>
</mx:Script>
<mx:Image id="theIcon" />
<mx:Label id="theLabel" />
</mx:HBox>
That's a lot of code to just stick an image in a cell. Ok, I
guess it does a little more than that. ;-)

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?

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...

Passing data from an XML object to an itemRenderer

I'm trying to color the background of a column in a datagrid and have found a sample file that illustrate the concept. However, the sample has data stored in an arrayCollection whereas mine is in an XML object. The problem is that the data in the sample file is apparently automatically passed to the itemRenderer (shown below: note the trace statement). My XML object does not appear to automatically pass data to the itemRenderer. So my questions are:
1. Is there a simple way to pass data stored in an XML object to an itemRenderer
or
2. Should I convert my XML to an arrayCollection? If so, what's the best way to do this-- I've tried the following, but without success:
<mx:Model id="xmldata" source="example3.xml"/>
<mx:ArrayCollection id="myAC" source="{ArrayUtil.toArray(xmldata.Example1)}" />
Here's what the xml looks like:
<TABLE>
   <EXAMPLE1>
      <difficulty> 0.5 </difficulty>
      <discrimination> 0.7 </discrimination>
      <item> 3 </item>
   </EXAMPLE1>
</TABLE>
Here's the itemRenderer:
<?xml version="1.0" encoding="utf-8"?>
<mx:Label xmlns:mx="http://www.adobe.com/2006/mxml">
    
    <mx:Script>
    <![CDATA[
        import flash.geom.Matrix;
        import flash.display.GradientType;
        import flash.display.Graphics;
        override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
            super.updateDisplayList(unscaledWidth,unscaledHeight);
            var m:Matrix = new Matrix();
            m.createGradientBox(unscaledWidth,unscaledHeight);
            var g:Graphics = graphics;
                        trace("data.col3="+data.col3)
            var colors:Array = (data.col3 < 2000 ? [0x0000CC,0x0000FF] : [0x00CC00,0x00FF00]);
            g.clear();
            g.beginGradientFill(GradientType.LINEAR, colors, [0.2,0.6], [0,255], m);
            // the rectangle is drawn a little high and a little tall to compensate for the gap
            // the DataGrid introduces between rows.
            g.drawRect(0, -2, unscaledWidth, unscaledHeight+4 );
            g.endFill();
    ]]>
    </mx:Script>
</mx:Label>

This sample code should answer your question of how to bring data into the renderer automatically. It comes in via the DataGrid dataProvider and then you refer to it in the renderer as data.XYZ, where XYZ is the field in the XML with the data. See FB 3 help sys on e4x syntax.
------------------ mainapp.mxml --------------------
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
creationComplete="srvc.send();">
<mx:Script>
    <![CDATA[
      import mx.rpc.events.ResultEvent;
      import mx.collections.XMLListCollection;
      [Bindable] private var xlc:XMLListCollection;
      private function dataHandler(evt:ResultEvent):void{
        xlc = new XMLListCollection(evt.result..EXAMPLE1 as XMLList);
    ]]>
</mx:Script>
<mx:HTTPService id="srvc" url="data2.xml" result="dataHandler(event)"
    resultFormat="e4x"/>
<mx:DataGrid dataProvider="{xlc}">
    <mx:columns>
      <mx:DataGridColumn headerText="Difficulty" dataField="difficulty"/>
      <mx:DataGridColumn headerText="Discrimination" dataField="discrimination"/>
      <mx:DataGridColumn headerText="Item" itemRenderer="MyLabel"/>
    </mx:columns>
</mx:DataGrid>
</mx:Application>
----------- MyLabel.mxml --------------
<?xml version="1.0" encoding="utf-8"?>
<mx:Label xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
    <![CDATA[
      import flash.geom.Matrix;
      import flash.display.GradientType;
      import flash.display.Graphics;
      override protected function updateDisplayList(unscaledWidth:Number,
        unscaledHeight:Number):void{
        super.updateDisplayList(unscaledWidth,unscaledHeight);
        this.text = data.col3;
        var m:Matrix = new Matrix();
        m.createGradientBox(unscaledWidth,unscaledHeight);
        var g:Graphics = graphics;
        var colors:Array = (data.col3 < 2000 ? [0x0000CC,0x0000FF] : [0x00CC00,0x00FF00]);
        g.clear();
        g.beginGradientFill(GradientType.LINEAR, colors, [0.2,0.6], [0,255], m);
        g.drawRect(0, -2, unscaledWidth, unscaledHeight+4 );
        g.endFill();
    ]]>
</mx:Script>
</mx:Label>
------------ data2.xml ----------------
<?xml version="1.0" encoding="utf8"?>
<TABLE>
   <EXAMPLE1>
      <difficulty> 0.5 </difficulty>
      <discrimination> 0.7 </discrimination>
      <col3> 3 </col3>
   </EXAMPLE1>
</TABLE>

How to access variables declared in main mxml in itemrenderer files

Hi,
I have a main mxml which has a cutomRenderer that defines two
mxml components
namely raidobutton and textinput.
Now in this TextInput.as i need to access variable defined in
main mxml.
Please suggest a way.
Thanks,
Lucky

Lets say you have a public property in your application like
public var name:String = "John Smith";
to access this using an inline item renderer:
<mx:itemRenderer>
<mx:Component>
<mx:VBox>
<mx:TextInput text={outerDocument.name} />
</mx:VBox>
</mx:Component>
</mx:itemRenderer>
To access variables of the applicaton you can use
Application.application.name (for example) to reference "global"
variables, so you might also use this technique. With an inline
item renderer, the outerDocument property will refer to the
component which contains the renderer.

Problem in accessing the itemRenderer dynamically

Hi,
     In my application i am using two AdvanceddataGrids. i am showing one datagrid at a time based on the user selection. I have provided the buttons to switch between the grids. These two datagrids are getting the data from XML. By default the data will be available for the first datagrid in XML. Once the user selects the second grid, i am using the HTTPService to fetch the data for that particular grid. (This HTTPService will pass this grid's id as QueryString to the same XML page, and the .Net will read these parameters to fetch the required data from the DB and will print the data in the XML format in the same page).
     Here, for the first datagrid, i have used the itemRenderer to show some images (in the datagrid) based on the data available in XML. And i have followed the same for the second grid also.
     But the probelm is, whenever the application starts runnning (on Creation complete of the application), i am not able to view the images for the first datagrid, since the data for the second datagrid is not available (i have defined the itemRenderer for the second dataGrid based on XML data).
     I have stored the itemRenderers for each datagrid as a separate component. Is there any way to add this itemRenderer component during the run time. (While the user clicks the button to view the second datagrid)?
     "(Second datagrid's) coloumnid.itemRenderer = mycomponent.mxml" (I have tried this code to access during selection of second datagrid. But it didn't work).
     Could someone help me on this?

When you say:
But the probelm is, whenever the application starts runnning (on Creation complete of the application), i am not able to view the images for the first datagrid, since the data for the second datagrid is not available (i have defined the itemRenderer for the second dataGrid based on XML data).
I don't understand. Why would the images in the first datagrid not be availabe because the data for the second grid is not available?
If certain data needs to be loaded for creationComplete, then ensure it is loaded.
Perhaps you can clarify these points as your scenario is not clear.

How to handle multiple selection in the Spark List control with checkbox as itemrenderer?

Hi All,
I am using checkbox as an ItemRenderer in spark list.
I have a query.
how to handle multiple selection in the Spark List control with checkbox as itemrenderer?
how to retrieve the selected item label?
Thank you in advance.

Hi there, I'll tweak your code a little bit to something like this:
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
                layout="vertical">
    <mx:Script>
        <![CDATA[
             import mx.events.ListEvent;
             import mx.controls.CheckBox;
           [Bindable]
           private var mySelectedIndexes:ArrayCollection=new ArrayCollection();
            private function onChange(e:ListEvent):void
               if(CheckBox(e.itemRenderer).selected){
                         mySelectedIndexes.addItem(e.rowIndex);
               }else{
                              mySelectedIndexes.removeItemAt(mySelectedIndexes.getItemIndex(e.rowIndex));
               chkList.selectedIndices=mySelectedIndexes.toArray();
        ]]>
    </mx:Script>
<mx:ArrayCollection id="collection">
        <mx:Object label="Test A"/>
        <mx:Object label="Test B"/>
        <mx:Object label="Test C"/>
        <mx:Object label="Test D"/>
        <mx:Object label="Test E"/>
        <mx:Object label="Test F"/>
        <mx:Object label="Test G"/>
    </mx:ArrayCollection>
<mx:List id="chkList" dataProvider="{collection}" itemRenderer="mx.controls.CheckBox" itemClick="onChange(event);" allowMultipleSelection="true"/>
</mx:Application>

Cannot set the properties of an itemrenderer in sdk 4

Hi,
I have a project working in sdk 3 that creates an item renderer for a grid, and passes the field index to the renderer. In sdk 4, the
property is null. Is this a bug? (code truncated)
<?xml version="1.0"?>
<mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml" horizontalScrollPolicy="off" verticalScrollPolicy="off" horizontalGap="5" paddingLeft="6" implements="mx.core.IFactory">
    <mx:Script>
        <![CDATA[
            [Bindable] public var fieldIndex:int = -1;
            public function newInstance():*
                return new statusItem();
            override public function set data(value:Object):void {
                super.data = value;
                var status:String = "";
                var statusImg:String = "";
                if (value != null && value.length > 0 && fieldIndex > -1)   {
                    status = value[fieldIndex];
                    if (status != null && status.length > 0) {
                        switch(status.toLowerCase()) {
                            case "open" : img.source = Icon1;
                                        break;
                            case "closed" : img.source = Icon2;
                                break;
                            default : img.source = Icon9;
                                break;
                else {
                    img.source = errorIcon;
        ]]>
    </mx:Script>
    <mx:Image id="img" source="{blankIcon}" verticalAlign="middle" width="10" height="10" />
    <mx:Label id="lbl" text="{data[fieldIndex]}" />
</mx:HBox>
parent code
var sRenderer:ClassFactory = new ClassFactory(statusItem);
                                            sRenderer.properties = { fieldIndex: x };
                                            dgc.itemRenderer = sRenderer;
It is simple code that works in version 3, but not in version 4.
thanks,
Jon

Okay, I cant remember whether it was NULL.
All I know is that it is not being set using SDK 4 and it works perfectly in SDK 3.
Jon

Datagrid itemrenderer & evaluation of different column

Hey All,
I've been playing with this for a while but can't get it right. Basically, I have an itemrenderer that has an image and label, but I need to see what the value is of a different column before I know what image to use. I have a feeling the reason why my intended logic won't work is becasue the data[] does not reporesent the whole data structure...but I could be wrong.
This is what I have now:
I have a grid that references this itemrenderer & the grid dataprovider is an array collection:
Form
<s:GridColumn dataField="employee" headerText="Employee"
                 itemRenderer="com.mycompany.view.assets.renderers.EmployeeStatusColour"></s:GridColumn>
Item Renderer
<?xml version="1.0" encoding="utf-8"?>
<s:GridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
     ....>
<fx:Script>
       <![CDATA[
          override public function prepare(hasBeenRecycled:Boolean):void {
          //THIS WORKS BUT NEED TO ADD LOGIC
               lblData.text = data[column.dataField];
               statusImage.source = "com/mycompany/view/assets/images/dot_GREEN.png";
          //THIS IS WHAT I WANT INSTEAD - SYNTAX BELOW IS WRONG BUT YOU'LL GET THE IDEA
               lblData.text = data[column.dataField];
               if(data[column(3)]; = "MONDAY"{
                    statusImage.source = "com/mycompany/view/assets/images/dot_GREEN.png";
               }else{
                    statusImage.source = "com/mycompany/view/assets/images/dot_BLUE.png";
        ]]>
</fx:Script>
          <s:HGroup verticalAlign="middle" height="100%" gap="2">
          <s:Image id="statusImage"/>
          <s:Label id="lblData" paddingTop="5"/>
</s:HGroup>
</s:GridItemRenderer>
Thanks in advance to anybody who can direct me to a solution.
Flex

Hi,
I tried your suggestion but it didn't work.   Thanks though!
However, if you see the code below this works as I stated above. data[column.dataField] returns the value of the referenced value.
override public function prepare(hasBeenRecycled:Boolean):void {
                                        lblData.text = data[column.dataField];
                                        statusImage.source = "com/mycompany/view/assets/images/dot_green.png";
So I did a debug inside my item renderer and found that the data object had all the object values of the row from my grid, which is what I want. I just don't know how to access them individually to do my comparison. It's probably something really easy like
If (data[column(4).dataField]=="MONDAY"){
           statusImage.source = "com/mycompany/view/assets/images/dot_GREEN.png";
I know I'm close just don't know the syntax.
Thanks!

Flex datagrid custom itemRenderer - making column NOT EDITABLE

Hi all,
I am new to flex and having been trying to build custom editors and renderers for datagrid. I ran into this problem trying to fix another one (http://forums.adobe.com/post!reply.jspa?message=3569216)
The problem is :
I have a custom editor and a renderer for a text column. The whole grid is editable (i.e; editable=true). But clicking on the cell does not show me the editor. However, if I change the renderer to mx.controls.label, clicking on it takes me to my custom editor.
Can anyone please tell what I am doing wrong?? I am pasting the relevant code for more details.
DATAGRID : Replacing itemRenderer = "renderers.TextRenderer" with itemRenderer = "mx.controls.Label" makes the column editable
<mx:DataGrid id="dg" editable="true" rowHeight="100" width="861" x="10" y="10" height="498" dataProvider="{this.slideArray}">
     <mx:columns>
                       <mx:DataGridColumn headerText="Text" width="100"
                                                       resizable="true" sortable="false"
                                                       itemRenderer = "renderers.TextRenderer"
                                                       itemEditor="editors.TextEditor"
                                                      dataField="text" editorDataField="myData"/>
            </mx:columns>
</mx:DataGrid>
TEXT EDITOR
<?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"
                                          initialize="initEditor()">
<mx:TextInput id="edit" width="{this.width}" height="{this.height}"/>
<fx:Script>
<![CDATA[
          import domain.Slide; // contains just one property :::: public var text : String
          override public function set data(value:Object):void{
                    super.data = value;
                    this.edit.text = (value as Slide).text;
          public var myData : String; // editor data field
          import mx.binding.utils.BindingUtils;
          private function initEditor():void{
                    BindingUtils.bindProperty(this,"myData", this.edit, "text");
]]>
</fx:Script>
</s:MXDataGridItemRenderer>
TEXT RENDERER
<?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">
     <s:Label id="txt" horizontalCenter="0" verticalCenter="0"/>
     <fx:Script>
          <![CDATA[
                         import domain.Slide;
                         override public function set data(value:Object):void{
                                        super.data = text;
                                        this.txt.text = (value as Slide).text;
          ]]>
     </fx:Script>
</s:MXDataGridItemRenderer>
Tricks I have tried and failed :
1. added the following code to the renderer
   override public function get data():Object{
                                   return super.data;
2. remove/change focusEnabled
3. wrote the same renderer in Actionscript - making it extend MXDataGridItemRenderer. I had to add the label component txt using addElement. Clicking on this does show th editor but it doesnt show the label txt at all... i.e; I dont get any text displayed.
I am using Flex 4.0 sdk.

It worked!!!!!!! Thank you!! What you mentioned was indeed the problem!
Here is the custom item renderer's set data function
Before
Now
override public function set data(value : Object):void{
                super.data = text;
                  this.txt.text = (value as Slide).text ; //txt is the Label control
override public function set data(value : Object):void{
                  super.data = value;
                  this.txt.text = (value as Slide).text ; //txt is the Label control
oh man, this is such a stupid mistake. I think I was confused with having three text properties - one inherited from MXDataGridItemRenderer, one in my txt Label control and one on my slide.
I had no idea that sending the value up to the super class was so important. None of the docs I read seemed to give much importance to this statement.
thanks so much and sorry for taking up so much of your time. I guess it is uncessary to post any more code.

Items in Tree control move around when data is submitted using custom ItemRenderer

I'm working on a Tree control with an XMLListCollection as
its dataProvider.
The dataProvider has information looking like this :
quote:
<?xml version='1.0' encoding='utf-8'?>
<INFO>
<FIELD label="STR_USER_NAME"
type="text"
value=""
>
</FIELD>
<FIELD label="STR_USER_EMAIL"
type="text"
value=""
>
</FIELD>
<FIELD label="STR_OPTIONAL"
type="branch"
value="0"
>
<FIELD label="STR_USER_ADDRESS"
type="text"
value=""
>
</FIELD>
<FIELD label="STR_USER_POSTAL_CODE"
type="text"
value=""
>
</FIELD>
</FIELD>
</INFO>
So in the Tree control I'd like the information to show up
with a label and
an
editable textbox for each item :
[Label] [textbox]
To do this I made a tree like this :
quote:
<mx:Tree id="userTree"
editable="true"
rendererIsEditor="true"
editorDataField="curVal"
itemRenderer="{new ClassFactory(ItemRendererUser)}"
itemEditEnd="e_ProcessData(event);"
dataDescriptor="{new DataDescriptorUsers()}"
showRoot="false"
verticalScrollPolicy="{ScrollPolicy.AUTO}"
/>
where the e_ProcessData() function looks like this (I used
http://livedocs.adobe.com/flex/201/html/wwhelp/wwhimpl/js/html/wwhelp.htm?href=c
elleditor_073_16.html#202105 as a guide) :
quote:
public function e_ProcessData(event:ListEvent):void
event.preventDefault();
userTree.editedItemRenderer.data.@value =
ItemRendererUsers(event.currentTarget.itemEditorInstance).curVal;
userTree.destroyItemEditor();
userTree.dataProvider.notifyItemUpdate(userTree.editedItemRenderer);
} // END OF e_ProcessData()
I attached the rest of the files because they're a little
bit longer.
When I run the program, the data shows up fine when it is
initialized the
very
first time, and I made a test button that just dumps the
contents of the
dataProvider in a trace statement to verify that the data has
been set
properly.
The problem I've run into is whenever the textfield is
edited, the item
that
I've selected jumps around the list.
For example, if I edit the item "STR_USER_NAME" after I
finish the edit, it
will move from the very first position in the Tree to the
bottom of the
Tree.
I traced the contents of the dataProvider and the
dataProvider structure
stays
the same, with the "STR_USER_NAME" at the top, but if I look
at the flex app
in
the web browser, its position is at the bottom of the Tree.
This happens for every other item I try to edit... I read in
the
documentation
that the ItemRenderers are recycled, so it means I should be
checking to
make
sure the initial states are covered, but I'm not sure how
this affects my
application.
Can anyone help me out with this ? Its very confusing - I've
tried making
an
ItemRenderer using pure actionscript, mxml and the
combination you see in
this
example and I always end up with the same behaviour - So I
must be missing
something critical...
// ItemRendererUsers.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="
http://www.adobe.com/2006/mxml"
verticalScrollPolicy="{ScrollPolicy.OFF}"
horizontalScrollPolicy="{ScrollPolicy.OFF}"
creationComplete="initItemRendererUsers();"
>
From my FAQ:
Q: I've created a custom itemRenderer component to use in a
List
based component (Datagrid, TileList, HorizontalList, etc.).
When my List
first displays, everything looks fine, but when I scroll it
or change the
dataProvider, some of the itemRenderers show values or
formatting that
aren't right. How do I fix this?
A: List-based components don't draw a renderer for every item
in the
dataProvider. Instead, they create enough to display what is
on screen now,
plus one or two more waiting in the wings. This means they
recycle the
renderers rather than creating new ones when you change
dataProvider or
scroll up and down. When you use a creationComplete event to
set up the
itemRenderer, that event doesn't happen again when the
renderer is used for
a different set of data. The solution to this is to override
the set data
protected function that most components have.
For more information, check out the following resources:
http://www.adobe.com/devnet/flex/articles/itemrenderers_pt1.html?devcon=f1
http://blogs.adobe.com/aharui/2007/03/thinking_about_item_renderers_1.html
Please note, I post this FAQ weekly, and you can find a
permanent copy of it
here
http://www.magnoliamultimedia.com/flex_examples/Amys_Flex_FAQ.pdf

"peterh8234" <[email protected]> wrote in
message
news:gaqttd$kft$[email protected]..
> Yes - the set and get functions are listed down below.
But the quirky
> behaviour
> is the same regardless of whether I override the set and
get functions or
> not.
>
> I noticed there was another variable called listData -
should I be using
> that
> one or the data variable to read and write to the
dataProvider ?
>
> // _data
> [Bindable] public var _data:Object;
> [Bindable("dataChange")]
> //
> override public function get data():Object
> {
> trace('[ItemRendererDefault.GET data()] called for {' +
> _data.attribute("label") + '}.');
> return _data;
> } // END OF get data()
>
> //
> override public function set data(value:Object):void
> {
> _data.@value = inputText.text;
> trace('[ItemRendererDefault.SET data()] called for {' +
> _data.attribute("label") + '}.');
>
> invalidateProperties();
> } // END OF set data()
Your set data needs to set a flag that gets picked up in
commitProperties()
and does your thing that you were doing before in
creationComplete. You
should see examples of this in the links I posted. Instead of
this:
_data.@value = inputText.text;
you should look at implementing IDropInListItemRenderer,
which will allow
you to dynamically determine which field to look at, instead
of hardcoding
it. You also might wind up overwriting the stored value with
a null value
when the List passes the stored value in. I'd encourage you
to really go
through those links I posted and make sure you understand
what they're
saying. The itemRenderer life cycle is one of the hardest
things to
understand, but once you understand it, it makes many things
in Flex much
easier. It's worth investing the time.

ItemRenderer

Similar Messages

Maybe you are looking for