Flex 3: Datagrid as item editor gets 'itemEditEnd' prematurely

My application has a tree with a custom item renderer, which depending on the type of data at a leaf uses different components as editors. In one case I am trying to use a datagrid so that the user can choose a row that meets his needs (several column开发者_Go百科s need to be displayed), ie. similar in concept to a ComboBox.

To do this I have a function assigned to be the handler for 'itemEditBegin' (for the tree) in which I'm dynamically creating the datagrid, and then using the popup manager to display it as a (modal) popup. So far so good.

However, if you click anywhere (eg. scroll down button in the datagrid) the popup disappears because the itemEditEnd event is fired - why ?!

In another scenario, I have a DateField setup as the editor, and the user can click on the icon to bring up a DateChooser, scroll through the months, etc. I looked at the code behind this, and it is using a popup, seemingly in exactly the same way as my code !

Here is the 'itemEditBegin' code:

dataGrid = new DataGrid();
dataGrid.dataProvider = mddTable.dataCollection;
dataGrid.editable = false;
PopUpManager.addPopUp(dataGrid, this, true);

where 'this' is the component used by the tree renderer for a row. It is the tree component's 'itemEditEnd' handler that is being called as soon as anything inside the datagrid is clicked (eg. a row, scroll down button, column divider etc).

Any ideas anyone ?

Thanks,

Mike.

I guess I'd have to see code, or this working in practice to fully understand. It sounds like the individual DataGrid Columns are editable when you're using the DataGrid as an itemEditor. Is that correct?

When you focus out of an itemEditor in the DataGrid, it will fire the itemEditEnd event. Your tree must be reacting to this somehow. Try to stop the event propogation in your DataGrid class. Conceptually something like this:

<mx:DataGrid>
 <mx:Script>
   public function oItemEditEnd(event:DataGridEvent):void{
     event.stopPropogation();
   }
 </mx:Script>
 <mx:columns>
   <mx:DataGridColumn itemEditEnd="onItemEditEnd(event)">
   <mx:DataGridColumn itemEditEnd="onItemEditEnd(event)">
 </mx:columns>
</mx:DataGrid>

If you do this, you're going to have to do something to figure out when the user is done editing and close the itemEditor manually.

More info on stopPropogation().. Also check out stopImmediatePropogation(). I'm not sure which one you'll need as it depends how your code is structured.

Eventually I found a solution that moreless fixes the problem. Simply adding in the line:

dataGrid.owner = this;

solved the premature itemEditEnd event problem. However, now I have the opposite problem, where the itemEditEnd event doesn't get fired until I click on another row of the tree !

I have an 'item clicked' listener on the datagrid which destroys the datagrid when one of the values is clicked, but just doing this doesn't cause the itemEditEnd event of the underlying tree row to fire. I read in the docs that the component losing focus causes it, so I dispatched my own 'FocusEvent.FOCUS_OUT' event - no good.

If I manually change the focus to the underlying tree, the itemEditEnd event does fire and all is good, but it seems a bit clunky to have to pass a reference of the tree to the tree renderer's row object !

Anyone have any better ideas ?

Thanks,

Mike