Datagrid: Custom Itemrenderer

Hello,
my Datagrid consists of a variable number of columns that are
handled by the same Itemrenderer. Now I have the problem that I
can't find out which column I belong to when I am in the override
set data function.
Any hints how i can back track to what column the "current"
Itemrenderer belongs or is processing at that moment?
Thanks and GzG
Nerun

I had the exact requirement. Multiple columns using the same
item renderer and needing to know what was clicked. Essentially I
solved it in three steps.
1. Override the datagid to add your own custom events;
package com.psc.eis.view
import mx.controls.DataGrid;
import mx.events.ListEvent;
[Event( name = "MyViewCurrentEvent", type =
"mx.events.ListEvent" ) ]
[Event( name = "MyEditCurrentEvent", type =
"mx.events.ListEvent" ) ]
[Event( name = "MyDeleteCurrentEvent", type =
"mx.events.ListEvent" ) ]
[Event( name = "MySearchEvent", type = "mx.events.ListEvent"
public class MyDataGrid extends DataGrid
public function MyDataGrid() { super()}
public static var
MY_VIEW_CURRENT_EVENT:String="MyViewCurrentEvent";
public static var
MY_EDIT_CURRENT_EVENT:String="MyEditCurrentEvent";
public static var
MY_DELETE_CURRENT_EVENT:String="MyDeleteCurrentEvent";
public static var MY_SEARCH_EVENT : String =
"MySearchEvent";
2. In your item renderer create a click handler that
dispatches the appropriate event
<?xml version="1.0" encoding="utf-8"?>
<mx:HBox xmlns:mx="
http://www.adobe.com/2006/mxml"
horizontalAlign="center">
<mx:Script>
<![CDATA[
private function clickHandler() : void
import mx.events.ListEvent;
var event:ListEvent = new ListEvent(
MyDataGrid.MY_EDIT_CURRENT_EVENT );
event.itemRenderer = this;
owner.dispatchEvent(event);
]]>
</mx:Script>
<mx:Image id="imageDelete" source="images/bluepencil.gif"
width="20" click="clickHandler()"/>
</mx:HBox>
3. In your mxml for the datagrid setup the event handler
<psc:MyDataGrid id="dataGridProjects" dataProvider="{. .
MyViewCurrentEvent="viewCurrentHandler(event)"
MyEditCurrentEvent="editCurrentHandler(event)"
MyDeleteCurrentEvent="deleteCurrentHandler(event)"
>
That's it.

Similar Messages

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

  • DataGrid: custom ItemRenderer changes Header renderer

    If I assign custom ItemRenderer to a DataGrid, this also affects headers, i.e. headers start looking as the fields in a grid. Not only that, but it seems that render is much worse and it really looks bad. Is this how it's supposed to be, is there a workaround to keep the headers as they should be and just change the actual renderers in the grid?

    Post a bit of your code.
    Sincerely,
    Michael
    Sent from my iPhone
    El 16/07/2009, a las 23:24, mraak <[email protected]> escribió:
    >
    If I assign custom ItemRenderer to a DataGrid, this also affects 
    headers, i.e. headers start looking as the fields in a grid. Not 
    only that, but it seems that render is much worse and it really 
    looks bad. Is this how it's supposed to be, is there a workaround to 
    keep the headers as they should be and just change the actual 
    renderers in the grid?
    >

  • How To Update Custom ItemRenderer (Image) on DataGrid Edit

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

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

  • A DataGrid with a Custom ItemRenderer

    Hi all,
    I have a DataGrid whose DataProvider is bound to a simple Array. I have a custom ItemRenderer that includes a button that can remove the item itself (I don't want two separate columns with a remove button in one of them). However, I don't understand the behaviour - clicking the button rearranges the data in the DataGrid and sometimes duplicate the entries! See the example attached. Any idea what's happening?
    Martin.
    <?xml version="1.0" encoding="utf-8"?>
    <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="onCreationComplete();" xmlns:local="*">
        <mx:Script>
            <![CDATA[
                [Bindable]
                public var _data : Array;
                protected function onCreationComplete() : void {
                    _data = new Array();
                    _data.push(1, 2, 3, 4, 5);
            ]]>
        </mx:Script>
        <mx:VBox>
            <mx:DataGrid dataProvider="{_data}">
                <mx:columns>
                    <mx:DataGridColumn>
                        <mx:itemRenderer>
                            <mx:Component>
                                <mx:HBox implements="mx.controls.listClasses.IDropInListItemRenderer" creationComplete="dataLabel.text = String(data);">
                                    <mx:Script>
                                        <![CDATA[
                                            import mx.collections.ArrayCollection;
                                            import mx.controls.DataGrid;
                                            import mx.controls.listClasses.BaseListData;
                                            protected var _listData : BaseListData;
                                            public function get listData() : BaseListData {
                                                return _listData;
                                            public function set listData(d : BaseListData) : void {
                                                _listData = d;
                                            protected function onClick(e : Event) : void {
                                                var dp : ArrayCollection = (owner as DataGrid).dataProvider as ArrayCollection;
                                                dp.removeItemAt(listData.rowIndex);
                                        ]]>
                                    </mx:Script>
                                    <mx:Label id="dataLabel" width="100%" />
                                    <mx:Button click="onClick(event);"/>
                                </mx:HBox>
                            </mx:Component>
                        </mx:itemRenderer>
                    </mx:DataGridColumn>
                </mx:columns>
            </mx:DataGrid>
        </mx:VBox>
    </mx:Application>

    creationComplete is rarely used in renderers.  See the itemrenderer posts on my blog
    Alex Harui
    Flex SDK Developer
    Adobe Systems Inc.
    Blog: http://blogs.adobe.com/aharui

  • DataGrid tooltip doesn't work for customized itemRenderer

    I have a DataGrid with one column is a customized renderer,
    when I try to use the dataTripFunc, it is not showing tooltips,
    same function works for the other non-customized column, here is
    the code:
    <mx:DataGrid id="myDataGrid" dataProvider="{dataContent}"
    width="100%" height="100%">
    <mx:columns>
    <mx:DataGridColumn dataField="name" headerText=""/>
    <mx:DataGridColumn dataField="DateTime"
    headerText="DateTime" showDataTips="true"
    dataTipFunction="cellDataTipFunc"/>
    <mx:DataGridColumn dataField="ImgBar" headerText="ImgBar"
    itemRenderer="ImgBarCell" minWidth="40" showDataTips="true"
    dataTipFunction="cellDataTipFunc"/>
    </mx:columns>
    </mx:DataGrid>
    public function cellDataTipFunc(item:Object):String {
    return "hello world";
    Where the itemRenderer -- "ImgBarCell" is a customized HBox
    component with a label and image on it.
    The tooltip -- "helloworld" shows up for column "DateTime",
    but not for customized ImgBar.
    Does this one have anything to do with event generation for
    customized itemRenderer? Or a bug in flex2?

    Hi
    The TREX server (service) must started and be contactable by RFC - this can be checked by carrying out the actions listed above. (Refer OSS Note - 866547 Error when accessing TREX server for more details )
    <b>Please have a look at the following SAP OSS Note, which will help -></b>
    Note 851106 - Search in catalog from SRM leads to "Service not reachable"
    <u>Other related OSS Notes</u>
    Note 973594 Cross Catalog Search - Configuration
    Note 894717 Items from Cross Catalogs Result does not appears in step 2
    Note 803731 Cross-category search returns no result
    Note 847137 OCI, cross-catalog search: detail display
    Note 996885 Cross Catalog Search - Timeout while accessing MDM Catalog
    1023487 cross-catalog-serach in portal opens up a duplicate window
    1020025 Item detail display in Cross Catalog Search
    1027352 Item detail display in Cross Catalog Search
    Note 866547 - Error when accessing TREX server
    Note 988427 - Update to TREX 6.1 Rev 27
    Note 994623 - Hierarchy Buffer and BIA
    Note 1030056 - Improvement in the Search within Results feature of CSE
    Note 798988 CCM/CSE: Sorting sometimes returns no results
    Note 778688 TREX_INDEX_MANAGER unit test update_view(): incorrect search
    Note 808754 Display sequence of the characteristics is not changeable
    Note 794325 - Error in OCI transfer in the BAdI /CCM/OCI_SCALEPRI
    Note 745235 Search ability changes to cross-catalog characteristics
    Note 724097 - Search of the comp. in case of structured characteristics
    Note 743643 Search ability change in cross-catalog characteristics
    Note 847551 Displaying date, time, and timestamp in the CSE
    Note 750756 Program for the deletion/clean up of TREX indexes
    Do update me as well.
    Regards
    - Atul

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

  • Can't focus on custom itemRenderer?

    I have made a custom itemRenderer doubling as an itemEditor
    following the guidelines in the documentation.
    However, even though I have set the rendererIsEditor="true",
    when tabbing amongst other editable fields, the controls inside the
    itemRenderer do not receive focus. I can't help but think this is
    an oversight/bug but is there any way to jury-rig the itemRenderer
    to focus properly? At the moment my component is simply a CheckBox
    inside an HBox.
    Anyway, here is my code so you can see for yourself (I have
    included a CheckBox as itemRenderer so you can see the *desired*
    effect.
    <?xml version="1.0" encoding="utf-8"?>
    <mx:Application
    xmlns:mx="
    http://www.adobe.com/2006/mxml"
    layout="vertical">
    <mx:Script>
    <![CDATA[
    import mx.controls.dataGridClasses.DataGridListData;
    import mx.controls.Alert;
    [Bindable]
    public var dp:Array = [{num:2, bool:true}, {num:3,
    bool:false}];
    ]]>
    </mx:Script>
    <mx:DataGrid id="test" editable="true"
    dataProvider="{dp}">
    <mx:columns>
    <mx:DataGridColumn dataField="num" headerText="num" />
    <mx:DataGridColumn dataField="bool"
    headerText="Sent"
    itemRenderer="mx.controls.CheckBox"
    rendererIsEditor="true" editorDataField="selected" />
    <mx:DataGridColumn dataField="num" headerText="num"
    editable="true" />
    <mx:DataGridColumn dataField="bool" headerText="Sent"
    rendererIsEditor="true" editorDataField="blorch">
    <mx:itemRenderer>
    <mx:Component>
    <mx:HBox horizontalAlign="center">
    <mx:Boolean id="blorch" />
    <mx:CheckBox id="check" selected="{data.bool}"
    change="blorch=check.selected" />
    </mx:HBox>
    </mx:Component>
    </mx:itemRenderer>
    </mx:DataGridColumn>
    <mx:DataGridColumn dataField="num" headerText="num"
    editable="true" />
    </mx:columns>
    </mx:DataGrid>
    </mx:Application>

    nevermind... I found the answer a few pages later in the
    docs...
    you have to implement the IFocusManagerComponent interface
    and then override drawFocus as below to set the focus on the
    checkBox... hope it works for multiple controls...
    <mx:HBox horizontalAlign="center"
    backgroundColor="#9933EE"
    implements="mx.managers.IFocusManagerComponent">
    <mx:Script>
    <![CDATA[
    override public function drawFocus(focused:Boolean):void {
    check.setFocus();
    ]]>
    </mx:Script>
    <mx:Boolean id="blorch" />
    <mx:CheckBox id="check" selected="{data.bool}"
    change="blorch=check.selected"
    updateComplete="blorch=check.selected" />
    </mx:HBox>

  • ComboBox with custom ItemRenderer

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

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

  • Forcing custom itemRenderer to updateDisplayList?

    Hi, I'm new to flex, and was having some trouble.
    In my project, I have a DataGrid, and a
    BarChart->BarSeries. The DataGrid and the BarSeries share the
    same DataProvider. I've made a custom itemRenderer, so that I can
    click on Bars in the BarSeries and have them be highlighted in
    black. This is done by having the itemRenderer listen for a CLICK
    event, changing a variable that stores what color I want, then
    calling invalidateDisplayList() to have updateDisplayList update
    the display.
    Since DataGrid and BarSeries share the same DataProvider,
    elements in the DataGrid match up with elements in the BarSeries.
    Therefore, I would like to be able to have a user click on an item
    in the DataGrid, and have the associated bar in the BarSeries chart
    become highlighted. However, I can't find a way to get the
    itemRenderer to call updateDisplayList from outside of the
    itemRenderer itself. I thought that calling invalidateDisplayList()
    using the BarChart's id or the BarSeries id would force the
    itemRenderer for the BarSeries to call updateDisplayList() and
    update itself, but by using the debug feature, I have found that it
    does not do this. Does anyone have any advice for how I would be
    able to click on a DataGrid item and have it highlight the
    corresponding item in the BarChart?
    Thanks!

    Hi, I'm new to flex, and was having some trouble.
    In my project, I have a DataGrid, and a
    BarChart->BarSeries. The DataGrid and the BarSeries share the
    same DataProvider. I've made a custom itemRenderer, so that I can
    click on Bars in the BarSeries and have them be highlighted in
    black. This is done by having the itemRenderer listen for a CLICK
    event, changing a variable that stores what color I want, then
    calling invalidateDisplayList() to have updateDisplayList update
    the display.
    Since DataGrid and BarSeries share the same DataProvider,
    elements in the DataGrid match up with elements in the BarSeries.
    Therefore, I would like to be able to have a user click on an item
    in the DataGrid, and have the associated bar in the BarSeries chart
    become highlighted. However, I can't find a way to get the
    itemRenderer to call updateDisplayList from outside of the
    itemRenderer itself. I thought that calling invalidateDisplayList()
    using the BarChart's id or the BarSeries id would force the
    itemRenderer for the BarSeries to call updateDisplayList() and
    update itself, but by using the debug feature, I have found that it
    does not do this. Does anyone have any advice for how I would be
    able to click on a DataGrid item and have it highlight the
    corresponding item in the BarChart?
    Thanks!

  • Custom ItemRenderer Problem

    Hello,
    I have a requirement to display an image in some rows in the
    datagrid based on a flag obtained from the database. To achieve
    this, I am using a custom itemrenderer for that particular column
    and on a simple check if the value obtained for that particular row
    is 1 then I show the image, else I leave it blank (i.e set the
    image visibility to false).
    Here is a snippet of the code:
    Custom ItemRenderer
    <mx:HBox .... creationComplete="init();">
    <mx:Script>
    <![CDATA[
    public function init( ):void {
    // Check if the flag is 0 or 1 to determine whether to show
    or hide the image
    if(data.@FLAG == 0) {
    img.visible = false;
    ]]>
    </mx:Script>
    <mx:Image id="img" source="something.gif" />
    </mx:HBox>
    Main Application
    <mx:Application .........>
    <mx:DataGrid dataProvider="{myXML.item}" ... >
    <mx:columns>
    <mx:DataGridColumn dataField="@FLAG" headerText="Image"
    itemRenderer="CustomItemRenderer" />
    ......... // Other columns
    </mx:columns>
    <mx:DataGrid>
    </mx:Application>
    This code seems to work to a certain level. However, here are
    some problems that i'm facing and would like to know if this is the
    right approach:
    1. The check to determine whether to show the image doesn't
    function well. It shows the image when the flag is 0 and sometimes
    doesn't show the image when the flag is 1.
    2. Upon scrolling or sorting of the datagrid the results of
    the column randomly get messed up losing the images for the ones it
    had before scrolling or sorting and sometimes placing the image in
    another row it does not belong to.
    Can anyone please guide me if they have worked on a similar
    requirement and how it can be achieved. My feeling is that I am
    performing the check in the wrong method. I tried doing it by
    overriding the set data method but that has the scroll problem and
    eventually makes all the images visible initially disappear after
    scrolling or sorting.
    Any help will be much appreciated.
    Thank you.

    Override the set data property and move the code written in
    init() method there:
    override public function set data(value:Object):void {
    super.data = value;
    // Check if the flag is 0 or 1 to determine whether to show
    or hide the image
    if(data.@FLAG == 0) {
    img.visible = false;
    once it works, and there is no reason why it shouldn't, read
    up more on life cycle of renderers in the docs.
    ATTA

  • Custom itemRenderer - Bug?

    Hi, I have an example of some code that I can't figure out.
    What I'm doing may not be the best way to do what I want, but I
    believe is should work, and can't figure out why it doesn't. I have
    a datagrid with two columns, and the second column uses a custom
    itemRenderer to draw multiple circles depending on nested XML data
    for that row. In the
    set data function of my itemRenderer, I'm trying to get the
    width of the column, and use that to calculate where to put my
    circle, as a value of 1 to 10.
    - The first time, the
    set data is called four times where there are three rows
    - The first time it's called, this.width is zero
    - When resizing column widths, set data is called again - the
    first time only for the 2nd and 3rd rows, but with the correct
    width
    - Subsequent times it's called for all three rows, but the
    first row uses the LAST width, not the new width
    Any ideas? Here's my code:
    Project name is FlexSample, first file is FlexSample.mxml,
    then other two files are MyComponents/MyItemRenderer.as and
    MyComponents/PointComponent.as
    FlexSample.mxml
    <?xml version="1.0" encoding="utf-8"?>
    <mx:Application xmlns:mx="
    http://www.adobe.com/2006/mxml"
    xmlns="*"
    width="100%" height="100%"
    initialize="init()" horizontalGap="0" verticalGap="0" >
    <mx:Script>
    <![CDATA[
    import mx.events.ResizeEvent;
    import mx.controls.Alert;
    import mx.rpc.events.ResultEvent;
    import mx.rpc.events.FaultEvent;
    import mx.rpc.http.HTTPService;
    import mx.events.*;
    [Bindable]
    public var myXML:XML=
    <ROWSET>
    <ROW>
    <POINTS>
    <POINT>
    <POINT_ID>90686</POINT_ID>
    <X_VALUE>2</X_VALUE>
    </POINT>
    <POINT>
    <POINT_ID>90806</POINT_ID>
    <X_VALUE>8</X_VALUE>
    </POINT>
    </POINTS>
    <NOTE_TX>Points are 2 and 8</NOTE_TX>
    </ROW>
    <ROW>
    <POINTS>
    <POINT>
    <POINT_ID>90111</POINT_ID>
    <X_VALUE>4</X_VALUE>
    </POINT>
    <POINT>
    <POINT_ID>90222</POINT_ID>
    <X_VALUE>6</X_VALUE>
    </POINT>
    </POINTS>
    <NOTE_TX>Points are 4 and 6</NOTE_TX>
    </ROW>
    <ROW>
    <POINTS>
    <POINT>
    <POINT_ID>90333</POINT_ID>
    <X_VALUE>1</X_VALUE>
    </POINT>
    <POINT>
    <POINT_ID>90444</POINT_ID>
    <X_VALUE>10</X_VALUE>
    </POINT>
    </POINTS>
    <NOTE_TX>Points are 1 and 10</NOTE_TX>
    </ROW>
    </ROWSET>;
    ]]>
    </mx:Script>
    <mx:DataGrid width="100%" height="100%" id="dgMain"
    dataProvider="{myXML.ROW}"
    fontFamily="Verdana" fontSize="10" color="#000066">
    <mx:columns>
    <mx:DataGridColumn headerText="Note"
    dataField="NOTE_TX"/>
    <mx:DataGridColumn headerText="Points" dataField="POINT"
    id="dgcPoints"
    itemRenderer="MyComponents.MyItemRenderer"/>
    </mx:columns>
    </mx:DataGrid>
    </mx:Application>
    MyItemRenderer.as
    // ActionScript file
    package MyComponents {
    import mx.controls.*;
    import mx.core.*;
    import mx.controls.dataGridClasses.DataGridListData;
    import mx.controls.listClasses.*;
    import flash.display.*;
    import mx.core.*;
    import mx.controls.*;
    import flash.events.*;
    import mx.managers.PopUpManager;
    import mx.events.*;
    public class MyItemRenderer extends mx.core.Container
    implements IListItemRenderer{
    public function MyItemRenderer() {
    super();
    override public function set data(oValue:Object):void {
    this.removeAllChildren();
    //oValue contains whole ROW in XML format...
    var n:int = 0;
    if(this.width==0){
    trace("set data:width 0!");
    if (oValue != null && this.width>0) {
    var m:int = this.getChildren().length;
    var nWidth:int = this.width;
    var xXML:XML = new XML(oValue);
    for(var s:String in xXML.POINTS.children()){
    var nXValue:int = xXML.POINTS.children()[s].X_VALUE;
    //Total width is from 0-9, padding of 5 on left and right to
    account for circle width
    var n:int = (((nXValue -1)/10) * (this.width-10)) + 5;
    trace("set data: Width:" + this.width + " XValue:" + nXValue
    + " X:" + n);
    var u:PointComponent = new PointComponent(0x0000EE, n);
    this.addChild(u);
    PointComponent.as
    package MyComponents
    import mx.core.UIComponent;
    import mx.controls.Alert;
    public class PointComponent extends UIComponent
    public function PointComponent(pnColor:uint, pnX:int){
    super();
    graphics.clear();
    graphics.beginFill(pnColor);
    graphics.drawCircle(pnX, 10, 7);
    }

    A complete runnable example, that's great, I will give it a
    try.
    In the meantime, for "...set data is called four times where
    there are three rows...", I have noticed this as well but have no
    explanation. The first time, the "value" object is "null", so I
    always wrap the code in if (value != null) {}
    I'll post when I get a chance to look at your sample.
    Tracy

  • Custom ItemRenderer makes the column non editable

    Hi Folks,
    I have a DataGrid which s editable, I've created a custom ItemRenderer to deal with special format needed for Date variables, for that I extended the mx:Text class in order to get access to the listData.dataField variable.
    The problem is that this makes the column non-editable, the other column in the table are editabe.
    When I used a VBox container the column was editable however I didn't get access to the listData, which I need for the dataField variable.
    Any help will be appreciated.
    Thanks,
    MR.
    Here is the my DateItemRenderer code:
    <?xml version="1.0" encoding="utf-8"?>
    <mx:Text xmlns:fx="http://ns.adobe.com/mxml/2009"
                                    xmlns:s="library://ns.adobe.com/flex/spark"
                                    xmlns:mx="library://ns.adobe.com/flex/mx">
         <fx:Declarations>
              <!-- Place non-visual elements (e.g., services, value objects) here -->
         </fx:Declarations>
         <fx:Script>
              <![CDATA[
                   import aslib.common.Constants;
                   import aslib.common.Utils;
                   import aslib.connection.JSONConnector;
                   import mx.controls.dataGridClasses.DataGridListData;
                   import mx.controls.listClasses.ListData;
                   import mx.formatters.DateFormatter;
                   [Bindable]
                   private var _dispValue:String;               
                   public function dateStr(val:Object):String {
                        var innerDt:Date;
                        if(!(val is Date))
                             innerDt = Utils.convertDateStr(val as String);
                        else
                             innerDt = val as Date;
                        if(innerDt){
                             var df:DateFormatter = new DateFormatter();
                             df.formatString = "DD/MM/YYYY";
                             var formatedDate:String = df.format(innerDt);                                                       
                             return formatedDate;
                        }else{
                             return "";
                   public override function set data(value:Object):void {
                        var date:Object = value[(listData as DataGridListData).dataField];
                        if(date){
                             _dispValue = dateStr(date);
              ]]>
         </fx:Script>
         <mx:text>{_dispValue}</mx:text>
    </mx:Text>

    OK, found the issue, forgot to add 'super.data = value' in the set data method...

  • Custom Event and Custom itemRenderer

    I created an MXML component based on <mx:Button/> and
    am using it as a custom itemRenderer in a DataGrid.
    I also created a custom event, and my custom itemRenderer
    dispatches the event. I know the event gets dispatched because I
    see it in the debugger.
    I register an event listener in the parent of the DataGrid,
    but the event handler is not being called.
    If you have any advice, please help.

    In the DeleteItemEvent constructor:
    super(type, bubbles);
    TS

  • Making Components Invisible inside Custom ItemRenderer of DataGridColumn

    Hi ,
    Inside a  MXML File i have :
    <mx:TabBar  id="viewTab"  >
    <mx:dataProvider>{VIEW_ARRAY}</mx:dataProvider>
    </mx:TabBar>
    <mx:DataGrid>
    <mx:DataGridColumn id="Testing2"     itemRenderer="navigation.ViewElement">
    </mx:DataGrid>
    The  ItemRenderer Component defined above  for the above DataGridColumn consists of :
    ViewElement.mxml
        <mx:VBox id="peopleimages" >
        <mx:Label id="viewname" text="Some Text"/>
            <mx:Image id="delImage" source="{getImageforPeople()}" visible="true"  height="100%" width="100%"/>
        </mx:VBox>
    Now depending upon TabBar Click if its value is "One" then only i need to show this VBOX Component to true
    Other wise if the TabBar click value is "Two" then i should make this VBox visible to false .
    Please tell me .

    appriciate your  patience sir .
    This makes you more clear .
    <?xml version="1.0" encoding="utf-8"?>
    <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" height="100%" width="100%">
      <mx:TabBar>
            <mx:dataProvider>
                <mx:String>Alabama</mx:String>
                <mx:String>Alaska</mx:String>
                </mx:dataProvider>
        </mx:TabBar>
    <mx:DataGrid id="dataGrid"  height="2741" y="142" width="336">
            <mx:columns>
                        <mx:DataGridColumn  textAlign="right" itemRenderer="comps.Dam" />
            </mx:columns>
        </mx:DataGrid>
    </mx:Application>
    ============
    Dam.MXMXL
    <?xml version="1.0" encoding="utf-8"?>
    <mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="100%" height="100%">
    <mx:Text text="MyData"/>
        <mx:VBox id="myvbox">
        <mx:Image source="images/canvas.png" />
        </mx:VBox>
    </mx:Canvas>
    Hi this is my code above.
    As you can see i am using Custom ItemRenderer inside DataGridColumn .
    If the Tab Alabama is clicked on TabBar  , i want to show the DataGrid ItemRenderer as it is .
    But if it has been selected as Alaska , i dont want to display the VBox .
    Please help me , i am strugling on this almost for  hours now

Maybe you are looking for

  • How to declare global internal table in smartform

    Hi i need internal table in smart form with type of tline .. tline is structure and when i declare it in global definition as  lines like tline it creates a structre ... kindly help me out Regards Ammad

  • The operation priority question

    hi. i have one problem. may be i am not understand so well but... the operation priority of postfix increment is higher than the binary + operation priority and i have this problem. int p = 5; int b = p + p++ + p++; Sytem.out.println(b);i think that

  • Security Answer Verification Problem.....???

    I have forgotten my Security question and my apple id requires security question.I had request to reset these ques when i submit for reset t "plase i forguet my questions password and i want reset password <Personal Information Edited by Host>

  • Maps does not display map

    On opening Maps there is no map being displayed. I am located in NSW Australia and have only just upgraded to Mavericks on 24/10/2013

  • Web services. How can I get the error message?

    Hello. I am trying to run a report using XmlViewService. If any report has an error then executeXMLQuery returns empty result set (<rowset xmlns="urn:schemas-microsoft-com:xml-analysis:rowset"></rowset>), not the error message. How can i know if a re