ItemRenderer in Flex4

Hi,
I was using new Flex 4 and trying to use Itemrenderer.
So, when I use a customItemRenderer that is let's say
<s:VGroup xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/halo" >
        <mx:Image />
        <s:RichText width="100%" height="30" text="{data.label}" >
        </s:RichText>
    </s:VGroup>
I can't get the data property inside it. How do I use a customItemrenderer with data inside it ?
One way I can think is wrapping this code inside <s:ItemRenderer >  but even that throws an exception. Please help.
Thanks
Hironmay Basu

Hi,
Thanks for reply. Using MXMLComponent solves the problem.
But still I don't know why can't i use ItemRenderer. This is the exception I get while in UIComponent.as using ItemRenderer.
private function getState(stateName:String):State
        if (!states || isBaseState(stateName))
            return null;
        // Do a simple linear search for now. This can
        // be optimized later if needed.
        for (var i:int = 0; i < states.length; i++)
            if (states[i].name == stateName)
                return states[i];
        var message:String = resourceManager.getString(
            "core", "stateUndefined", [ stateName ]);
        throw new ArgumentError(message); ///  HERE I GET ERROR
        return null;
Thanks
Hironmay Basu

Similar Messages

  • How to create generically styled itemrenderer?

    G'day,
    This is my first dabble with Flex 4, after we have been using Flex 3 for the past two years.
    I want to style an ItemRenderer for a list. That is all cool, and the new state syntax makes it really easy for me to create transitions between states, as well as different styles for different states.
    My problem:
    If the item renderer is used in two different locations in the app, I want the controls within that item renderer to be different, but the styles to be the same. E.g. In a document management system, the list items will want to display an icon, a filename, filesize, and version number, whereas in the Project Management system, I may want to have just the project name and a progress bar depicting how far completed the project is. Both these lists will have the same styles (same background shape, same transitions between states, same padding, etc) but they will house different controls.
    I have read a whole bunch of articles about skinning via google, and a lot of them are starting to blur into one. I am starting to get mixed up about when to use a skin, style, or itemrenderer for a particular rendering task, and which part is responsible for different parts of rendering.
    What I thought the solution would be:
    public class MyRenderer extends SkinnableComponent implements IItemRenderer { ... }
    I set the skinClass of the renderer to the appropriate skin and in that skin, place a 'DataGroup id="contentGroup"', and then a bunch of components inside the renderer. Both modules have their own renderer, but use the same skin. This works in as far as the normal state is rendered in the skin, and the content group is correctly populated with the children of MyRenderer. It does not work in as far as I lose all of the state handling code found inside the ItemRenderer component, so the 'selected' and 'hovered' state are not rendered in the skin. It just sticks with the default state.
    Any help would be greatly appreciated, and I am more than happy to attach some example code if my convoluted explanation is no good : )
    cheers.
    Edit:
    Re: My confusion about skins/styles - I understand that the skin should take care of the components and all aspects of rendering, but I am asking the itemrender to deal with the components and the skin to do the styles. I also realise that this would normally be a job for styling rather than skinning, but the styles I want to share amongst modules are more than what CSS provides (such as transitions between the normal and hovered state).
    Message was edited by: serwylo

    Ok, I have figured out an ugly hack which works. After reading the response to this post: http://forums.adobe.com/message/2370902#2370902, it became clear that ItemRenderers are intentionally not SkinnableComponents. The rational is that the majority of use cases will not need to separate the skin from the component when dealing with item renderers.
    This is fair enough, but to achieve what I want, I needed a skinnable ItemRenderer. I did the unthinkable, and copied the ItemRenderer code. The only change was to extend SkinnableContainer instead of DataRenderer. I then mirrored the componentState with the skinState as per this blog: http://saturnboy.com/2009/09/flex4-component-states-skin-states/ calling invalidateSkinState in a handler for StateChangeEvent.CURRENT_STATE_CHANGE.
    cheers.

  • 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)"/>  <!-- It causes the error -->
                            </mx:Component>
                        </mx:itemRenderer>
             </mx:TileList>
             <mx:Image .... complete="aMethod(event)"/>  <!-- It is OK here -->
    </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>
    <!--Load classes for image sources -->
    <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 &quot;Add to List&quot;&#xa;" 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:change>
                                                <![CDATA[
                                                    if(this.selected == true){
                                                         data.PaCheckbox = 1;
                                                     }else{
                                                         data.PaCheckbox = 0;
                                                ]]>
                                            </mx:change>-->
                                        </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">
        <!--
            This item renderer simply extends Label and overrides the updateDisplayList function to
            draw a gradient-filled rectangle. The colors in the gradient are determined from the
            data.
        -->
        <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!

Maybe you are looking for

  • A60-155: Operating system will not boot.

    I have a TOSHIBA A60-155. when i turn on the laptop it willnot load the operating system, i have read the manual and apparently it is failing the self test i have tried selecting all start up modes but nothing will work. I have not yet tried any Reco

  • Condition in select

    Hi All, I have a doubt in the following select query. select * from YL2_M_KOWM  into table  g_t_itab where KVEWE IN ('B') AND KAPPL IN ('WM') AND EVENT IN ('/RB04/YL4_EA') AND SPRAS IN ('D','*','') AND WERKS IN ('0780','*','') AND LGNUM IN ('001','*'

  • Can't figure out how to make direction aware mouse over?

    I don't have much coding skills at all so that is probably my main problem but does anyone know how to do this effect in Edge Animate? I'm very new to this program but over the last 2 weeks i've been trying to create this and epic failed. Any Advice?

  • Unsynchronized Producer Consumer Problem

    Hi I would like some help implementing an unsynchronized producer consumer with an unbounded queue (implemented using an ArrayList) I have both the producer and consumer sleeping for random amount of time (producer wakes up faster). The problem is th

  • Keep getting this Error

    Hi, I keep getting this error in my AQ error location: $ORACLE_HOME/mgw/log Polling thread: SUB_NAME1 new msgCount = 0 >>2013-06-25 13:00:12  MGW  Engine  2  TRACE  Polling Polling checking job: STOCK_NAME3 state = 1 status = 0 retryCount = 1 >>2013-