DragEnabled problem with ADG ItemRenderer

Question

I'm using an AdvancedDataGrid with a regular ArrayCollection binding and DragEnabled "true". I'm having a vertical scroll also since I've plenty of items in the grid now. With normal ADG rendering, I can scroll to the bottom most items automatically while dragging any item, or, can auto-scroll to toppest items of the list (which eventually was out of the screen rows). But this is not working (auto-scroll) if I'm using any item renderer for the rows. I'm using a normal VBox kind of component as item renderer, with background color. The grid component not auto-scroll anymore while dragging any item to the beneath of the screen shown items. I've fate up try fixing this problem. Any workarounds?

Answer 1

Item Renderers are" recycled" by Flex as they scroll in and out of view. So when you change a button's selected state to true and then scroll around, that renderer ends up getting recycled to another item and causes this to look wrong.
The trick is you have to make the item renderer update itself. there are many ways. One sure-fire way I tend to fall back on is to add a property to the data provider, then bind to that in the renderer-changing it as needed.
1) When you set up your data provider, add a new property "toggled" as a boolean:
private function init(event:Event):void
//populate array with 50 items
for (var i:uint=1; i<51; i++)
itemAC.addItem({label:"B"+i, toggled:false});
2) Now change your renderer, binding the selected property of the button to this new prop.
     Also, add a bit of code to the change event of the button:
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="150" height="150">
<mx:Button id="btn" label="{data.label}" x="25" y="66" toggle="true" width="100"
    change="{data.toggled = btn.selected}" selected="{data.toggled}" >
</mx:Button>
</mx:Canvas>
Result: the item renderer now looks to its data property to decide how to behave, and will have the proper state (selected or not) no matter if it gets recycled to another item in your data provider or not.
HTH