how to retrieve data from database using flex code

Question

I want to display the values coming from database in a datagrid using flex. Here is my code. I am using webservice. I have database values from application1_initializeHandler() method. How to fetch these values into onResult() method and perform databinding? I want code for onResult() function and data binding. Please help..

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
               xmlns:s="library://ns.adobe.com/flex/spark" 
               xmlns:mx="library://ns.adobe.com/flex/mx" initialize="application1_initializeHandler(event)">
    <fx:Script>
        <![CDATA[
            import mx.events.FlexEvent;
            import mx.rpc.AsyncResponder;
            import mx.rpc.AsyncToken;
            import mx.rpc.events.FaultEvent;
            import mx.rpc.events.ResultEvent;


            protected function application1_initializeHandler(event:FlexEvent):void
            {
                AreasOfWestBengal.loadWSDL();
                var s:String = "SELECT * FROM [CSFTestNew].[dbo].[AreasOfWestBengal]";
                var t:AsyncToken = AreasOfWestBengal.GetRec("[AreasOfWestBengal]", s, "1", "SQLExpress");
                t.addResponder(new AsyncResponder(onResult, onFault, t));
            }

            protected function onResult(event:ResultEvent, token:Object=null):void
            {


            }

            protected function onFault(event:FaultEvent, token:Object=null):void
            {
                trace(event.fault.toString());
            }
        ]]>
    </fx:Script>
    <fx:Declarations>
        <s:WebService id="AreasOfWestBengal" wsdl="https://www.geoviewer8.com/gv8webservices/CSF_NewGVOConfig/GVOConfig.asmx?wsdl"/>
    </fx:Declarations>
    <mx:DataGrid x="197" y="83" width="348" height="216">
        <mx:columns>
            <mx:DataGridColumn headerText="Areas" dataField="Areas"/>
            <mx:DataGridColumn headerText="SubAreas" dataField="SubAreas"/>
        </mx:columns>
    </mx:DataGrid>  

</s:Application>

Thanks

S Balough S Balough · Accepted Answer · 2012-12-13T03:04:57

One solution would be to set a data provider (like an ArrayCollection) for your mx:DataGrid as its dataProvider attribute - see the Passing Data to a DataGrid Control section here for an example.

Now, when your onResult function executes, you probably want to first clear out your data provider (remove any rows from your DataGrid) - if the data source is an ArrayCollection, you would use the removeAll method. Now obtain the actual web service call result from the ResultEvent parameter (in your code, it is event.result). You need to know the data type of this result value (it should be some kind of list data structure) so that you can figure out how to add its elements into the DataGrid's data provider as rows of the grid. For example, if your data provider is an ArrayCollection, you can add each element of event.result into this ArrayCollection using its addItem method. If event.result implements the IList interface, you could add all rows into the data provider using the addAll method of ArrayCollection. Make sure that the objects that you add into the data provider as the rows conform to your mx:DataGridColumns - i.e. these objects need to have Areas and SubAreas properties so that their values will be displayed in these columns.

Here is a web service-specific DataGrid example from Adobe.

protected function onResult(event:ResultEvent, token:Object=null):void
{
     // Assuming the grid's data provider is an ArrayCollection

     // (1) clear existing table rows
     dataProvider.removeAll();

     // (2) add the new rows from event.result into dataProvider 
     // using dataProvider.addAll(event.result) if possible or one at a time
     // using dataProvider.addItem(...)
     dataProvider.addAll(event.result);

     // An alternative to the above would be to replace the dataProvider 
     // of your grid with event.result if it is a compatible data type
     //       AreasOfWestBengal.dataProvider = event.result;
}

how to retrieve data from database using flex code

1 Answers