Flex datagrid itemEditor

Hi,
I have a datagrid in my application with custom itemRenderer & itemEditor. The rendererIsEditor property is false for the column. I also have a menu bar in my application. Now if I edit any cell the itemRenderer will be replaced with itemEditor and as the focus moves out the itemEditor switches to itemRenderer. It is the default nature of datagrid.
Requirement: I am editting a cell, now if I select any menu item, then the itemEditor of the cell in which I was working should not be destroyed. As I would like to perform an operation in edit mode of that cell.
Thanks in advance.

Ok Alex
I'll wait.
Thanks.
I have one more issue regarding datagrid itemEditor.
I have rendererIsEditor property of datagrid column as "false" .
In my itemEditor I have 2 extra components than itemRenderer. So I need to have some extra row height in edit mode. The height of the row which is in edit mode should only grow.
I tried with editorHeightOffset but it overlaps the next row. But I need that height of the current row in which I am should grow instead.
Can we achieve this?
If not please suggest me any alternative or work around.
Thanks.

Similar Messages

How to disaply multiple column of a table in a single flex datagrid column

Hi,
I have a table in my database which has say 3 column (Firstname,LastName,Location). I wanted to display these 3 different values in a single column in flex datagrid.
Could you please help me out in this
Thanks,
Pratik

Generally, in such scenarios each column is made corresponding to the column in database only and not single column.
However, we can setStyle of a datagrid to make it appear as if all three columns have been populated in single.
set verticalGridLines="false" for dataGrid. Further cosmetic changes can be made to realise the required look.
In some cases, labelFunction of a datagridColumn also suffices the need.
Tanu

Import CSV/Excel data into Flex Datagrid using Java/JSP

Hi,
Is there any way we can import excel/csv data into flex datagrid component.
I see that is been done using php in this site. http://code.google.com/p/as3xls/
Any help would be appreciated.
Thanks in advance

You can store the list of data from the Excel sheet that you have read already into an ArrayList
Then go through the JDBC tutorial, and learn how to insert a single record into the table.
After you understand how to insert a single record, you can iterate through the ArrayList of data and insert them into the table in the database.
If you know JDBC, see if you can use OR Mapping frameworks like Hibernate or iBatis, they make it very easy to manage database in Java.

Showing multiple links from inside a flex datagrid button

Hi,
I have a requirement where I need to show a button inside
flex datagrid column.Which I'm doing with custom itemrenderer.When
the User clicks on a particular button inside data grid I need to
show him multiple links with images where user cal click on one of
the links if he choses to do so.How do I achieve this.Any example
is greatly appreciated.
Regards
mflex.

"...show him multiple links with images ..." Where/how does
this need to be displayed?
Tracy

Flex DataGrid with Dynamic Grouping

Does anyone know of any examples of Flex datagrids that have
grouping features comparable to the numerous grid components
available in the ASP.NET world? I’m thinking of .NET
component vendors such as Telerik, Infragistics, Component Art,
DevExpress, etc.
The way these .NET controls generally work is that you drag
the header of a column to a bar above the grid, which causes the
grid to redraw based on the new grouping you just specified.
This is an example of a grid component that I am currently
using:
Telerik
Grid
Thank you,
Mike Chabot

The renderer's data property is the data for the entire row so you can get the column1 data and assign the combobox's dataprovider accordingly.
Alex Harui
Flex SDK Developer
Adobe Systems Inc.
Blog: http://blogs.adobe.com/aharui

Flex datagrid pagination?

Hi. Does the datagrid or AdvancedDataGrid support pagination?
From what I've found, they don't seem to.

"curious_Lee" <[email protected]> wrote in
message
news:g91nfo$nv8$[email protected]..
> Hi. Does the datagrid or AdvancedDataGrid support
pagination? From what
> I've found, they don't seem to.
http://gurufaction.blogspot.com/2007/02/flex-datagrid-paging-example-with.html

Flex datagrid borders off by 1px?

Is there a way to extend the datagrid component or any to her way to avoid this?
Flex datagrid column header borders and column borders keep going off by 1px... and they randomly alternate when resized.
I have no idea how to fix this, and it to me looks like a problem with flex, not so much what i coded
http://screencast.com/t/NmI3Zjk0NmU
http://screencast.com/t/YzE0NDk5 - resized
It's like it's going off by 1px because of some rounding error... no idea why this is happening, and I'm using
Code I'm using (a bit sloppy but still)
http://pastebin.ca/1888773

