Flex checkbox control in datagrid

Question

In my flex application im using a datagrid which has checkbox itemrenderer column im using the following code

<mx:DataGridColumn headerText="Select"  dataField="isSelect" editable="false" textAlign="center"   >
                        <mx:itemRenderer >
                            <mx:Component>

                                <mx:CheckBox  selected="{data.isSelect}" change="outerDocument.addDetail(data)"  > 
                                </mx:CheckBox>
                            </mx:Component>
                        </mx:itemRenderer>
                    </mx:DataGridColumn>

                    <mx:DataGridColumn headerText="FirstName" dataField="firstName" color="black" editable="false" width="125" />
                    <mx:DataGridColumn headerText="SecondName" dataField="lsecondName" color="black" editable="false" width="125"/>

after selecting the checkbox and im saving the details in my DB. now, when i come for fetching data the selected details from the db should be selected in checkbox. how can i differentiate selected record and unselected Record.?? thanxx in advance

Sagar Rawal Sagar Rawal · Accepted Answer · 2011-12-14T11:14:58

<mx:itemRenderer>
                        <mx:Component>
                            <mx:HBox horizontalAlign="center" verticalAlign="middle">
                                <mx:Script>
                                    <![CDATA[
                                        var objTemp:Object = new Object();

                                        override public function set data(value:Object):void
                                        {
                                            if(value != null)
                                            {
                                                var xml:XML = XML(value);
                                                super.data = value;
                                                objTemp = outerDocument.xmlToObject(xml.toString());
                                                if(objTemp.story['quiz_score'] != null)
                                                {
                                                    chkAssignment.visible = false;
                                                }
                                                else
                                                {
                                                    chkAssignment.visible = true;
                                                }
                                                if(objTemp.story.is_selected == false)
                                                {
                                                    chkAssignment.selected = false;
                                                }
                                                else
                                                {
                                                    chkAssignment.selected = true;
                                                }

                                            }
                                        }

                                        private function deleteAssignment():void
                                        {


                                            if(chkAssignment.selected)
                                            {
                                                outerDocument.isChanged = true;

                                                objTemp.story.is_selected = true;
                                                var xml:XML = outerDocument.objectToXML(objTemp,"record");

                                                var xmlList:XMLList = xml.children();
                                                xml = xmlList[0] as XML;

                                                outerDocument.dgListeningLog.dataProvider[outerDocument.dgListeningLog.selectedIndex] = xml;

                                                outerDocument.arrAssignment.push({"story_name": XML(outerDocument.dgListeningLog.selectedItem).story_title.toString() ,"student_assignmentId": XML(outerDocument.dgListeningLog.selectedItem).assignment_id.toString(),"session_key": XML(outerDocument.dgListeningLog.selectedItem).session_key.toString(),"selectedIndex": outerDocument.dgListeningLog.selectedIndex.toString()});
                                            }
                                            else
                                            {
                                                outerDocument.isChanged = true;

                                                objTemp.story.is_selected = false;
                                                var xml:XML = outerDocument.objectToXML(objTemp,"record");

                                                var xmlList:XMLList = xml.children();
                                                xml = xmlList[0] as XML;

                                                outerDocument.dgListeningLog.dataProvider[outerDocument.dgListeningLog.selectedIndex] = xml;

                                                for(var i:int =0; i < outerDocument.arrAssignment.length; i++)
                                                {
                                                    if(outerDocument.arrAssignment[i].selectedIndex == outerDocument.dgListeningLog.selectedIndex)
                                                    {
                                                        outerDocument.arrAssignment.splice(i,1);
                                                        break;
                                                    }
                                                }
                                            } 

                                        }

                                    ]]>
                                </mx:Script>
                                <mx:CheckBox id="chkAssignment" change="{deleteAssignment();}"/>
                            </mx:HBox>
                        </mx:Component>
                    </mx:itemRenderer>

here i am storing the selected value or array in another array and when clicking on the remove button it will check and delete the value from the main array that is data provider of the dataGrid.

If you are facing the problem when scrolling the datagrid CheckBox shows wrong value than copy following method from code:

override public function set data(value:Object):void

Flex checkbox control in datagrid

2 Answers