Datagrid and Inline Item renderer problem

I have a datgrid with two inline item renderers. The dataprovider for my DG is a nested object (objects within objects within objects i.e 3-layered).

Main Object - 1st Level
                      |
          2nd Level Object 1
                            |
                        3rd level object '1' => ('name'=>somename,'id'=>someid)
                        3rd level object '2'
                           .
                           .
                           .
                           .
                        3rd level object 'n'
         2nd Level Object 2
                            |
                        3rd level object '1' => ('name'=>somename,'id'=>someid)
                        3rd level object '2'
                           .
                           .
                           .
                           .
                        3rd level object 'n'

I use 2 item renderers (one for each datagrid column) which loops thro the 2nd level object1 and 2 respectively (the 2nd level object is a dynamic array of objects, in that the number of objects within keep changing).

Within the item renderer I loop thro the 2nd level object using a foreach and then display the data. The data is a linkbutton, which when clicked , calls a remote object function to delete the data from the database

now on the result event of the remote object function call, i call the function to repopulate the DG, so that the updated data is displayed.

When i click on the linkbutton in the first row, the backend works perfectly fine (the data gets deleted from the database and the refreshed data is sent back), but for some reason, the deleted data suddenly appears in the 2nd row.

When i delete it from the second row, it appears on the 3rd row (nothing happens in the backend since the data is already deleted).. and so on, till it appears on the last row and then the DG looks exactly the way it shld have looked after the first delete.

This is just the beginning. The second item renderer also displays a linkbutton, which when clicked, displays that data in the previous column (the one where this data can be deleted). When i click on 1st row, the data gets added in the previous column of the second row .. and so on..

Basically, my DG is acting really weird. I overrided the set data function in the item renderer to refrsh the data and called its invalidateDisplayList. I also call the Datagrid's invalidateDisplayList function after each refresh. The behavior remains the same.

Please help me on this ...

Here's my DB code :

<mx:DataGrid id="privilegesDG" width="100%" variableRowHeight="true" minHeight="500">
<mx:columns>
<mx:DataGridColumn headerText="Roles Assigned">
    <mx:itemRenderer>
    <fx:Component>
        <mx:VBox creationComplete="box1_creationCompleteHandler()">
        <fx:Script>
        <![CDATA[
            import com.pm.modules.events.UpdateDBEvent; 

            import mx.containers.HBox;
            import mx.controls.Alert;
            import mx.controls.Label;
            import mx.controls.LinkButton;
            import mx.events.FlexEvent;

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

            protected function box1_creationCompleteHandler():void
            {
            for each(var temp:Object in data.roles){
                var hgrp:HBox = new HBox();
                hgrp.autoLayout = false;
                var lbl:Label = new Label();
                lbl.text = temp.rname;

                var lb:LinkButton = new LinkButton();
                lb.label = 'X';
                lb.id = temp.rid.toString();
                lb.f开发者_Python百科ocusEnabled = true;
                    lb.addEventListener(MouseEvent.CLICK,handleClick);

                hgrp.addElement(lbl);
                hgrp.addElement(lb);

                this.addElement(hgrp);
            }
        }

        protected function handleClick(event:MouseEvent):void{
                     dispatchEvent(new UpdateDBEvent(UpdateDBEvent.ON_DELETE_PRIVILEGE_ROLE_MAP,0,0,0,event.target.id,0,true));
                                    }
                                ]]>
                            </fx:Script>
                        </mx:VBox>
                    </fx:Component>
                </mx:itemRenderer>
            </mx:DataGridColumn>
            <mx:DataGridColumn headerText="Roles Not Assigned">
                <mx:itemRenderer>
                    <fx:Component>
                        <mx:VBox creationComplete="box1_creationCompleteHandler()">
                            <fx:Script>
                            <![CDATA[
                                import com.pm.modules.events.UpdateDBEvent;

                                import mx.containers.HBox;
                                import mx.controls.Alert;
                                import mx.controls.Label;
                                import mx.controls.LinkButton;
                                import mx.events.FlexEvent;

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

                                protected function box1_creationCompleteHandler():void
                                {
                                    for each(var temp:Object in data.notroles){                                         
                                        var lb:LinkButton = new LinkButton();
                                        lb.label = temp.rname;
                                        lb.id = temp.rid.toString();
                                        lb.addEventListener(MouseEvent.CLICK,handleClick);

                                        this.addElement(lb);
                                    }
                                }

                                protected function handleClick(event:MouseEvent):void{
                                    dispatchEvent(new UpdateDBEvent(UpdateDBEvent.ON_ASSIGN_ROLE_TO_PRIVILEGE,data.ID,event.target.id,0,0,0,true)); 
                                }
                            ]]>
                        </fx:Script>
                        </mx:VBox>
                    </fx:Component>
                </mx:itemRenderer>
            </mx:DataGridColumn>
        </mx:columns>
    </mx:DataGrid>

The updateDBEvent is responsible for calling the remote function that updates the DB.

Not really sure if this will help, would need to look at your code to be able to say for sure. But if you want the DataGrid to redraw, dont call the

invalidateDisplayList()

instead, call

invalidateList()