Search with in DataGrid in Flex

Searching data with in the DataGrid, For my recent project I need this requirement. I googled a bit and found this link

Here is a nice working sample and code is also available. Thanks for that blogger.

ComboBox ItemRenderer in flex DataGrid

For my Application I need a CobmboBox in Datagrid, and the combo will have a list of data. For this I googled a few samples. Here is a sample code, I modified it with my requirements.

My requirement is populate the Datagrid and there will be columns in datagrid that can be modified and updated to the database. To achive this I created ComboBox as ItemRenderer in the DataGridColumn. The data to the Combo must be dynamic.

Sample Code

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
 creationComplete="fillDataGrid()">

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

 //  data provider of combo in datagrid, can get dynamic data by a service
 private var comboData:Array = new Array("Value0","Value1","Value2","Value3");

 /**
  *  populate the datagrid with sample data
  */
 private function fillDataGrid():void {
 var arrColl:ArrayCollection = new ArrayCollection;
 for (var i:int=0,j:int=0; i<50; i++,j++ ) {
 if ( j>3 ) j=0;

// create an object that will be provided to combo
 var obj:Object = new Object;
 obj.value = "Value"+j;
 obj.list = comboData;

// data is for first column, com is for the itemrenderer in that com object
 //value is slectedItem of combo and list is the provider of that combo
 arrColl.addItem({data:"data"+i, com:obj});

}

dg.dataProvider = arrColl;

}
 ]]>

</mx:Script>
 <mx:DataGrid id="dg" x="60" y="21" rowCount="5">
 <mx:columns>
 <mx:DataGridColumn dataField="data" headerText="Data" />
 <mx:DataGridColumn headerText="Value" itemRenderer="DynRender" />
 </mx:columns>
 </mx:DataGrid>
 </mx:Application>

DynRender.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" horizontalScrollPolicy="off">

<mx:Script>
<![CDATA[

 override public function set data(value:Object):void {
   if(value != null) {
    super.data = value;
    mycombo.selectedItem=data.com.value;
   }

 }
 ]]>

</mx:Script>
<mx:ComboBox id="mycombo" dataProvider="{data.com.list}" width="100%"  />
</mx:Canvas>

The required data for the combo box is provided by the collection in ‘com’ item, In that we will provide the list item as dataprovider of the combo box. And value will the the selectedItem.

Exporting DataGrid to CSV using Flex with Java

Exporting of DataGrid data to CSV format in Flex and Action Script 3.0

Converting Data Grid data to String (csv format):

private function exportToCSV():String {
 var xmlListColl:XMLListCollection = new XMLListCollection;
 xmlListColl= myDataGrid.dataProvider as XMLListCollection;

var csvData:String = '';
 // To get Headers
 var attrList:XMLList = xmlListColl[0].@*;
 for (var i:int = 0; i < attrList.length(); i++) {
 csvData += attrList[i].name() + ',';
 }

 csvData += '\n';
 //    To get actual data
 for ( var j:int = 0; j &amp;amp;lt; xmlListColl.length; j++) {
 var record:XMLList = xmlListColl[j].@*;
 for ( var k:int = 0; k < record.length(); k++) {
 csvData += record[k] + ',';
 }
 csvData += '\n';
 }
 return csvData;
 }

The above function will convert DataGrid data(if its data is in xml format) to csv format.

If you want to create a csv file then you have to send to the server and then download the csv file.

For sending this data to server side (implemented in java) you can use simple HTTPService in flex

and sending with the paramater – csvData what we created in above function.

In Java we will use a simple servlet.

byte[] output = request.getParameter( "input" ).getBytes();

 response.setContentType("text/csv");

 response.setHeader("Content-Disposition", "attachment; name=\"Result\"; filename=\"Result.csv\"");

 response.setContentLength( output.length );

 response.getOutputStream().write( output );

Just copy the above code in servlet that will return an output stream. Take this responce to flex

use ExternalInterface call to accept that stream and it will show you dialog box with Open and Save option

in this way we can export the datagrid data to a csv file.