Geek asks and answers

Issues with Spark DropDownList as itemEditor in AdvancedDataGrid

I am trying to use Spark DropDownListas itemEditorin AdvancedDataGrid. Howerver, I came across two questions:

  • Clicking on an item in DropDownList changes the selected row in ADG. You can see this behavior by compiling the code below and following these steps.

    • Open DropDownList by pressing "A" on line 1
    • Select "C" with the mouse

    The value changes from "A" to "C", and line 3 is the selected line in the ADG. It looks like the mouse click in the DropDownList is also handled by the ADG itself, which changes the selected row accordingly. I could not figure out how to prevent this. The expected behavior will be that row 1 will still be selected after closing DropDownList.

  • Clicking on the DropDownList scrollbar closes the DropDownList. (I just found a solution to this problem in related issues when writing this: Scrolling in the drop-down list inside the DataGrid itemEditor does not work )

application

<?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" verticalAlign="middle"/>
    </s:layout>

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

            [Bindable]
            private var myDataProvider:ArrayCollection = new ArrayCollection([
                {label: "Row 1", value: "A"},
                {label: "Row 2", value: "B"},
                {label: "Row 3", value: "C"},
                {label: "Row 4", value: "D"},
                ]);
        ]]>
    </fx:Script>

    <mx:AdvancedDataGrid dataProvider="{myDataProvider}" editable="true">
        <mx:columns>
            <mx:AdvancedDataGridColumn headerText="Label" dataField="label" width="150"/>
            <mx:AdvancedDataGridColumn headerText="Value" dataField="value" width="200" editorDataField="selectedItem"
                                       itemEditor="DropDownListEditor"/>
        </mx:columns>
    </mx:AdvancedDataGrid>
</s:Application>

ItemEditor

<?xml version="1.0" encoding="utf-8"?>
<s:MXAdvancedDataGridItemRenderer 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"
                                  implements="mx.managers.IFocusManagerComponent">

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

            [Bindable]
            public var values:IList = new ArrayList(["A", "B", "C", "D", "E", "F", "G", "H", "I", "J",
                "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"]);

            public function get selectedItem():*
            {
                return dropDownList.selectedItem;
            }

            public override function setFocus():void
            {
                dropDownList.setFocus();
            }
        ]]>
    </fx:Script>

    <s:DropDownList id="dropDownList" top="2" left="2" right="2" bottom="2" dataProvider="{values}"
                    selectedItem="{listData.label}" open="dropDownList.skin['dropDown'].owner = this"/>
</s:MXAdvancedDataGridItemRenderer>
+3
source share
2 answers

Thanks ed, I found a solution that seems to work very well. An DropDownListevent is used MOUSE_DOWNto close dropDown. Thus, it dropDownno longer exists when the event fires MOUSE_UP. This is why ADG receives the event MOUSE_UPand modifies the selected row.

DropDownList, MOUSE_UP, dropDown. .

protected override function dropDownController_closeHandler(event:DropDownEvent):void
{
    systemManager.getSandboxRoot().addEventListener(MouseEvent.MOUSE_UP, systemManager_mouseUpHandler, true);
    super.dropDownController_closeHandler(event);
}

protected function systemManager_mouseUpHandler(event:MouseEvent):void
{
    systemManager.getSandboxRoot().removeEventListener(MouseEvent.MOUSE_UP, systemManager_mouseUpHandler, true);
    event.stopImmediatePropagation();
}
+3

. DropDownEvent.CLOSE AdvancedDataGrid ( , ).

ADG mouseUpHandler endEdit.

+3

More articles:


All Articles