Selection shifts while scrolling in data grid

Question

I'm newbie to flex and this forum as well. I've a datagrid which displayed images in mx:VBox in itemrenderer, now I need to allow user to multi select the VBox . but when I select some item(s), change the background color of VBox and scroll the grid it automatically select some rendom item(s) and set the same background color. I know flex reuse item renderer, which I read it here

but how can I prevent my selection only item(s). below is my code

<mx:DataGrid  id="dgPhoto" 
                              variableRowHeight="true" 
                              dataProvider="{StyleItemsArray}" 
                              verticalGridLineColor="white" 
                              verticalGridLines="true" 
                              showHeaders="false" 
                              width="100%" 
                              height="100%"
                              allowMultipleSelection="true"
                              >
                    <mx:columns>
                        <mx:DataGridColumn width="250" headerText="Preview" dataField="img">
                            <mx:itemRenderer>
                                <mx:Component>
                                    <mx:VBox height="215" horizontalAlign="center" click="this.setStyle('backgroundColor', 'white')">
                                        <mx:Script>
                                            <![CDATA[


                                            ]]>
                                        </mx:Script>

                                        <mx:HBox horizontalAlign="center" horizontalGap="0">
                                            <mx:Image brokenImageBorderSkin="{null}" brokenImageSkin="@Embed(source='../img/errorIcon231.png')" id="image1" width="180" source="{data.source}" horizontalAlign="right"></mx:Image>
                                            <mx:VBox horizontalAlign="center" verticalGap="2">                                      
                                                <mx:Button click="{btnZoom_clickHandler(event, data.sourceHRES, data.label, data.IDMSFile)}" toolTip="Zoom" id="btnZoom" icon="@Embed(source='../img/zoom.png')" fillColors="#BB3030"/>
                                                <mx:Button click="{btnDownload_clickHandler(event, data.IDMSFile)}" toolTip="Place this style" id="btnDownload" icon="@Embed(source='../img/Download.png')" fillColors="#BB3030"/>

                                            </mx:VBox>
                                        </mx:HBox>
                                    </mx:VBox>
                                </mx:Component>                         
                            </mx:itemRenderer>
                        </mx:DataGridColumn>
                    </mx:columns>
                </mx:DataGrid>

user1875642 user1875642 · Accepted Answer · 2012-12-20T12:27:10

You shall store and handle your selected/unselected status in 'data' item which is passed to each itemrenderer.

Or you can reference grid from itemrenderer and check if current data is among selected items.

Or you can extend standard grid itemrenderer instead of using Box and override methods which are called when item is selected/unselected.

But is there any particular need for usage of that old, buggy, rigid mx datagrid instead of spark one? Do you really need custom selection indication instead of styling standard selection colors?

Selection shifts while scrolling in data grid

1 Answers