Ok, I have a simple example. When you run the app, click on the lower
right cell, the upper left cell with get focus first. Thanks for all
the help. John
*** DGTest.mxml ***
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml";
layout="absolute" xmlns:n1="FAB_widgets/widgets">
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import mx.events.DataGridEvent;
[Bindable]
protected var _listData:ArrayCollection = new
ArrayCollection([{name:'AA', phone:'555-555-1234',email:'BB'},
{name:'BB',
phone:'555-555-4321',email:'AA'}]);
private function
fireEditEvent(event:DataGridEvent):void {
if (dg.itemEditorInstance is ComboBoxRenderer) {
// event.preventDefault();
// copy selected value (data) from
combobox to renderer
var selData:String =
ComboBoxRenderer(event.currentTarget.itemEditorInstance).text;
var selData2:Object =
ComboBoxRenderer(event.currentTarget.itemEditorInstance).selectedItem;
if (selData2 != null) {
dg.editedItemRenderer.data[event.dataField] = selData2.data;
/*EXPENSIVE!!!! *///
dg.dataProvider.itemUpdated(event.itemRenderer.data);
}
dg.destroyItemEditor();
}
}
protected function
itemEditBeginHandler(event:DataGridEvent):void {
_listData[event.rowIndex].rowChanged = true;
dispatchEvent(new Event("change"));
dg.invalidateList();
trace('itemEditBeginHandler - ListWithoutAdd');
}
]]>
</mx:Script>
<mx:DataGrid headerHeight="21" editable="true" rowHeight = "30"
id="dg" dataProvider="{_listData}" visible="true" selectable="false"
itemEditEnd="fireEditEvent(event)"
itemEditBegin="itemEditBeginHandler(event)">
<mx:columns>
<mx:DataGridColumn dataField="name" headerText="Name"
itemEditor="ComboBoxRenderer" itemRenderer="LabelWithDownArrow"/>
<mx:DataGridColumn dataField="phone"
headerText="Phone"/>
<mx:DataGridColumn dataField="email" headerText="Email"
itemEditor="ComboBoxRenderer" itemRenderer="LabelWithDownArrow"/>
</mx:columns>
</mx:DataGrid>
</mx:Application>
*** LabelWithDownArrow.as ***
package
{
import mx.controls.Label;
import mx.events.FlexEvent;
import mx.controls.dataGridClasses.DataGridListData;
import mx.controls.dataGridClasses.DataGridColumn;
import mx.controls.DataGrid;
import mx.collections.ArrayCollection;
import flash.display.Graphics;
public class LabelWithDownArrow extends Label
{
public function LabelWithDownArrow()
{
super();
addEventListener(mx.events.FlexEvent.SHOW,
showEventHandler);
}
private function showEventHandler(e:FlexEvent):void {
trace('LabelWithDownArrow showEventHandler');
listData.label =
data[DataGridListData(listData).dataField];
var cbr:ComboBoxRenderer; // will contain
renderer for this cell
var dgc:DataGridColumn; // will contain column
info for the one
this cell is in
var columnArray:Array; // columns of datagrid
var dg:DataGrid; // reference to
grid containing this cell
var dp:ArrayCollection; // dataProvider of
selected cell's comboBox
var dgld:DataGridListData = listData as
DataGridListData;
if (dgld != null) {
dg = DataGrid(listData.owner);
columnArray = dg.columns;
// iterate through columns to find one that
matches to this cell
var columnArrayLen:int = columnArray.length;
for (var i:int=0; i< columnArrayLen; i++) {
if
(DataGridColumn(columnArray[i]).dataField == dgld.dataField) {
// column found
if
(dg.columns[i].itemEditor.newInstance() is ComboBoxRenderer) {
cbr =
dg.columns[i].itemEditor.newInstance();
dp = cbr.dataProvider
as ArrayCollection;
// now iterate through
dp to find a matching data value, when
found put its label in the Label widget
var dpLen:int =
dp.length;
for (var j:int=0;
j<dpLen; j++) {
if
(dp.getItemAt(j).data == data[dgld.dataField]) { // found match
this.text = dp.getItemAt(j).label; // + " " +
dp.getItemAt(j).data;
trace('found showEvent LabelWithDownArrow');
return;
}
}
}
}
}
// not found, so show comboBox prompt
this.text = cbr.prompt;
trace('not found showEvent LabelWithDownArrow');
}
trace('showEvent');
}
override protected function updateDisplayList(w:Number,
h:Number):void {
super.updateDisplayList(w-15, h); // subtract from
width to allow
for down arrow
var g:Graphics = graphics;
g.clear();
// add arrow to box
// Draw the triangle.
g.beginFill(0x000000); // black
g.moveTo(w - 11.5, h / 2 + 3);
g.lineTo(w - 15, h / 2 - 2);
g.lineTo(w - 8, h / 2 - 2);
g.lineTo(w - 11.5, h / 2 + 3);
g.endFill();
}
// method used to change what is displayed
[Bindable]
override public function set data(value:Object):void {
super.data = value;
var cbr:ComboBoxRenderer; // will contain
renderer for this cell
var dgc:DataGridColumn; // will contain column
info for the one
this cell is in
var columnArray:Array; // columns of datagrid
var dg:DataGrid; // reference to
grid containing this cell
var dp:ArrayCollection; // dataProvider of
selected cell's comboBox
var dgld:DataGridListData = listData as
DataGridListData;
if (dgld != null) {
dg = DataGrid(listData.owner);
columnArray = dg.columns;
// iterate through columns to find one that
matches to this cell
var columnArrayLen:int = columnArray.length;
for (var i:int=0; i< columnArrayLen; i++) {
if
(DataGridColumn(columnArray[i]).dataField == dgld.dataField) {
// column found
if
(dg.columns[i].itemEditor.newInstance() is ComboBoxRenderer) {
cbr =
dg.columns[i].itemEditor.newInstance();
dp = cbr.dataProvider
as ArrayCollection;
// now iterate through
dp to find a matching data value, when
found put its label in the Label widget
var dpLen:int =
dp.length;
for (var j:int=0;
j<dpLen; j++) {
if
(dp.getItemAt(j).data == data[dgld.dataField]) { // found match
this.text = dp.getItemAt(j).label; // + " " +
dp.getItemAt(j).data;
trace('found LabelWithDownArrow');
return;
}
}
}
}
}
// not found, so show comboBox prompt
this.text = cbr.prompt;
trace('not found LabelWithDownArrow');
}
}
}
}
*** ComboBoxRenderer.as ***
package
{
import mx.controls.ComboBox;
import flash.events.FocusEvent;
import mx.collections.ArrayCollection;
import mx.controls.dataGridClasses.DataGridListData;
public class ComboBoxRenderer extends ComboBox
{
public function ComboBoxRenderer()
{
super();
this.toolTip = this.text;
this.dataProvider = DropDown_Names;
addEventListener(flash.events.FocusEvent.FOCUS_IN,
focusEventHandler);
}
private var DropDown_Names:ArrayCollection = new
ArrayCollection([{data:'AA', label: 'Adam Adams'},{data:'BB', label:
'Bob Bobs'}]);
override public function get data():Object {
trace('get data cbr renderere');
return super.data;
}
// this affects what is displayed by widget
[Bindable]
override public function set data(value:Object):void {
trace('********** set cbr data ***********');
var rowData:DataGridListData = this.listData as
DataGridListData;
if (value != null) {
var stringToFind:String = null;
var selected:int = -1;
if (listData.label != null)
stringToFind =
listData.label.toUpperCase();
for (var i:int=0; i<
dataProvider.length;i++) {
var item:String =
String(dataProvider[i].data).toUpperCase();
if (item == stringToFind) {
selectedIndex = i;
trace('found it cbr');
return;
}
}
selectedIndex = selected;
}
trace('not found cb renderer');
}
private function focusEventHandler(e:FocusEvent):void {
open();
}
}
}
--- In [email protected], "Alex Harui" <[EMAIL PROTECTED]> wrote:
>
> When the focus moves to the selected cell, the ComboBox shows up?
>
>
>
> If the renderer is not an extended Label do you still see the problem?
>
>
>
> Is there no way to make a simple DG using your extended renderer and
> editor and post it?
>
>
>
> ________________________________
>
> From: [email protected] [mailto:[EMAIL PROTECTED] On
> Behalf Of j_lentzz
> Sent: Wednesday, November 07, 2007 5:03 PM
> To: [email protected]
> Subject: [flexcoders] Re: Bouncing Focus in DataGrid
>
>
>
> Sorry about that. The editor is an extended ComboBox. The renderer
> is an extended Label. Clicking on a cell in the datagrid makes the
> first cell on the first row briefly get the focus, then the focus
> moves to the selected cell. It only does this the very first time
> you click in the grid - either after initially loading it with data,
> or after adding a row to it. After the first click, it does not
> briefly go to the first cell on the first row.
>
> I hope this is clearer. I appreciate the help.
>
> John
> --- In [email protected] <mailto:flexcoders%40yahoogroups.com>
> , "Alex Harui" <aharui@> wrote:
> >
> > OK, I'm lost. Please re-state your findings so far. Note also
> that if
> > your ComboBox editor is wrapped by a Container it isn't a true
> > IFocusManagerComponent
> >
> >
> >
> > ________________________________
> >
> > From: [email protected] <mailto:flexcoders%40yahoogroups.com>
>
> [mailto:[email protected] <mailto:flexcoders%40yahoogroups.com>
> ] On
> > Behalf Of j_lentzz
> > Sent: Wednesday, November 07, 2007 9:14 AM
> > To: [email protected] <mailto:flexcoders%40yahoogroups.com>
> > Subject: [flexcoders] Re: Bouncing Focus in DataGrid
> >
> >
> >
> > Sorry, I mistyped my last response. The Label is the renderer - not
> > editor. I have the Label (or the extended version
> LabelWithDownArrow)
> > as the renderer. The editor is my extended ComboBox. So, I'm not
> > editing with a Label, but I am clicking on it to switch to the
> ComboBox.
> >
> > John
> > --- In [email protected]
> <mailto:flexcoders%40yahoogroups.com> <mailto:flexcoders%
> 40yahoogroups.com>
> > , "Alex Harui" <aharui@> wrote:
> > >
> > > If the editor is not an IFocusManagerComponent, it is not
> a 'legal'
> > > editor.
> > >
> > >
> > >
> > > ________________________________
> > >
> > > From: [email protected]
> <mailto:flexcoders%40yahoogroups.com> <mailto:flexcoders%
> 40yahoogroups.com>
> > [mailto:[email protected]
> <mailto:flexcoders%40yahoogroups.com> <mailto:flexcoders%
> 40yahoogroups.com>
> > ] On
> > > Behalf Of j_lentzz
> > > Sent: Wednesday, November 07, 2007 4:39 AM
> > > To: [email protected] <mailto:flexcoders%40yahoogroups.com>
> <mailto:flexcoders%
> 40yahoogroups.com>
> > > Subject: [flexcoders] Re: Bouncing Focus in DataGrid
> > >
> > >
> > >
> > > Unfortunately not, it is a dynamically created datagrid. However,
> I
> > > did discover some interesting things. If I use my custom renderer
> and
> > > set rendererIsEditor=true, it doesn't do the bouncing focus
> thing. If
> > > I go back to my original code and set the renderer as a
> TextInput, it
> > > doesn't do the bouncing thing. When I set the editor to either a
> > > Label or my LabelWithDownArrow (an extended Label with the
> combobox
> > > down arrow), I get the bouncing focus. Could it somehow be
> because a
> > > Label isn't editable? If so, any ideas how to get around it?
> > >
> > > Thanks a lot.
> > >
> > > John
> > > --- In [email protected]
> <mailto:flexcoders%40yahoogroups.com>
> > <mailto:flexcoders%40yahoogroups.com>
> > <mailto:flexcoders%40yahoogroups.com>
> > > , "Alex Harui" <aharui@> wrote:
> > > >
> > > > Can you post a small test case?
> > > >
> > > >
> > > >
> > > > ________________________________
> > > >
> > > > From: [email protected]
> <mailto:flexcoders%40yahoogroups.com>
> > <mailto:flexcoders%40yahoogroups.com>
> > <mailto:flexcoders%40yahoogroups.com>
> > > [mailto:[email protected]
> <mailto:flexcoders%40yahoogroups.com>
> > <mailto:flexcoders%40yahoogroups.com>
> > <mailto:flexcoders%40yahoogroups.com>
> > > ] On
> > > > Behalf Of j_lentzz
> > > > Sent: Tuesday, November 06, 2007 3:41 PM
> > > > To: [email protected]
> <mailto:flexcoders%40yahoogroups.com> <mailto:flexcoders%
> 40yahoogroups.com>
> > <mailto:flexcoders%40yahoogroups.com>
> > > > Subject: [flexcoders] Re: Bouncing Focus in DataGrid
> > > >
> > > >
> > > >
> > > > It happens also when I first populate the datagrid or add a
> row. In
> > > > either case, nothing is selected in the datagrid. When I select
> > > > something, the top most left cell briefly gets the focus and
> > switches
> > > > the component to an editor then back to a renderer and then the
> > > > selected item becomes an editor.
> > > >
> > > > John
> > > > --- In [email protected]
> <mailto:flexcoders%40yahoogroups.com>
> > <mailto:flexcoders%40yahoogroups.com>
> > > <mailto:flexcoders%40yahoogroups.com>
> > > <mailto:flexcoders%40yahoogroups.com>
> > > > , George <yahoo@> wrote:
> > > > >
> > > > > When you add a new row, dataProvider changed so DG will be
> > refreshed
> > >
> > > > > totally, your item editing process will be eliminated at that
> > time.
> > > > > You need a callLater() to reselect .selectedIndex to the new
> row,
> > it
> > >
> > > > > will be highlighted. Then try to move focus back to the
> renderer.
> > > > >
> > > > > George
> > > > >
> > > > > Alex Harui wrote:
> > > > > > Are the renderers also editors? rendererIsEditor="true". If
> so,
> > > > is the
> > > > > > renderer an IFocusManagerComponent?
> > > > > > ________________________________
> > > > > >
> > > > > > From: [email protected]
> <mailto:flexcoders%40yahoogroups.com>
> > <mailto:flexcoders%40yahoogroups.com>
> > > <mailto:flexcoders%40yahoogroups.com>
> > > > <mailto:flexcoders%40yahoogroups.com>
> > > > [mailto:[email protected]
> <mailto:flexcoders%40yahoogroups.com>
> > <mailto:flexcoders%40yahoogroups.com>
> > > <mailto:flexcoders%40yahoogroups.com>
> > > <mailto:flexcoders%40yahoogroups.com>
> > > > ] On
> > > > > > Behalf Of j_lentzz
> > > > > > Sent: Tuesday, November 06, 2007 6:06 AM
> > > > > > To: [email protected]
> <mailto:flexcoders%40yahoogroups.com>
> > <mailto:flexcoders%40yahoogroups.com>
> > > <mailto:flexcoders%40yahoogroups.com>
> > > <mailto:flexcoders%40yahoogroups.com>
> > > >
> > > > > > Subject: [flexcoders] Bouncing Focus in DataGrid
> > > > > >
> > > > > > Hello All,
> > > > > >
> > > > > > I have an app that allows the user to add rows to a
> datagrid.
> > The
> > > > > > rows contain components that have separate item editors and
> > > > renderers.
> > > > > > What is happening is that after a new row is added to the
> > datagrid
> > > > > > and the user clicks on a cell that is not the first cell in
> the
> > > > first
> > > > > > row, the focus briefly goes to the first cell in the first
> row
> > and
> > > > > > then to the actual cell selected. It doesn't stay there
> long,
> > but
> > > > > > long enough to see the cell switch to the item editor and
> then
> > > back
> > > > to
> > > > > > the renderer. Has anyone else seen this or have a way to
> prevent
> > > it?
> > > > > >
> > > > > > Thanks,
> > > > > >
> > > > > > John
> > > > > >
> > > > >
> > > >
> > >
> >
>
