Flex multiple selection drop down list with scrolling

Question

I'm working in flex and I made a custom drop down where there are check boxes to allow the user to select multiple options. I used this template.

However this does not have scrolling because if you allow scrolling for some reason the checkboxes start to mess up. For instance if you have options 1 to 8 and only 1 to 5 are shown. You select option 1 and then scroll down to select option 7. When you scroll up the checkboxes start to switch around like option 3 all of a sudden is showing selected. Keep scrolling up and down and the checkbox selection just changes on it's own. I think this is a rendering issue and the actual selection data isn't changed at all (it knows only option 1 and option 7 were selected). Any ideas on how to fix this?

    public function onOpen(event:DropDownEvent):void 
    {//load the checkboxes and set the mouse tracker
        activateAllCheckBoxes();
        this.scroller.verticalScrollBar.addEventListener(Event.CHANGE, list_verticalScrollBar_change);
        callLater(observeMouse);
    }   

    private function list_verticalScrollBar_change(evt:Event):void 
    {
        //currentlySelectedCheckBoxes = selectedCheckboxes;
        UpdateCheckBoxesWhenScrolling();
        selectedIndex = -1;
    }

    protected function UpdateCheckBoxesWhenScrolling():void
    {
        for (var c:int = 0; c < dataGroup.numElements; c++) {
            var obj:DropDownCheckBox = dataGroup.getElementAt(c) as DropDownCheckBox;
            if(obj!=null)
            {
                var judgDebtorFromCheckBox:JudgDebtor = (obj.data) as JudgDebtor;
                if(FindInCurrentList(judgDebtorFromCheckBox.JudgmentDebtorId)>0)
                {
                    obj.checkbox.selected = true;
                }
                else
                {
                    obj.checkbox.selected = false;
                }
            }
        }
    }

    private function FindInCurrentList(ID:int):int
    {
        for(var i:int=0;i<currentlySelectedCheckBoxes.length;i++)
        {
            var JD:JudgDebtor = currentlySelectedCheckBoxes.getItemAt(i) as JudgDebtor;
            if(JD.JudgmentDebtorId == ID)
                return 1;
        }
        return -1;
    }

So above code I register a scroll event listener on the drop down. It will update the drop down entries which has a check box and it uses an array collection called: currentlySelectedCheckBoxes. I debug the UpdateCheckBoxesWhenScrolling function and it's working fine, in other words it will check off the ones selected but for some reason it still is showing the wrong results for instance 11 entries in the list and only the second one is selected I scroll down and I can't see the the second entry but all of a sudden the last entry is showing that it's checked off.

Jasmine Jasmine · Accepted Answer · 2015-04-24T09:40:01

This happens because the drop down list reuses the renderers when you scroll. For example if you have checked 1st item and scroll, the renderer for that is reused to display the item that becomes visible when you scroll. So the last item shows as checked. To avoid messing up the selection, you will have to do the following in the renderer that you are using

override public function set data(value:Object):void
{
     super.data = value;

     //inspect the property which indicates whether to select the checkbox or not
     //and set the value of selected property accordingly
}

Hope this helps

Flex multiple selection drop down list with scrolling

1 Answers