How to get selected values (using checkBox) from DataGrid in flex

Question

i have a datagrid which is getting values from a XML file (getting this xml file from database using PHP and HTTP request in flex). i have created a checkbox in every row in data grid. and here is my requirement: i want to select tow or three check-box and would like to get all the values form that particular ROWs in some form , prefered arraycollection (such that i can pass this array directly to a bar chart) .. can some one help me as i am new to flex .

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" creationComplete="siteData.send()">
<mx:Script>
    <![CDATA[
        import mx.collections.XMLListCollection;
        import mx.controls.*;
        import mx.events.ListEvent;
        import mx.rpc.events.ResultEvent;
        import mx.controls.Alert;
        [Bindable] private var fullXML:XMLList; 
        private function contentHandler(evt:ResultEvent):void{
            fullXML = evt.result.values;
        }

    ]]>
</mx:Script>
<mx:VBox>
    <mx:Label text="This Data Grid is loading the full XML file"/>
    <mx:DataGrid width="600"  id="datagrid" dataProvider="{fullXML}">

        <mx:columns>
            <mx:DataGridColumn headerText="Select">
                <mx:itemRenderer>
                    <mx:Component>
                        <mx:HBox horizontalAlign="center">

                            <mx:CheckBox id="check"/>
                        </mx:HBox>
                    </mx:Component>
                </mx:itemRenderer>
            </mx:DataGridColumn>
            <mx:DataGridColumn dataField="release_version" headerText="Release"/>
            <mx:DataGridColumn dataField="build" headerText="build"/>
            <mx:DataGridColumn dataField="time_login" headerText="time_login"/>
            <mx:DataGridColumn dataField="time_tunnel" headerText="time_tunnel"/>
            <mx:DataGridColumn dataField="rate_login" headerText="time_tunnel"/>
            <mx:DataGridColumn dataField="rate_tunnel" headerText="rate_tunnel"/>
        </mx:columns>
    </mx:DataGrid>
</mx:VBox>
<mx:HTTPService url="http://localhost/php_genxml.php" id="siteData" result="contentHandler(event)" resultFormat="e4x"/>
</mx:Applicaton>

i want to select some check box and want to get the values of all the fields in data-grid correspond to that check-box, can some one help me how to get the selected values (selected values of check-box) in flex and action script.

Answer 1

<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

there are mainly two functions used...

public function objectToXML(obj:Object, qname:String):XML 
        {
            var qName:QName = new QName(qname);
            var xmlDocument:XMLDocument = new XMLDocument();
            var simpleXMLEncoder:SimpleXMLEncoder = new SimpleXMLEncoder(xmlDocument);
            var xmlNode:XMLNode = simpleXMLEncoder.encodeValue(obj, qName, xmlDocument);
            var xml:XML = new XML(xmlDocument.toString());
            return xml;
        }

        public function xmlToObject(value:String):Object 
        {
            var xmlStr:String = value.toString();
            var xmlDoc:XMLDocument = new XMLDocument(xmlStr);
            var decoder:SimpleXMLDecoder = new SimpleXMLDecoder(true);
            var resultObj:Object = decoder.decodeXML(xmlDoc);
            return resultObj;
        }