Flex List selection and rendering problem

Question

I have some strange problem with my custom list.

I defined list which needs to show list of employees. In my custom list, i want to provide selectedId property in order to select(highlight) employee with concrete id. List is created according to [http://blog.flexdevelopers.com/2010/02/flex-examples-binding-value-to-combobox.html].

This is code for my custom list...

<mx:List ....>
<mx:Script>
<![CDATA[

private var _selectedId:int;

public function get selectedId():int
{
    //...
}
public function set selectedId(id:int):void
{
    _selectedId=id;
    invalidateProperties();
    invalidateDisplayList();
}
override protected function commitProperties():void
{
    super.commitProperties();
    if(dataProvider!=null)
        setSelectedId();    
}
protected function setSelectedId():void
{
    var subordinates:ArrayCollection=dataProvider as ArrayCollection;
    var subordinate:EmployeeSimpleDTO=null;
    for(var i:int=0;i<subordinates.length;i++)
    {
        var sub:EmployeeSimpleDTO=(subordinates.getItemAt(i))as EmployeeSimpleDTO;
        if(sub.employeeId==_selectedId)
        {
            subordinate=sub;
        _selectedId=sub.employeeId;
        break;
        }
    }               
    selectedItem=subordinate;   
}
override protected function collectionChangeHandler(event:Event):void
{
    super.collectionChangeHandler(event);
    invalidateProperties();
    invalidateDisplayList();
}]]>
<mx:Script>
<mx:itemRenderer>
    <mx:Component>
        <view:SubordinatesListItem employeeId       = "{data.employeeId}"
                                   employeeName     = "{data.employeeName}"
                                   employeeSurname  = "{data.employeeSurname}"
                                   employeeUsername = "{data.employeeUsername}"/>
    </mx:Component>
</mx:itemRenderer>
</mx:List>

EDIT
This is code for my item renderer

<mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml" width="100%">
<mx:Script>
    <![CDATA[

        [Embed(source="/assets/employeeIcon.png")]
        [Bindable]
        private var employeeIcon:Class;

    [Embed(source="/assets/infoIcon.png")]
        [Bindable]
        private var infoIcon:Class;


        //-----------------------------
        // private var declarations
        //-----------------------------

        private var _employeeId:int;

        public function get employeeId():int
        {
            return _employeeId;
        }
        public function set employeeId(id:int):void
        {
            _employeeId=id;
        }

    private var _employeeName:String;

    [Bindable]
        public function get employeeName():String
        {
            return _employeeName;
        }
        public function set employeeName(name:String):void
        {
            _employeeName=name;
        }

    private var _employeeSurname:String;

    [Bindable]
        public function get employeeSurname():String
        {
            return _employeeSurname;
        }
        public function set employeeSurname(surname:String):void
        {
            _employeeSurname=surname;
        }

    private var _employeeUsername:String;

    [Bindable]
        public function get employeeUsername():String
        {
            return _employeeUsername;
        }
        public function set employeeUsername(username:String):void
        {
            _employeeUsername=username;
        }           

    private function dispatchShowSubordinateDetails():void
    {
    dispatchEvent(new Event("showSubordinateDetails",true));
        }           

  ]]>
</mx:Script>
<mx:Metadata>
    [Event(name="showSubordinateDetails", type="flash.events.Event")]
</mx:Metadata>
<mx:Image source="{employeeIcon}" scaleX="0.35" scaleY="0.35"/>
<mx:Label text="{employeeName} {employeeSurname}"/>
<mx:Label text=" [{employeeUsername}]"  color="#8D8D8D"/>
<mx:Spacer width="100%"/>
<mx:LinkButton icon="{infoIcon}" click="dispatchShowSubordinateDetails()" width="30"/>
</mx:HBox>

In my code i bind some value on selectedId property of custom list(list is placed inside popup - TitleWindow).

Now, only on the first show up of my custom list, employee, who have id identical as selectedId, is not visually selected(colored) in list. When i said visually, i mean that i get correct object and index when i take selectedItem or selectedIndex property of my custom list.

Even more, on that critical first show up, when i roll mouse over item which should be selected, it stays selected(as she should be) after i roll out.

Subsequent show ups behave as expected.

I tried to give "plastic" description of my problem, so please, excuse me if i gave to little information. I just don't get what the problem is. Any ideas?

I'm unable to replicate the problem, can you provide some sample code to reproduce the problem? Are you using any custom itemRenderer? — bmleite
@bmleite - Yes i have custom renderer(question is updated). I simplified (because of limited space) my code context, and to be honest i haven't succeed to replicate problem in some simple scenario. Surely, problem is with my code in general, but i don't know what part of it to put on review. — slomir
Try to isolate the component where your custom list is contained, use some static data to fill up the forms, lists, etc... and try to replicate the problem. That seems to be your best option to find the problem. It's difficult to say what part of the code should be reviewed without seeing it first =) — bmleite

slomir slomir · Accepted Answer · 2011-06-15T11:09:35

Finally, i found my mistake.

Because my custom list is within form in parent component, i create function to reset all form elements before popup show up and bindings occur. In that code, i put myCustomList.selectedItem=null and when i remove that line, everything works as expected.

Still, I'm not sure about reasons of earlier behavior.

Flex List selection and rendering problem

1 Answers