I could use someone's help on this... Every single datagrid i create (at least with a custom header gradient, I think), has borders off by 1px, what can I do to fix this? I've even seen this happening on other sample flex projects. No idea how to fix this

Flex Datagrid Issue

Hi
I am using a flex datagrid component which has around 48 columns.
There is a option for the user to select which columns he wish to see.
Based on the user's selection the visible columns will be 1-50.
The Datagrid is inside a Vbox container.
The issue is, based on the screen resolution and the number of columns selected extra scroll bars(horizontal and vertical) appears
for the whole Vbox in addition to the Datagrid's scrollbars.
i.e if resolution is high and user selects more than 46 columns extra scroll bar appears.
If resolution is low the extra scroll bars appears as soon as the visible columns is more than 20.
Please help me if there is any resolution in preventing the extra scroll bars from appearing.Ideally, Since datagrid has its own scroll bars making more columns visible should not increase the width of datagrid.
Any help will be appreciated

Have you hard-coded the height and width of both the VBox and the Datagrid? If you set the datagrid height and width 40 pixels or so less than the VBox it should solve that problem, I'd think.
Or, you could set your DataGrid height and width to 90%.
Sorry if you've already tried this. Another option is to set your datagrid's scroll policy to "off" and just leave the VBox's scroll bars available.
-John

Flex datagrid french sorting

Hi,
I am using flex datagrid to develop an application in french,
as french is having special character in it,
i need to sort datagrid column in french. Flex datagrid
unable to sort data in french. i need french sorting,
if somebody has solution of this please help me to get out of
this.
If possible please reply me on
[email protected]

i am using inbuilt flex sorting, i am not using sortcompare()
function.
its just a string sorting but as its in french ,character
"
É" is comig after character "
V" , because flex treated it as a special character
. it should come before "
V". so do we need to change character set for
flex?

Flex DataGrid Component

Can i extend the Flex DataGrid using ActionScript and create as Add-On Component ?

I've been trying to get this to work. But i'm having issues Not sure if it's related to the Array binding limitation mentioned in the release notes. Maybe someone else has some ideas.
I'm trying to bind to the dataProvider property of the DataGrid. That way when the user in Xcelsius selects a range, it will bind the data in the excel sheet to the DataGrid.
Problem is that i'm only getting one value to update (specifically the top value). At this time i'm only trying to bind a single column of data.
I noted that the commitProperties function gets called whenever a cell changes that i'm bound to, but the dataProvider is only receiving the first value of the array. Even odder is that the ArrayCollection that i receive simply looks like this:
commitProp:dataProvider=(mx.collections::ArrayCollection)#0
filterFunction = (null)
length = 1
list = (mx.collections::ArrayList)#1
    length = 1
    source = (Array)#2
      [0] 1
    uid = "A37C62CC-F3DC-E1B1-8159-CE984C2CCE33"
sort = (null)
source = (Array)#2
So i see that i get an array collection of ArrayList objects, the first one of which simple contains the value in the excell sheet "1".
I noted that the proxy.bind function has a parameter called "chain", maybe this is what i need to get multiple value binding? The documentation for the calls are pretty basic, which is understandable as this is new technology.
So anyone have some ideas? Maybe someone from BO who is apart of the SDK group can comment?

Flex datagrid data on datachange

Hi all,
I am using an extended datagrid which takes its height on the basis of measured height of items. Item renderer for datagrid is a canvas. Which holds one more canvas(header for item renderer) and a text area. The problem I am facing is with the header canvas in item renderer. Header canvas has one label which diaplay a name of user. On the basis of data provider for the current item visibility of this label in header canvas is set as true or false. issue is when it set to false it repaints(on data change event) all the previous header canvas label also to visible false. And just the last item has the data. Rather it should set its visiblity false only for the current item and rest items sholud behave as value set for them.
Thanks in advance.

