Item Rendering component

In my datagrid I used Inline item rendering to create text link. code is given
<mx:DataGridColumn headerText="Nomenclature">
            <mx:itemRenderer>
                 <mx:Component>
                      <mx:Label htmlText="&lt;u&gt;{data.NOMENCLATURE}&lt;/u&gt;" color="blue" click="newBrowserWindow(data.CALL_URL);" >
                      <mx:Script>
                      <![CDATA[
                           private function newBrowserWindow(url:String):void{
                              var urlRequest:URLRequest = new URLRequest(url);
                              navigateToURL(urlRequest,"_blank");
                      ]]>
                      </mx:Script>
                      </mx:Label>           
                 </mx:Component>           
            </mx:itemRenderer>
</mx:DataGridColumn>
I have to replicate this functionality in multiple datagrids in  multiple applications, I am trying to create component for it and use that component in datagrid column. How can i do this?

I have achieved this. but my issue is
if someother datagrid has field data.EMPLOYEE_NAME instead of data.NOMENCLATURE, then how can i achive this. the component should be reuseable for any other datagrid having different field names.
<mx:DataGridColumn headerText="Nomenclature">
            <mx:itemRenderer>
                 <mx:Component>
                      <mx:Label  >
                      <mx:Script>
                      <![CDATA[
                           override public function set data(value:Object):void
                               super.data = value;
                                if (value.hasOwnProperty("NOMENCLATURE"))
                                   // your code here like add click listener.
                              else if (value.hasOwnProperty("EMPLOYEE_NAME"))
                                       // your code here like showing the employee name etc
                      ]]>
                      </mx:Script>
                      </mx:Label>          
                 </mx:Component>          
            </mx:itemRenderer>
</mx:DataGridColumn>
Is this what you required ?

Similar Messages

  • When to use Drop In Item renderer and InLine Item Renderers ??

    Hi ,
    I am getting confused in where to use Inline ItemRenderer and DropIn Item Renderer .
    What i feel is that DROP in Item Renderer are easy to use , and those can satisfy any requirements .
    What i read from tutorilas that we cant use Drop In because they say ,  The only drawback to using  drop in is that them is that you cannot configure them
    Please help me .

    Hi Kiran,
    Here is the detailed explanation you needed:
    You can also refer the link below:
    http://blog.flexdevelopers.com/2009/02/flex-basics-item-renderers.html
    Drop-In Item Renderers
    Drop-In Item Renderers are generic in nature and don't rely on specific data fields to render data. This allows them to be used with a wide range of data sets, hence, the term “drop-in”. Drop-In Item Renderers can be “dropped-in” to any list-based control regardless of the dataprovider’s data properties.
    In our previous example, the employee photo property requires use of a custom Item Renderer to render properly in the UI. In this scenario the Image component satisfies our rendering needs out of the box. Implemented as a Drop-In Item Renderer, the Image component takes any data property regardless of name and uses it as the Image component's source property value. Assuming our employee photo property contains a valid image path, the Image Drop-In Item Renderer will work perfectly and resolve the image path as an image in the UI.
    <!-- Drop-in Item Renderer: Image control -->
    <mx:DataGridColumn dataField="photo"
                       headerText="Employee Photo"
                       itemRenderer="mx.controls.Image"/>
    Drop-In Item Renderers are simple and easy to use and satisfy specific use cases nicely. However, they provide no flexibility whatsoever. If your needs are not satisfied by a Drop-In Item Renderer, you must create your own Item Renderer as an inline component or an external component.
    Inline Item Renderers
    Generally used for simple item rendering requiring minimal customization, inline Item Renderers are defined as a component nested within the MXML of your list-based control.
    It is important to note that Item Renderers nested within the itemrender property of a list-based control occupy a different scope than the list-based control. Any attempt to reference members (properties or methods) of the parent component from the nested Item Renderer component will result in a compile-time error. However, references to the members of the parent component can be achieved by utilizing the outerDocument object.
    <mx:DataGrid id="myGrid" dataProvider="{gridData}">
       <mx:columns>
          <mx:DataGridColumn headerText="Show Relevance">
             <mx:itemRenderer>
                <mx:Component>
                   <mx:Image source="{'assets/images/indicator_' + data.showRelevance + '.png'}"
                             toolTip="{(data.showRelevance == 1) ? 'On' : 'Off'}"
                             click="outerDocument.toggle()" />
                </mx:Component>
             </mx:itemRenderer>
          </mx:DataGridColumn>
       </mx:columns>
    </mx:DataGrid>
    Remember, rules of encapsulation still apply. Mark all properties or methods public if you want them accessible by your inline Item Renderer. In the previous example, the toggle() method must have a public access modifier to expose itself to the inline Item Renderer.
    public function toggle():void
    Inline Item Renderers can also be reusable by creating a named component instance outside of the list-based control. This component must have an id property and contain the rendering logic of the Item Renderer. Using data bindings, the component is assigned to the itemrenderer property of one or more data properties of a list-based control.
    <!-- Reusable inline Item Renderer -->
    <mx:Component id="ImageRenderer">
       <mx:VBox width="100%" height="140"
                horizontalAlign="center" verticalAlign="middle">
          <mx:Image source="{'assets/'+data.image}"/>
          <mx:Label text="{data.image}" />
       </mx:VBox>
    </mx:Component>
    <!-- Used within a list-based control-->
    <mx:DataGridColumn headerText="Image"
                       dataField="image" width="150"
                       itemRenderer="{ImageRenderer}"/>
    In the previous example, note that the Item Renderer component contains 2 UI controls – Image and Label. When using multiple controls within an Item Renderer, a layout container is required. In this example, a VBox was used.
    If this post answers your question or helps, please kindly mark it as such.
    Thanks,
    Bhasker Chari
    Message was edited by: BhaskerChari

  • Range component in custom item renderer

    Hi,
    I am trying to put a spark Range component into the labelItemRenderer for flex mobile. Everytime I add it I get the error: "Skin for (long directory name for my range component) cannot be found". The custom item renderer is an actionscipt class because I read this is the best way to make them for mobile. I'll put the error in the bottom of the post.
    If anyone has any idea why this could be happening or if anyone knows a possible way around this it would be extremely helpful. I basicaly just need a list where each item has a label on side and then a progress bar on the other side.
    Thanks.
    Here is the full error, ill put a star on the line where the addChild method gets called in my item renderer for the range component.
    Error: Skin for HoosFit0.TabbedViewNavigatorApplicationSkin5.tabbedNavigator.TabbedViewNavigatorSkin7.con tentGroup.ViewNavigator1.ViewNavigatorSkin12.contentGroup.
    FCfacilities139.SkinnableContainerSkin141.contentGroup.Group143.facilityList.ListSkin145.S croller147.ScrollerSkin148.DataGroup146.FCfacilitiesInnerClass0_157.Range154 cannot be found.
              at spark.components.supportClasses::SkinnableComponent/attachSkin()[E:\dev\4.y\frameworks\pr ojects\spark\src\spark\components\supportClasses\SkinnableComponent.as:698]
              at spark.components.supportClasses::SkinnableComponent/validateSkinChange()[E:\dev\4.y\frame works\projects\spark\src\spark\components\supportClasses\SkinnableComponent.as:443]
              at spark.components.supportClasses::SkinnableComponent/createChildren()[E:\dev\4.y\framework s\projects\spark\src\spark\components\supportClasses\SkinnableComponent.as:406]
              at mx.core::UIComponent/initialize()[E:\dev\4.y\frameworks\projects\framework\src\mx\core\UI Component.as:7634]
              at mx.core::UIComponent/http://www.adobe.com/2006/flex/mx/internal::childAdded()[E:\dev\4.y\frameworks\projects\framework\src\mx\core\UIComponent.as:7495]
              at mx.core::UIComponent/addChild()[E:\dev\4.y\frameworks\projects\framework\src\mx\core\UICo mponent.as:7176]
    *** at views::itemRenderer2/set data()[/Users/evan/Documents/Adobe Flash Builder 4.6/HoosFit/src/views/itemRenderer2.as:73]
              at spark.components::SkinnableDataContainer/updateRenderer()[E:\dev\4.y\frameworks\projects\ spark\src\spark\components\SkinnableDataContainer.as:606]
              at spark.components.supportClasses::ListBase/updateRenderer()[E:\dev\4.y\frameworks\projects \spark\src\spark\components\supportClasses\ListBase.as:1106]
              at spark.components::DataGroup/setUpItemRenderer()[E:\dev\4.y\frameworks\projects\spark\src\ spark\components\DataGroup.as:1157]
              at spark.components::DataGroup/initializeTypicalItem()[E:\dev\4.y\frameworks\projects\spark\ src\spark\components\DataGroup.as:327]
              at spark.components::DataGroup/ensureTypicalLayoutElement()[E:\dev\4.y\frameworks\projects\s park\src\spark\components\DataGroup.as:384]
              at spark.components::DataGroup/measure()[E:\dev\4.y\frameworks\projects\spark\src\spark\comp onents\DataGroup.as:1467]
              at mx.core::UIComponent/http://www.adobe.com/2006/flex/mx/internal::measureSizes()[E:\dev\4.y\frameworks\projects\framework\src\mx\core\UIComponent.as:8506]
              at mx.core::UIComponent/validateSize()[E:\dev\4.y\frameworks\projects\framework\src\mx\core\ UIComponent.as:8430]
              at mx.managers::LayoutManager/validateSize()[E:\dev\4.y\frameworks\projects\framework\src\mx \managers\LayoutManager.as:665]
              at mx.managers::LayoutManager/doPhasedInstantiation()[E:\dev\4.y\frameworks\projects\framewo rk\src\mx\managers\LayoutManager.as:816]
              at mx.managers::LayoutManager/doPhasedInstantiationCallback()[E:\dev\4.y\frameworks\projects \framework\src\mx\managers\LayoutManager.as:1180]

    Hi,
    I am trying to put a spark Range component into the labelItemRenderer for flex mobile. Everytime I add it I get the error: "Skin for (long directory name for my range component) cannot be found". The custom item renderer is an actionscipt class because I read this is the best way to make them for mobile. I'll put the error in the bottom of the post.
    If anyone has any idea why this could be happening or if anyone knows a possible way around this it would be extremely helpful. I basicaly just need a list where each item has a label on side and then a progress bar on the other side.
    Thanks.
    Here is the full error, ill put a star on the line where the addChild method gets called in my item renderer for the range component.
    Error: Skin for HoosFit0.TabbedViewNavigatorApplicationSkin5.tabbedNavigator.TabbedViewNavigatorSkin7.con tentGroup.ViewNavigator1.ViewNavigatorSkin12.contentGroup.
    FCfacilities139.SkinnableContainerSkin141.contentGroup.Group143.facilityList.ListSkin145.S croller147.ScrollerSkin148.DataGroup146.FCfacilitiesInnerClass0_157.Range154 cannot be found.
              at spark.components.supportClasses::SkinnableComponent/attachSkin()[E:\dev\4.y\frameworks\pr ojects\spark\src\spark\components\supportClasses\SkinnableComponent.as:698]
              at spark.components.supportClasses::SkinnableComponent/validateSkinChange()[E:\dev\4.y\frame works\projects\spark\src\spark\components\supportClasses\SkinnableComponent.as:443]
              at spark.components.supportClasses::SkinnableComponent/createChildren()[E:\dev\4.y\framework s\projects\spark\src\spark\components\supportClasses\SkinnableComponent.as:406]
              at mx.core::UIComponent/initialize()[E:\dev\4.y\frameworks\projects\framework\src\mx\core\UI Component.as:7634]
              at mx.core::UIComponent/http://www.adobe.com/2006/flex/mx/internal::childAdded()[E:\dev\4.y\frameworks\projects\framework\src\mx\core\UIComponent.as:7495]
              at mx.core::UIComponent/addChild()[E:\dev\4.y\frameworks\projects\framework\src\mx\core\UICo mponent.as:7176]
    *** at views::itemRenderer2/set data()[/Users/evan/Documents/Adobe Flash Builder 4.6/HoosFit/src/views/itemRenderer2.as:73]
              at spark.components::SkinnableDataContainer/updateRenderer()[E:\dev\4.y\frameworks\projects\ spark\src\spark\components\SkinnableDataContainer.as:606]
              at spark.components.supportClasses::ListBase/updateRenderer()[E:\dev\4.y\frameworks\projects \spark\src\spark\components\supportClasses\ListBase.as:1106]
              at spark.components::DataGroup/setUpItemRenderer()[E:\dev\4.y\frameworks\projects\spark\src\ spark\components\DataGroup.as:1157]
              at spark.components::DataGroup/initializeTypicalItem()[E:\dev\4.y\frameworks\projects\spark\ src\spark\components\DataGroup.as:327]
              at spark.components::DataGroup/ensureTypicalLayoutElement()[E:\dev\4.y\frameworks\projects\s park\src\spark\components\DataGroup.as:384]
              at spark.components::DataGroup/measure()[E:\dev\4.y\frameworks\projects\spark\src\spark\comp onents\DataGroup.as:1467]
              at mx.core::UIComponent/http://www.adobe.com/2006/flex/mx/internal::measureSizes()[E:\dev\4.y\frameworks\projects\framework\src\mx\core\UIComponent.as:8506]
              at mx.core::UIComponent/validateSize()[E:\dev\4.y\frameworks\projects\framework\src\mx\core\ UIComponent.as:8430]
              at mx.managers::LayoutManager/validateSize()[E:\dev\4.y\frameworks\projects\framework\src\mx \managers\LayoutManager.as:665]
              at mx.managers::LayoutManager/doPhasedInstantiation()[E:\dev\4.y\frameworks\projects\framewo rk\src\mx\managers\LayoutManager.as:816]
              at mx.managers::LayoutManager/doPhasedInstantiationCallback()[E:\dev\4.y\frameworks\projects \framework\src\mx\managers\LayoutManager.as:1180]

  • Any Help ? My Item Renderer fails with Reference Error: Error #1069:

    So I have a basic inline dropdownbox itemrenderer as shown below, But after I click it and select a value I get an error "ReferenceError: Error #1069: Property TELEPH_USE_TYPE_DESC not found".  I am guessing I am referencing something incorrectly. Any Ideas
    Code
    <mx:AdvancedDataGridColumn dataField="TELEPH_USE_TYPE_DESC" editorDataField="TELEPH_USE_TYPE_DESC">
        <mx:itemEditor>
            <fx:Component>            <s:MXAdvancedDataGridItemRenderer focusEnabled="true" height="22">
                    <s:DropDownList                     id="dd"
                        top="5"
                        left="5"
                        labelField="TELEPH_USE_TYPE_DESC"                   selectedItem="{data.TELEPH_USE_TYPE_DESC}"                   dataProvider="{parentDocument.tpUseAc}" />            </s:MXAdvancedDataGridItemRenderer>          </fx:Component>
        </mx:itemEditor></mx:AdvancedDataGridColumn> 

    TELEPH_USE_TYPE_DESC is a field on the data object, but not a property on the item renderer which is defined within the mx:itemEditor tag.
    You could add something like
    <mx:Script>
    <![CDATA[
        public function get newValue():Object
             return dd.selectedItem.TELEPH_USE_TYPE_DESC;
    \]\]\>
    </mx:Script>
    And change the editorDataField to “newValue”

  • Problem with checkbox item renderer in datagrid

    I have a data grid having check box as an item renderer. I have viewed many posts in this forum but nothing useful in my case. I am failed to bind my datagrid itemrenderer checkbox with the field of dataprovider i.e. listUnitMovement.CHECK_PATH. Then I have to traverse data provider to check which checkboxes are checked.
    [Bindable]
    var listUnitMovement:XMLList=null;                      
    In a function call
    public function init(event:ResultEvent):void
        listUnitMovement=event.result.unitmovement;
         <mx:DataGrid id="dg_country"
                               dataProvider="{listUnitMovement}"
                                  enabled="true">
                                <mx:columns>
                                   <mx:DataGridColumn>
                                        <mx:itemRenderer>
                                            <mx:Component>
                                                <mx:CheckBox selectedField="CHECK_PATH"  />
                                            </mx:Component>                                       
                                        </mx:itemRenderer>
                                    </mx:DataGridColumn>
                                    <mx:DataGridColumn headerText="Latitude" dataField="NEW_LAT" visible="false"/>
                                    <mx:DataGridColumn headerText="Longitude" dataField="NEW_LONG" visible="false"/>
                                   <mx:DataGridColumn>
                                        <mx:itemRenderer>
                                            <mx:Component>
                                                <mx:Button label="Details"/>
                                            </mx:Component>                                       
                                        </mx:itemRenderer>
                                    </mx:DataGridColumn>
                                </mx:columns>
                            </mx:DataGrid>

    Hi,
    Do you want to just check/uncheck the checkboxes based on the CHECK_PATH field.
    Do you want something like this...
    <?xml version="1.0" encoding="utf-8"?><mx:Application  xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
     <mx:Script>
    <![CDATA[
     import mx.collections.ArrayCollection;[
    Bindable] 
    private var listUnitMovement:ArrayCollection = new ArrayCollection([{CHECK_PATH:true,NEW_LAT:109.233,NEW_LONG:232.22},{CHECK_PATH:true,NEW_LAT:109.233,NEW_LONG:232.22},{CHECK_PATH:false,NEW_LAT:133.233,NEW_LONG:702.22}]);]]>
    </mx:Script>
     <mx:DataGrid dataProvider="{listUnitMovement}">
     <mx:columns>
     <mx:DataGridColumn>
     <mx:itemRenderer>
     <mx:Component>
     <mx:CheckBox selectedField="CHECK_PATH" change="data.CHECK_PATH=selected" />
     </mx:Component>  
    </mx:itemRenderer>
     </mx:DataGridColumn>
     <mx:DataGridColumn dataField="NEW_LAT"/>
     <mx:DataGridColumn dataField="NEW_LONG"/>
     </mx:columns>
     </mx:DataGrid>
    </mx:Application>
    Please let me know clearly what's your problem...Do you want to just bind the check box based on XmlList or something else..?
    Thanks,
    Bhasker Chari.S

  • Data provider problem in custom item renderer

    I have a complex, custom item renderer for a list. I add
    items that I extracted from an xml to the data provider using the
    IList interface. But when displaying the list, the items are all
    screwed up. Each rendered item has some parts which are initialized
    as different components depending on the values from the xml. This
    initialization is called in the item renderer for the
    creationComplete event.
    The weird thing is that when I output the dataProvider to
    check its values, some of the items have internal uids sometimes
    and sometimes they don't. If I output the dataProvider right after
    I add the items to it, none of them get internal uids. But from the
    initialize method, some of them do and some don't.
    To make things weirder, sometimes, as I scroll up and down
    the list, the dynamic components get all switched up. I'm either
    having a problem with internal uids or with the creation policies
    for lists. Or it's probably some simpler mistake I have yet to see.
    Anyone have any idea where the problem could lie? Any help is
    greatly appreciated.

    Any successful render must:
    1) override the set data property of the component
    Further, best practice is to store any data you need in the
    override set data(), and call invalidateProperties(). Then do the
    actual work in an override commitProperties() function.
    The framework is smart about when to call commitProperties
    efficiently. set data() gets called much more often.
    Tracy

  • Need for a Datagrid with variableRowHeight="true" and custom Item Renderer to display exact rows

    Hi again, developers:
    I'm in a search of a datagrid  with certain characteristics:
         - variableRowHeight = "true"
         - only one column
         - each row must have a custom item renderer with possibly different heights, and a fixed width
         - the datagrid must show always every item in the data provider with no vertical scroll bars, what means that the datagrid height must have always the exact height sum of all the item renderers it is displaying.
         - and no extra empty rows must appear in the last positions of the datagrid
    The last two requirements are something difficult to achieve... for some reason, empty rows appear at the last positions of the datagrid. I post what i've managed to get:
    <mx:Script>
         <![CDATA[
         private function resize():void
                    if (dg.dataProvider)
                        var h:Number = dg.measureHeightOfItems( -1, dg.dataProvider.length);
                        dg.height = h;
         ]]>
    </mx:Script>
    <mx:DataGrid id="dg" width="530" horizontalCenter="0" verticalScrollPolicy="off"
            dataProvider="{dp}"
            wordWrap="true" variableRowHeight="true" showHeaders="false" dataChange="resize()" height="{dg.measureHeightOfItems(-1,dg.dataProvider.length)}" click="Alert.show(dg.rowCount.toString());">
            <mx:columns>
                <mx:DataGridColumn headerText="ID" width="50">
                    <mx:itemRenderer>
                        <mx:Component>
                            <mx:TextArea height="{Math.random()*100}" wordWrap="true" backgroundColor="{Math.random() * 16777216}" paddingTop="0" paddingBottom="0"/>
                        </mx:Component>
                    </mx:itemRenderer>
                </mx:DataGridColumn>
            </mx:columns>
        </mx:DataGrid>

    Thanks Harui, but it doesn't help. If the border is set it will help, but the very big problem is the empty rows that appear at the end of the datagrid... I can't find a way of measuring correctly the height of the itemRenderers!
    I'll update this thread if I manage to do it.

  • Image in item renderer issue for List Components

    Hello,
    I have an issue when I use an item renderer with an image in
    it. This happens when I do this with a List or TileList component
    that has enough items to create a scroll bar. What happens is the
    images load fine, then I scroll down and the other items and their
    images start appearing, but then the first and last images start
    loading the wrong image. I'll scroll back up and the first item now
    has a different image, and when I scroll back down, the last images
    changes too.
    Has anyone had this problem with image itemrenderers in List
    components?
    Thanks for any help.
    Brade

    The creationComplete event is called ONCE and that's it. But
    each time an itemRenderer is recycled it will have its data
    property reset with new a new record from the dataProvider. Thus
    overriding the set data function lets you inspect the data and do
    what you want with it.
    Data binding in MXML <mx:Image source="{data.image}" />
    is set up by the Flex compiler. When the data property is reset it
    will trigger the data binding notifications. The Flex
    compiler-generated code will intercept that and update the Image
    source property.
    If you use MXML, then use data binding. If you write your
    itemRenderer in ActionScript, override the set data
    function.

  • Checkbox item renderer populated with data from 2 sources

    I have a list object that has a check box and a label (using an inline item renderer).  The list itself is populated with an array of objects and whether the checkbox is selected takes those objects and adds them to another list (for outbound purposes).  Since the selected list can change elsewhere in my app how do I keep the binding of selections consistent?  The dataprovider for my checkbox list is the first array of objects and is binded, but the second one (selected array) is not.  What would be the best way to provide that binding to make sure the selected is consistent when the second array changes.  Some of the code is below to better show...
    <cms:HilightList
         id = "distributorList"
         width = "100%"
         height = "100%"
         drawHighlight="{ViewUtils.drawHighlightIndicator}"
         drawSelection="{ViewUtils.drawHighlightIndicator}"
         dataProvider="{pmDistributors.distributors}">
         <mx:itemRenderer>
              <mx:Component>
                   <mx:HBox>
                        <mx:CheckBox
                                           selected = "{outerDocument.isSelected(data)}"
                               change = "{outerDocument.handleSelectedChange(event)}"/>
                        <mx:Label text="{data.name}"/>
                   </mx:HBox>
              </mx:Component>
         </mx:itemRenderer>
    </cms:HilightList>
    public function isSelected(item:Object):Boolean
         var partner:Partner = item as Partner;
         var selected:Boolean = false;
         for each(var schedPartner:Partner in scheduleAssets.partners)
              if(schedPartner.id == partner.id)
                   selected = true;
         return selected;
    public function handleSelectedChange(event:Event):void
         var partner:Partner = event.currentTarget.parent.data as Partner;
              if(event.currentTarget.selected)
                   addPartnerEvent(partner);
              } else {
                   removePartnerEvent(partner);

    Hi Aakcse,
    In this condition, you need to make use of both the Precedence Constraint between Control Flow Tasks and the Conditional Split Transformation. Supposing you get the value in the flat file and store it in a variable via Script Task, you can create two Data
    Flow Tasks, and connect the Script Task to the two DFTs.
    For the Precedence Constraint between the Script Task and the Data Flow Task 1, set the “Expression and Constraint” expression to @[User::vEntryStatus]=="Y". And for the Precedence Constraint between the Script Task and the Data Flow Task 2, set the “Expression
    and Constraint” expression to @[User::vEntryStatus]=="N".
    In Data Flow Task 1, add a Conditional Split Transformation with this expression [Entry]==”YES”, and direct this output to the destination component. In Data Flow Task 2, also add a Conditional Split Transformation with expression [Entry]==”NO”, and direct
    the output to the destination component.
    Regards,
    Mike Yin
    If you have any feedback on our support, please click here
    Mike Yin
    TechNet Community Support

  • Item renderer issue

    Hi,
    I have a comboBox as item renderer in my datagrid (comboBox item renderer code bellow).
    1. How can I remove the first blank item? My comboBox arrayCollection doesn't have 0 item.
    2. If I come back to the cell that it was already selected with a value from my comboBox, how can I set the selected item of my comboBox to be the same as the previus value? If I leave the comboBox without selection it will be blank as the 0 element.
    Please help.
    Thanks
    Johnny
    <?xml version="1.0" encoding="utf-8"?>
    <mx:ComboBox xmlns:mx="http://www.adobe.com/2006/mxml"
                 labelField="label" dataProvider="{acCombo}" rowCount="20"
                 change="onSelectionChange(event)" creationComplete="init()">
        <mx:Script>
            <![CDATA[
                import mx.collections.ArrayCollection;
                import mx.controls.dataGridClasses.DataGridListData;
                import mx.events.ListEvent;
                import mx.rpc.events.ResultEvent;
                [Bindable]private var acCombo:ArrayCollection = new ArrayCollection ([{id:1, label:"Item 01"},{id:2, label:"Item 02"},{id:3, label:"Item 03"},
                    {id:4, label:"Item 04"},{id:5, label:"Item 05"}]);
                private var _ownerData:Object;
                public function init():void
                    //init code
                override public function set data(value:Object):void
                    if (value){
                        _ownerData = value as Object;
                        var col:DataGridListData = DataGridListData(listData);
                        var item:Object = new Object;
                        var clabel:String = value[col.dataField];
                        var cid:int = value.id;
                        item.label = clabel;
                        item.id = cid;
                        selectedItem = item;
                override public function get data():Object
                    return _ownerData;
                override public function setFocus():void
                    super.setFocus();
                    open();
                private function onSelectionChange(e:ListEvent):void
                    if(selectedItem && _ownerData){
                        var col:DataGridListData = DataGridListData(listData);
                        var clabel:String = selectedItem.label;
                        var cid:int = selectedItem.id;
                        _ownerData[col.dataField] = clabel;
                        _ownerData[id] = cid;
            ]]>
        </mx:Script>
    </mx:ComboBox>

    Hi,
    I created a sample, maybe someone can see the issue for me
    Thanks!
    <?xml version="1.0" encoding="utf-8"?>
    <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" viewSourceURL="srcview/index.html"
                    creationComplete="init()">
        <mx:Script>
            <![CDATA[
                import mx.events.CollectionEvent;
                import mx.events.DataGridEvent;
                import com.myItemEditor;
                import mx.collections.ArrayCollection;
                [Bindable] private var acExecution:ArrayCollection = new ArrayCollection([
                    {Territory:"Arizona", Territory_Rep:"Barbara Jennings", ITEM_ID:1, ITEM_NAME:"Item 01"},
                    {Territory:"Central California", Territory_Rep:"Joe Smith", ITEM_ID:2, ITEM_NAME:"Item 02"},
                    {Territory:"Nevada", Territory_Rep:"Bethany Pittman", ITEM_ID:2, ITEM_NAME:"Item 02"}, 
                    {Territory:"Northern California", Territory_Rep:"T.R. Smith", ITEM_ID:1, ITEM_NAME:"Item 01"},
                    {Territory:"Southern California", Territory_Rep:"Jane Grove", ITEM_ID:3, ITEM_NAME:"Item 03"}
                private function init():void
                private function onItemEditEnd(e:DataGridEvent):void
                    var cEditor:myItemEditor = dgCustomEditor.itemEditorInstance as myItemEditor;
                    var item:Object = cEditor.selectedItem;
                    acExecution.refresh();
            ]]>
        </mx:Script>
        <mx:DataGrid id="dgCustomEditor" dataProvider="{acExecution}" height="160"
                     editable="true" itemEditEnd="onItemEditEnd(event)">
            <mx:columns>
                <mx:DataGridColumn headerText="Territory" dataField="Territory" width="60"
                                   editable="false"/>
                <mx:DataGridColumn headerText="Territory Rep" dataField="Territory_Rep" width="60"
                                   editable="false"/>
                <mx:DataGridColumn headerText="Item ID" dataField="ITEM_ID" width="60"
                                   editable="false"/>
                <mx:DataGridColumn headerText="Item Name" dataField="ITEM_NAME" width="160" itemEditor="com.myItemEditor" />
            </mx:columns>
        </mx:DataGrid>
    </mx:Application>
    Item Editor component
    <?xml version="1.0" encoding="utf-8"?>
    <mx:ComboBox xmlns:mx="http://www.adobe.com/2006/mxml"
                 labelField="LABEL" dataProvider="{acCombo}" rowCount="20"
                 change="onSelectionChange(event)" creationComplete="init()">
        <mx:Script>
            <![CDATA[
                import mx.events.ListEvent;
                import mx.controls.dataGridClasses.DataGridListData;
                import mx.rpc.events.ResultEvent;
                import mx.collections.ArrayCollection;
                [Bindable]private var acCombo:ArrayCollection = new ArrayCollection ([{ID:1, LABEL:"Item 01"},{ID:2, LABEL:"Item 02"},{ID:3, LABEL:"Item 03"},
                    {ID:4, LABEL:"Item 04"},{ID:5, LABEL:"Item 05"}]);
                private var _ownerData:Object;
                private function init():void
                    //init code
                override public function set data(value:Object):void
                    if (value){
                        _ownerData = value as Object;
                        var col:DataGridListData = DataGridListData(listData);
                        var item:Object = new Object;
                        var clabel:String = value[col.dataField];
                        var cid:int = value["ITEM_ID"];
                        item.LABEL = clabel;
                        item.ID = cid;
                        selectedItem = item;
                override public function get data():Object
                    return _ownerData;
                override public function setFocus():void
                    super.setFocus();
                    open();
                private function onSelectionChange(e:ListEvent):void
                    if(selectedItem && _ownerData){
                        var col:DataGridListData = DataGridListData(listData);
                        var clabel:String = selectedItem.LABEL;
                        var cid:int = selectedItem.ID;
                        _ownerData[col.dataField] = clabel;
                        _ownerData["ITEM_ID"] = cid;
            ]]>
        </mx:Script>
    </mx:ComboBox>

  • Item renderer concept in Grid - Grid ITem

    Hi All,
         I am using grid, grid items in my app to generate a view. I can not attain that view using datagrid control. So i want to speed up processing in my layout.
    When i give data to my layout (using grid - grid item) it takes enarmous time to load. It adds lot of weight to my app. App get hanged while scrolling. Is there any possibility to acheive item renderer concept in my Grid - Grdi item layout.
    Note: currently using Flex 3.2 for this. Ready to switch to Flex 4.5 if it is possible. But need to use mx component.
    Sathyamoorthi.

    Thanx for reply.But this is not what i am looking for.I need
    to apply different colors for each bars.I am generating charts
    dynamically.The item renderer is working fine.But at specific
    condition the item renderer shold ne removed from the chart series

  • Datagrid Drop Down Item renderer Scroll Problem

    Hi,
    I am having a problem with an drop down item renderer on a Datagrid.  When ever the datagrid is displayed and the cell is clicked on i want this to display a drop down list of objects.  I can get the drop down to appear with the list of objects.  H
     owever the scrollbar does not work on this item to allow the user to scroll through all the objects.  If you use the mouse wheel you can scroll down through them all but not when you try and click on the scroll bar to drag down.  Below is the code used.  Any advice why this might be happening?? 
    <mx:DataGridColumn headerText="Widget"
    dataField="WidgetName"
    editable="true"  headerWordWrap="false" textAlign="center" width="100"
    editorDataField="Widget">
    <mx:itemEditor>
    <fx:Component>
    <s:MXDataGridItemRenderer focusEnabled="true" height="22" >
    <fx:Script>
    <![CDATA[               
    import mx.events.FlexEvent;
    import spark.events.IndexChangeEvent;
    private var selectedWidget:Widget = null;
    public function get ccyPair():String {
    return  ddlCcyPairs.selectedItem.Widget;
    override protected function commitProperties():void {
    super.commitProperties();                
    trace("Commit .......");
    protected function ddlCcyPairs_changeHandler(event:IndexChangeEvent):void {
    for each(var ccyP:CurrencyPair in ddlCcyPairs.dataProvider) {
    if (ccyP.ccyPair == ddlCcyPairs.selectedItem.ccyPair) {
    selectedWidget = ccyP;
    ddlCcyPairs.selectedItem = selectedWidget;
    protected function ddlCcyPairs_creationCompleteHandler(event:FlexEvent):void {                 
    for each(var ccyP:CurrencyPair in ddlCcyPairs.dataProvider) {
    if (ccyP.ccyPair ==  data.ccyPairName) {
    selectedWidget = ccyP;
    ddlCcyPairs.selectedItem = selectedWidget;
    ]]>
    </fx:Script>
    <s:DropDownList id="ddlWidgets" width="100%"
    dataProvider="{parentApplication.Widgets}"
    labelField="name"              
    selectedItem="selectedWidget"
    creationComplete="ddlWidgets_creationCompleteHandler(event)"
    change="ddlWidgets_changeHandler(event)"/>
    </s:MXDataGridItemRenderer>
    </fx:Component>
    </mx:itemEditor>
    </mx:DataGridColumn>

    Hi, Post a test code.... It will be a lot easier to help you Mich

  • Item Renderer in a Datagrid

    I'm struggling with how to make a check mark ( image ) show
    up or not based on the value of some data in each datagrid line
    item. I'm using an item renderer but I'm missing something. Any
    help would be greatly appreciated.
    thanks,
    STeveR

    The following is my entire itemrenderer...please excuse any
    bad style as this is a WIProgress..
    Its probably easier to quote the adobe docs on listdata...If
    a component implements the IDropInListItemRenderer interface, you
    can use its listData property to obtain information about the data
    passed to the component when you use the component in an item
    renderer or item editor..I made sure the component implements the
    interface as you can see in the code at the top of component. Then
    add the couple of required functions regarding listdata, then you
    can access the listdata in your own functions in the renderer, like
    i do in set data function.
    this.BTN_***_mark.label =
    value[DataGridListData(listData).dataField];
    this line assigns the value from my datagrid to the renderers
    button label. (this renderer is a button that the user can press)
    so i want the buttons label to show the value coming in from the
    datagrid. So listdata is just a way to
    explicitly get the column name where the current data is
    being sourced from in your datagrid.As the grid is being rendered,
    it renders row by row. In each row it goes thru your columns . SO
    initially it for row 1 it would begin rendering firstname, surname,
    mark, average...etc etc. If i put an alert in on
    value[DataGridListData(listData).dataField
    I would see these column names popping up as they are getting
    rendered in the DGrid.
    Hope this helps...
    <!-- <?xml version="1.0" encoding="utf-8"?>-->
    <mx:VBox xmlns:mx="
    http://www.adobe.com/2006/mxml"
    creationComplete="init()" width="74" height="30"
    horizontalAlign="center" verticalAlign="middle"
    implements="mx.core.IFactory,mx.controls.listClasses.IDropInListItemRenderer">
    <mx:Metadata>
    </mx:Metadata>
    <mx:Script>
    <![CDATA[
    import mx.managers.PopUpManager;
    import mx.controls.DataGrid;
    import mx.utils.ArrayUtil;
    import mx.collections.ArrayCollection;
    import mx.collections.IViewCursor;
    import mx.controls.Alert;
    import mx.events.*;
    import mx.controls.dataGridClasses.DataGridListData;
    import mx.controls.listClasses.BaseListData;
    import mx.controls.dataGridClasses.DataGridColumn;
    import mx.containers.TitleWindow;
    private var panel:AssessmentMarkPopup = new
    AssessmentMarkPopup();
    var the_val = 0;
    var col_index:int;
    private var _listData:BaseListData;
    public function get listData() : BaseListData
    return _listData;
    public function set listData( value:BaseListData ) : void
    _listData = value;
    private function showLoginForm():void {
    var pop:AssessmentMarkPopup =
    AssessmentMarkPopup(PopUpManager.createPopUp(this,AssessmentMarkPopup,true));
    pop.addEventListener("closepopup",onClose);
    pop.TXT_***_mark.text = this.BTN_***_mark.label;
    var row:int =
    this.parentApplication.DG_class_students.selectedIndex;
    pop.student_name =
    this.parentApplication.DG_class_students.selectedItem.firstname + "
    " + this.parentApplication.DG_class_students.selectedItem.lastname;
    private function onClose(e:MyClosePopupEvent):void{
    this.BTN_***_mark.label = e.data.mark;
    public function newInstance():*
    return new MarkEntry();
    public override function get data():Object
    return super.data;
    override public function set data(value:Object):void {
    var dg:DataGrid = (listData) ? DataGrid(listData.owner) :
    null;
    var column:DataGridColumn = (dg) ?
    dg.columns[listData.columnIndex] as DataGridColumn : null;
    col_index = listData.columnIndex;
    var str:String = String(column.dataField);
    this.BTN_***_mark.label =
    value[DataGridListData(listData).dataField];
    ]]>
    </mx:Script>
    <mx:Button click="showLoginForm()" id="BTN_***_mark"
    width="52"/>
    </mx:VBox>

  • Item Renderer for DataGrid

    I have a button component as a Item renderer in the column of
    the datagrid .
    I am not able to access the Itemrenderer component(which I
    declared in other mxml file in the datagrid)
    This is the data grid where I have the Itemrenderer:
    <mx:DataGrid id="dgCondition1"
    variableRowHeight="true" width="100%" height="150"
    verticalScrollPolicy="auto" editable="true"
    dataProvider="{initDataGrid_Create}" >
    <mx:columns>
    <mx:DataGridColumn headerText="" dataField="conditi"
    />
    <mx:DataGridColumn headerText="Condition"
    dataField="syntax" width="300" />
    <mx:DataGridColumn headerText="1" dataField="value"
    width="80" editable="false" itemRenderer="buttonRenderer"/>
    <mx:DataGridColumn dataField="value" headerText="2"
    itemRenderer="buttonRenderer" />
    I created a new mxml component for this button component
    .(buttonRenderer.mxml)
    <?xml version="1.0" encoding="utf-8"?>
    <mx:VBox xmlns:mx="
    http://www.adobe.com/2006/mxml"
    width="400" height="300">
    <mx:Script source="..TableDataGridBtn.as" />
    <mx:Button id="col1" label="" width="75"
    click="getDetail(event,col1)" />
    </mx:VBox>
    The Problem is I am not able to access the buttonRenderer in
    the datagrid itemRenderer tag .
    It says "Access of Undefined Property buttonRenderer".

    "nash99" <[email protected]> wrote in
    message
    news:g7alc5$nkd$[email protected]..
    > So
    > Is it that I can Use this ItemRenderer tag in the
    Application Tags only
    > Is there any other way I can use them in mxml components
    because I am
    > using
    > the same button in 16 datagrid columns , I dont wan't to
    make the code
    > look
    > redundant.
    http://www.adobe.com/livedocs/flex/3/html/help.html?content=intro_3.html

  • Item renderer on DataGrid (not DataGridColumn)

    It seems that all the published examples of using an item renderer on a DataGrid use the itemRenderer property of DataGridColumn.
    I don't think I can do this because my columns are created at run time, depending on the contents of the data provider.
    I have therefore tried to assign my item renderer (a subclass of Canvas) directly to the DataGrid.
    1. This works in MXML when the renderer is inline.
    2. It sees to work when the renderer is an Actionscript class assigned to the DataGrid's itemRenderer property.
    3. It does NOT work when the renderer is Flex component assigned to the DataGrid's itemRenderer property. This compiler error is reported: Initializer for 'itemRenderer': cannot parse value of type mx.core.IFactory from text 'comp:CellRenderer'.
    I prefer to use the last method. Is there a way to fix this error?
    If not, is it possible to attach the item renderer to each DataGridColumn as it is created? DataGrid does not seem to have a suitable event that reports when a column is created.
    Aplogies if this is elementary stuff. I am a real Flex newbie. I am using Flex Builder 3.0
    Andy Kirkham

    A code example would be helpful here, but from your error message it
    looks like you may be doing the following
    <mx:DataGrid itemRenderer="comp:CellRenderer"/>
    Instead of  this, you need to use the fully qualified class name of
    CellRenderer, eg.
    com.renderers.CellRenderer
    Look at the definition of 'comp' towards the top of your MXML file, it
    will be something like:
    xmlns:comp="blah.blah.blah.*"
    Your itemRenderer property should then be set to:
    blah.blah.blah.CellRenderer

Maybe you are looking for

  • Table of Contents navigation not working

    I am using Captivate 6.  I have a separate TOC, with only 4 items.  'Self paced Learning' and 'Enable Navigation' are both checked. However, when I publish to SWF, or preview, the navigation does not work. Due to IT team desktop image restrictions, I

  • Hooking iPod to aux outlet in Honda Ridgeline

    I have the 5th gen iPod (60 gig). My Honda truck came with an aux audio jack in the glovebox area. Is there an Apple/3rd party cable available or do I have to pay Honda $214 for their install? Thanks.

  • Versions of HFM

    Hi gurus, if u know the various versions of hyperion financial management(starting to latest(11 version)) and features please reply soon. Regards Rajips

  • We 19  rest tool for idoc processing

    hi to all abap gurus i heard that we19 is test tool for idoc proceesing and it is also also used for idoc deletion . may i know what is idoc testing why it is required . can u pls explain n in detail ? and so many options are there in we19 tcode like

  • Re-initialize the data during running the program

    Any function in the Labview that can help me to re-initialize the data during running the program? Thanks! Regards, Ivan