Itemrenderer in Datagrid wrong display

Question

I have a datagrid with an itemrenderer component. In the itemrenderer is a button which should be displayed in every second row of the datagrid. It appears that way after compiling.

As soon as I scroll the datagrid the buttons are displayed incorrectly, why??

Link to image

    <fx:Script>
    <![CDATA[
    import mx.collections.ArrayCollection;
    import mx.events.FlexEvent;

    [Bindable]
    private var _ac:ArrayCollection = new ArrayCollection();

    private function applicationComplete(e:FlexEvent):void{
        for (var i:Number = 0; i < 100; i++ ) {
            var b:Boolean = (i % 2) ? true : false;
            _ac.addItem({text:'foo' + i, showBtn:b});
        }
    }

    ]]>
</fx:Script>

<mx:DataGrid id="datagrid" dataProvider="{_ac}" width="200">
    <mx:columns>
        <mx:DataGridColumn headerText="Text" dataField="text" />
        <mx:DataGridColumn headerText="Edit" >
            <mx:itemRenderer>
                <fx:Component>
                    <mx:Canvas>
                        <fx:Script>
                            <![CDATA[
                            override public function set data(value:Object):void {
                                super.data = value;
                                if(value != null){
                                    if (data.showBtn == false) editBtn.visible = false; 
                                }   
                            }
                            ]]>
                        </fx:Script>
                        <s:Button id="editBtn" label="edit" />
                    </mx:Canvas>
                </fx:Component>
            </mx:itemRenderer>
        </mx:DataGridColumn>
    </mx:columns>

</mx:DataGrid>

Answer 1

Because the renderer is reused upon scrolling, you need to switch it back to visible.

Change

if (data.showBtn == false) editBtn.visible = false;

to

if (data.showBtn == false){
   editBtn.visible = false;
}else{ 
   editBtn.visible = true; 
 }

Or simply use this syntax:

editBtn.visible = (data.showBtn as Boolean);