Adobe Newsbot hopes that the following resources helps you.
NewsBot is experimental and any feedback (reply to this post) on
its utility will be appreciated:
Flex 3 - Handling service results:
Flex interprets the XML data that a web service or HTTP
service returns to ..... a DataGrid control with DataTable data
returned from a .NET web service.
Link:
http://livedocs.adobe.com/flex/3/html/data_access_6.html
Flex cookbook beta - Building Flex Applications with SOAP Web
Services:
Mar 3, 2008 ... If you are using web services technologies
then it is usually ... The DataGrid tag instanciates an instance of
the DataGrid Flex control.
Link:
http://www.adobe.com/cfusion/communityengine/index.cfm?event=showdetails&productId=2&postI d=7863
Flex 3 - Using WebService components:
The Flex web service API generally supports Simple Object
Access Protocol (SOAP) ... property of a DataGrid control and
displayed in the DataGrid control.
Link:
http://livedocs.adobe.com/flex/3/html/data_access_3.html
Adobe - Flex General Discussion:
Flex datagrid data column / webservice - justneed2know -
08/27/2008 ... I use a web service to populate a datagrid and its
columns (on of which is date).
Link:
http://www.adobe.com/cfusion/webforums/forum/messageview.cfm?forumid=60&catid=585&threadid =1388794&enterthread=y
All Classes (Flex 3):
mx.rpc.soap, AbstractWebService is an abstract base class for
implementations that provide RPC access to SOAP-based web services.
Link:
http://livedocs.adobe.com/flex/3/langref/class-summary.html
Adobe - Developer Center : Using Flex Builder to Create Web:
Using Flex Builder to Create Web ServiceBased Flex
Applications ... The web service result data needs to flow to the
DataGrid. Select the 'Data will flow
Link:
http://www.adobe.com/devnet/flex/articles/flexbuilder_ws_04.html
Disclaimer: This response is generated automatically by the
Adobe NewsBot based on Adobe
Community
Engine.

Flex datagrid data column / webservice

I use a web service to populate a datagrid and its columns
(on of which is date). The web services sources the data from a sql
server database and thru ASP.net to the Flex application. I've been
seeing strange things. During testing, database records such as
"8/27/2008 8:58:00 PM " correctly shows up as 8/27/2008 in the Flex
application, but records after 9PM such as "8/27/2008 9:01:21 PM"
shows up as 8/28/2008 (the next days) .. seems like after 9 throws
off the data rendering.. please suggest.

Adobe Newsbot hopes that the following resources helps you.
NewsBot is experimental and any feedback (reply to this post) on
its utility will be appreciated:
Flex 3 - Handling service results:
Flex interprets the XML data that a web service or HTTP
service returns to ..... a DataGrid control with DataTable data
returned from a .NET web service.
Link:
http://livedocs.adobe.com/flex/3/html/data_access_6.html
Flex cookbook beta - Building Flex Applications with SOAP Web
Services:
Mar 3, 2008 ... If you are using web services technologies
then it is usually ... The DataGrid tag instanciates an instance of
the DataGrid Flex control.
Link:
http://www.adobe.com/cfusion/communityengine/index.cfm?event=showdetails&productId=2&postI d=7863
Flex 3 - Using WebService components:
The Flex web service API generally supports Simple Object
Access Protocol (SOAP) ... property of a DataGrid control and
displayed in the DataGrid control.
Link:
http://livedocs.adobe.com/flex/3/html/data_access_3.html
Adobe - Flex General Discussion:
Flex datagrid data column / webservice - justneed2know -
08/27/2008 ... I use a web service to populate a datagrid and its
columns (on of which is date).
Link:
http://www.adobe.com/cfusion/webforums/forum/messageview.cfm?forumid=60&catid=585&threadid =1388794&enterthread=y
All Classes (Flex 3):
mx.rpc.soap, AbstractWebService is an abstract base class for
implementations that provide RPC access to SOAP-based web services.
Link:
http://livedocs.adobe.com/flex/3/langref/class-summary.html
Adobe - Developer Center : Using Flex Builder to Create Web:
Using Flex Builder to Create Web ServiceBased Flex
Applications ... The web service result data needs to flow to the
DataGrid. Select the 'Data will flow
Link:
http://www.adobe.com/devnet/flex/articles/flexbuilder_ws_04.html
Disclaimer: This response is generated automatically by the
Adobe NewsBot based on Adobe
Community
Engine.

Flex datagrid custom itemEditor - not returning data

