CheckBox itemrenderer in datagrid got selected/uns

Question

In my application i am having a datagrid which was created dynamically. For each and every cell in datagrid, i am having checkbox as itemrenderer. As of now it is working fine as expected.But while scrolling vertically the checkboxes getting selected/unselected automatically.I got this same problem in "horizontal scrolling" also, but i resolved it by setting "minWidth" for each columns.

I am creating datagrid like this,

for(i=0;i<recordCount;i++)
            {   
                var obj:Object = new Object();
                for(var j:int=0;j<maxPages;j++){

                    {
                        obj["page"+(j+1)]=((xml..item.(pageOrder==(j+1))).length()>i)?(xml..item.(pageOrder==(j+1)))[i].pageTempVerId[0].toString()+" ("+(xml..item.(pageOrder==(j+1)))[i].pageVerUserName[0].toString()+")":"";

                    }

                }
                dp.addItem(obj);
            }

for(i=0;i<maxPages;i++)
            {
                var printPDFItemrenderer:ClassFactory = new ClassFactory(PrintPDFCheckboxComponent)
                printPDFItemrenderer.properties = {onClick: printpdfchkid_clickHandler};
                var grid:DataGridColumn = new DataGridColumn();
                grid.itemRenderer = printPDFItemrenderer;
                grid.headerText = pageName[i];
                grid.width = 150;
                grid.minWidth = 150;
                grid.dataField = "page" + (i+1);
                if(recordCount<(xml..item.(pageOrder==(i+1))).length())
                    recordCount = (xml..item.(pageOrder==(i+1))).length()
                col.push(grid);
            }
            printpdfdg.columns = col;


<mx:DataGrid id="printpdfdg" width="100%" height="380"
                     textAlign="center"  dataProvider="{dp}" sortableColumns="false" horizontalScrollPolicy="off" verticalScrollPolicy="auto" rowHeight="40" horizontalCenter="0" variableRowHeight="false">
        </mx:DataGrid>

In the itemrenderer mxml file

<mx:checkBox id="printpdfchkid" label="{data[DataGridListData(listData).dataField]}" 
            selected="{data.data[DataGridListData(listData).dataField]}" labelPlacement="right" labelVerticalOffset="0"  
            click="onClick(event)" />

So anyone can found what i am doing wrong

Answer 1

The item renderers are recycled so when you scroll the renderers of the rows that are no longer visible are reused for the new rows that are now visible. A solution is to override the set data property and set the checkbox state there. So when the renderer is reused the renderer data setter is used to assign it's new data that must represent, here you can do the proper setup. Binding should also work . You should google the renderer recycling in Flex. Also you should add more information in your uestion like the exact DataGrid you use(mx, spark or advanced)

Answer 2

i had same experience. to solve this problem add a boolean property in your object and then try to follow given code in your item renderer.

private var _obj:Object;

public function get obj():Object
        {
            return _obj;
        }

        public function set obj(value:Object):void
        {
            _obj = value;
        }
override public function set data(value:Object) : void
        {
            this.itemCheckBox.label = value.Name;
            this.itemCheckBox.selected = value.isSelected;
            obj = value;


        }
//check box change event handler
protected function itemCheckBox_changeHandler(event:Event):void
        {
            obj.isSelected = itemCheckBox.selected;
        }