DropDownList Scrollbar problem in DataGrid

[criptopus]

Here's my problem, as soon as I make the datagrid editable so that the selection can be passed from renderer to datagrid the scroll bars in the dropDownList fail to work. What can be done, nobody seems to know. If you know please let everyone know.

** app.mxml **

<?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" minWidth="955" minHeight="600">
<s:layout>
<s:VerticalLayout horizontalAlign="center" paddingTop="10" gap="10"/>
</s:layout>

<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;

[Bindable]
protected var acPeople:ArrayCollection = new ArrayCollection(
[ { people_id: 1, people_name: 'Stephen', people_family:1},
{ people_id: 2, people_name: 'Sheila', people_family:1},
{ people_id: 3, people_name: 'David', people_family:1},
{ people_id: 4, people_name: 'Ross', people_family:2},
{ people_id: 5, people_name: 'Gareth', people_family:2},
{ people_id: 6, people_name: 'Joyce', people_family:2}
]);
]]>
</fx:Script>

<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>

<s:Label text="People And Family Names" fontWeight="bold"/>
<mx:DataGrid dataProvider="{acPeople}" rowCount="3" editable="true">
<mx:columns>
<mx:DataGridColumn headerText="Index" dataField="people_id" editable="false"/>
<mx:DataGridColumn headerText="First Name" dataField="people_name" editable="false"/>
<mx:DataGridColumn headerText="Family Name" dataField="people_family" itemRenderer="render"
rendererIsEditor="true" editorDataField="selection" editable="true"/>
</mx:columns>
</mx:DataGrid>

</s:Application>

** render.mxml **

<?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">

<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;

import spark.events.IndexChangeEvent;

public var selection:int;

[Bindable]
protected var acFamily:ArrayCollection = new ArrayCollection(
[ { family_id: 1, family_name:"Brown"},
{ family_id: 2, family_name:"Owen"},
{ family_id: 3, family_name:"Johnson"},
{ family_id: 4, family_name:"Harding"},
{ family_id: 5, family_name:"Manson"},
{ family_id: 6, family_name:"Philips"},
{ family_id: 7, family_name:"Hedge"}
]);

protected function dropdownlist1_changeHandler(event:IndexChangeEvent):void
{
selection = event.newIndex;
}

]]>
</fx:Script>

<s:DropDownList dataProvider="{acFamily}" labelField="family_name"
selectedIndex="{int(dataGridListData.label)}"
change="dropdownlist1_changeHandler(event)"
width="100%" top="2" bottom="2" left="2" right="2"/>

</s:MXDataGridItemRenderer>

[Inigoesdr]

Looks like a bug. It's been reported already, but not fixed yet: http://bugs.adobe.com/jira/browse/SDK-27783
mx:ComboBox seems to work correctly, so you can revert to that until it's fixed if need be.

[criptopus]

One guy at Adobe said it could be done using the owner property.
I'm a little vague as to how it would be done but what he said was this.

Alex Harui, said "And one way to do that might be to put an id=”foo” on the DropDownList and watch for the “open” event and set foo.dropDown.owner = this;"

I could reach dropDown from foo if I didn't use a skin but couldn't reach owner,
And if I used a skin dropDown was not available.

Any ideas?

- Stephen

[Inigoesdr]

Originally Posted by criptopus

Alex Harui, said "And one way to do that might be to put an id=”foo” on the DropDownList and watch for the “open” event and set foo.dropDown.owner = this;"

I could reach dropDown from foo if I didn't use a skin but couldn't reach owner,
And if I used a skin dropDown was not available.

Any ideas?

- Stephen

It doesn't look like you can set the owner property on foo.dropDown. It might be inaccessible in the parent class. It looks like Alex's theory is at least pointing in the right direction:

PHP Code:

trace(foo.owns(foo.dropDown)); // false
trace(foo.dropDown.hasOwnProperty('owner')); // true