Hi,
I am new to flex and this is a basic "How to" question.
I want to write custom item editors and renderers for a datagrid column.
I am facing two problems here
1) override public function get data() : Object is not working. however, if the type of the column is just text then override public function get text():String is working. Specifying editorDataField in the datagrid column definition is working for some types ex:Strings, Numbers
2) Nothing is working for slightly more complex types like an Image. even editorDataField is not working. Somewhere between the user editing the data (in the case of an image, edit = browse, select & load an image) and grid asking for data at itemEditEnd, the entire data loaded by the user is disappearing and it is returning null or some default value I'd set it to in override public function set data().
I am aware that datagrid reuses both editors and renderers but I dono how the data user has set is getting lost while the focus is on the same cell
I have tried to use getter setter for this custom data field mentioned in editorDataField but when I do so, nothing works.. it fails even for string type
It should be a simple thing to do and I am sure I am making some silly mistake .. please help me out. It has driven me nuts since today morning..
any pointers would be really appreciated.

Hi,
thanks for the info. This is the understanding that I had after reading livedocs about item renderers.
I have given the correct editorDataField and dataField. But it isnt working..I am not sure what you mean by For complex renderers, make sure the property is properly implemented on the outer component.
The weird part is specifying editorDataField works for String and not for an image. I am pasting some of code (highlighting relevant parts) below.. please have a look and tell me what I am missing.
Datagrid :
<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 = "mx.controls.Label"
                               itemEditor="editors.TextEditor"
                             dataField="text" editorDataField="myData"/>
            <mx:DataGridColumn headerText="Image" width="600" resizable="true" sortable="false"
                               itemRenderer="mx.controls.Image"
                             itemEditor="editors.ImageEditor"
                               dataField="image" 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; // has two properties : public var text : String and public var image : mx.controls.Image;
          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>
ImageEditor :
<?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"
                          width="100%" height="100%"
                          focusEnabled="true" contentBackgroundColor="#F1B4B4">
    <mx:Image id="img" x="0" y="0" width="200" height="200" />
    <s:Button label="Click to Add Image" id="addImageButton" click="addImageButton_clickHandler(event)"
              x="0" y="{this.height - addImageButton.height}"/>
    <fx:Script>
        <![CDATA[
            import domain.Slide;
            public var myData : Image; //editor data field
            override public function set data(value:Object):void{
                super.data = value;
                if( (value as Slide).image != null) this.img.source = (value as Slide).image.source;
            protected function addImageButton_clickHandler(event:MouseEvent):void
                // select image from file system
                var imgFilter : FileFilter = new FileFilter("Images","*.jpg;*.png;*.gif");
                var fileRef : FileReference = new FileReference();
                fileRef.addEventListener(Event.SELECT, fileSelectHandler);
                fileRef.addEventListener(Event.OPEN, fileOpenHandler);
                fileRef.addEventListener(Event.CANCEL, fileCancelHandler);
                fileRef.browse([imgFilter]);
                function fileRefSelectListenerUp(e:Event):void{}
            private function fileSelectHandler(event : Event):void{
                var fileRef : FileReference = event.target as FileReference;
                fileRef.addEventListener(Event.COMPLETE, fileLoadHandler);
                fileRef.load();
            private function fileLoadHandler(event : Event) : void{
                var fileRef : FileReference = event.target as FileReference;
                this.myData = new Image;
                this.myData.name = fileRef.name;
                this.myData.source = fileRef.data;
                this.img.source = fileRef.data;
            private function fileOpenHandler(event : Event):void{}
            private function fileCancelHandler(event : Event):void{}
        ]]>
    </fx:Script>
</s:MXDataGridItemRenderer>

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.

Tab not working properly for Datagrid ItemEditor ComboBox

When you run the app type a1 in the find an App combo box then hit the tab key.
Click in the 3rd row in the As Bs column and a combobox will show.
Type a3 and then hit enter. Notice that A3 is saved as the selected item and saved to the dataprovider
Hit the backspace key and hit enter. Notice that the null is saved and nothing is selected.
Type a3 again and hit enter.
Hit the backspce again but this time hit the tab key. Notice the previous value is back. ooops.
{Code}
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
               xmlns:s="library://ns.adobe.com/flex/spark"
               xmlns:mx="library://ns.adobe.com/flex/mx"
               xmlns:vo="valueObjects.*"
               width="100%" height="100%">
    <fx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
            import mx.events.FlexEvent;
            protected function aCBLabel(item:Object):String
                if (item != null)
                    return item.name;
                else
                    return "";
            protected function bDG_creationCompleteHandler(event:FlexEvent):void
                bDG.selectedIndex = 0;
            protected function bAFormat(item:Object, column:DataGridColumn):String
                if (item [column.dataField] != null)
                    return item [column.dataField].name;
                else
                    return "";
        ]]>
    </fx:Script>
    <fx:Declarations>
        <vo:ADto id="aDto"/>
        <vo:BDto id="bDto"/>
        <s:ArrayCollection id="aList">
            <vo:ADto>
                <vo:id>1</vo:id>
                <vo:name>a1</vo:name>
                <vo:bs>
                    <vo:BDto>
                        <vo:id>1</vo:id>
                        <vo:aDto>
                            <vo:ADto>
                                <vo:id>1</vo:id>
                                <vo:name>a1</vo:name>
                            </vo:ADto>
                        </vo:aDto>
                    </vo:BDto>
                    <vo:BDto>
                        <vo:id>2</vo:id>
                        <vo:aDto>
                            <vo:ADto>
                                <vo:id>2</vo:id>
                                <vo:name>a2</vo:name>
                            </vo:ADto>
                        </vo:aDto>
                    </vo:BDto>
                    <vo:BDto>
                        <vo:id>0</vo:id>
                    </vo:BDto>
                </vo:bs>
            </vo:ADto>
            <vo:ADto>
                <vo:id>2</vo:id>
                <vo:name>a2</vo:name>
                <vo:bs>
                    <vo:BDto>
                        <vo:id>3</vo:id>
                        <vo:aDto>
                            <vo:ADto>
                                <vo:id>3</vo:id>
                                <vo:name>a3</vo:name>
                            </vo:ADto>
                        </vo:aDto>
                    </vo:BDto>
                    <vo:BDto>
                        <vo:id>0</vo:id>
                    </vo:BDto>
                </vo:bs>
            </vo:ADto>
        </s:ArrayCollection>
        <s:ArrayCollection id="bAList">
            <vo:ADto>
                <vo:id>1</vo:id>
                <vo:name>a1</vo:name>
            </vo:ADto>
            <vo:ADto>
                <vo:id>2</vo:id>
                <vo:name>a2</vo:name>
            </vo:ADto>
            <vo:ADto>
                <vo:id>3</vo:id>
                <vo:name>a3</vo:name>
            </vo:ADto>
        </s:ArrayCollection>
    </fx:Declarations>
    <fx:Binding source="aCB.selectedItem as ADto" destination="aDto"/>
    <s:Form id="AForm" width="700" height="170">
        <s:layout>
            <s:BasicLayout/>
        </s:layout>
        <s:HGroup x="0" y="50" width="670" height="60">
            <s:Label height="25" fontWeight="bold" text="Find an A" verticalAlign="middle"/>
            <s:ComboBox id='aCB'
                        prompt="Enter or Select an A Name"
                        labelFunction="aCBLabel"
                        x="110" y="10" width="375">
                <mx:ArrayCollection id="asList" list="{aList}"/>
            </s:ComboBox>
        </s:HGroup>
    </s:Form>
    <mx:DataGrid id="bDG" x="10" y="140" width="450" height="200"
                 editable="true"
                 dataProvider="{aDto.bs}"
                 creationComplete="bDG_creationCompleteHandler(event)">
        <mx:columns>
            <mx:DataGridColumn id="bidDC"
                               headerText="id"
                               editable="true"
                               dataField="id"
                               editorDataField="value"
                               width="50"/>
            <mx:DataGridColumn id="bNameDC"
                               headerText="As Bs"
                               editable="true"
                               dataField="aDto"
                               labelFunction="bAFormat"
                               editorDataField="value"
                               width="150">
                <mx:itemEditor>
                    <fx:Component>
                        <s:MXDataGridItemRenderer implements="mx.managers.IFocusManagerComponent">
                            <fx:Script>
                                <![CDATA[
                                    import mx.collections.ArrayCollection;
                                    import mx.controls.dataGridClasses.DataGridListData;
                                    import mx.controls.listClasses.BaseListData;
                                    import mx.events.FlexEvent;
                                    import spark.events.DropDownEvent;
                                    import spark.events.IndexChangeEvent;
                                    [Bindable]
                                    public var bAs:ArrayCollection;
                                    protected function cb_InitializeHandler(event:FlexEvent):void
                                        bAs = outerDocument.bAList;
                                        aDto = outerDocument.bDG.selectedItem.aDto;
                                        if (aDto != null)
                                            var t:ADto;
                                            for (var i:int = 0; i<bAs.length; i++)
                                                t = bAs[i];
                                                if (aDto.id == t.id)
                                                    cb.selectedIndex = i;
                                                    break;
                                    override public function setFocus():void
                                        cb.setFocus();
                                    public function get value():ADto
                                        if (cb.isDropDownOpen)
                                            cb.closeDropDown(true);
                                        cb.validateNow();
                                        aDto = cb.selectedItem as ADto;
                                        return aDto
                                    protected function cb_closeHandler(event:DropDownEvent):void
                                        aDto = cb.selectedItem as ADto;
                                ]]>
                            </fx:Script>
                            <fx:Declarations>
                                <vo:ADto id="aDto"/>
                                
                            </fx:Declarations>
                            <s:ComboBox id="cb"
                                            width = "100%"
                                            prompt="{aDto.name}"
                                            dataProvider="{bAs}"
                                            labelField="name"
                                            initialize="cb_InitializeHandler(event)"
                                            close="cb_closeHandler(event)">
                            </s:ComboBox>
                        </s:MXDataGridItemRenderer>
                    </fx:Component>
                </mx:itemEditor>
            </mx:DataGridColumn>
        </mx:columns>
    </mx:DataGrid>
</s:Application>
{Code}
{Code}
package valueObjects
    import com.adobe.fiber.services.IFiberManagingService;
    import com.adobe.fiber.valueobjects.IValueObject;
    import mx.collections.ArrayCollection;
    import valueObjects.BDto;
    import com.adobe.fiber.core.model_internal;
    use namespace model_internal;
    public class ADto implements com.adobe.fiber.valueobjects.IValueObject
        private var _internal_id : int;
        private var _internal_name : String;
        private var _internal_bs : ArrayCollection;
        model_internal var _internal_bs_leaf:valueObjects.BDto;
        public function ADto()
        public function get id() : int
            return _internal_id;
        public function get name() : String
            return _internal_name;
        public function get bs() : ArrayCollection
            return _internal_bs;
        public function set id(value:int) : void
            var oldValue:int = _internal_id;
            if (oldValue !== value)
                _internal_id = value;
        public function set name(value:String) : void
            var oldValue:String = _internal_name;
            if (oldValue !== value)
                _internal_name = value;
        public function set bs(value:*) : void
            var oldValue:ArrayCollection = _internal_bs;
            if (oldValue !== value)
                if (value is ArrayCollection)
                    _internal_bs = value;
                else if (value is Array)
                    _internal_bs = new ArrayCollection(value);
                else if (value == null)
                    _internal_bs = null;
                else
                    throw new Error("value of bs must be a collection");
        private var _managingService:com.adobe.fiber.services.IFiberManagingService;
        public function set managingService(managingService:com.adobe.fiber.services.IFiberManagi ngService):void
            _managingService = managingService;
{Code}
{Code}
package valueObjects
import com.adobe.fiber.core.model_internal;
import com.adobe.fiber.services.IFiberManagingService;
import com.adobe.fiber.valueobjects.IValueObject;
import valueObjects.ADto;
import mx.collections.ArrayCollection;
use namespace model_internal;
public class BDto implements com.adobe.fiber.valueobjects.IValueObject
    private var _internal_id : int;
    private var _internal_aDto : ADto;
    private static var emptyArray:Array = new Array();
    public function BDto()
        _internal_id = 0;
    public function get id() : int
        return _internal_id;
    public function get aDto() : ADto
        return _internal_aDto;
    public function set id(value:int) : void
        var oldValue:int = _internal_id;
        if (oldValue !== value)
            _internal_id = value;
    public function set aDto(value:ADto) : void
        var oldValue:ADto = _internal_aDto;
        if (oldValue !== value)
            _internal_aDto = value;
    private var _managingService:com.adobe.fiber.services.IFiberManagingService;
    public function set managingService(managingService:com.adobe.fiber.services.IFiberManagi ngService):void
        _managingService = managingService;
{Code}

the reason the tab was not working is because it was not changing the selection and just exiting the combo box. So, in the value function add if (cb.textInput.text == "") cb.selectedIndex = -1; This will change the selection as desired and fixes the problem.

Flex datagrid itemEditor

Similar Messages

Maybe you are looking for