DataGrid - Extracting edited Value from DataGridEvent

    private function saveValue(event:DataGridEvent) : void
    {
        if(event.reason == DataGridEventReason.CANCELLED)    
           return;
        var newValue : String = TextInput(event.currentTarget.itemEditorInstance).text;
        var prevCellValue : String = myDataGrid.selectedItem[event.dataField];
       
        if( prevCellValue == newValue)
           return;
        Alert.show("New value :: "+newValue);
    }

    ...
    ...

 <mx:DataGrid id="myDataGrid" width="100%" dataProvider="{defCreativeVals}" editable="true" itemEditEnd="{saveValue(event)}">
 <mx:columns>
     <mx:DataGridColumn headerText="Column" id="colColumn" editable="false" dataField="name"/>
     <mx:DataGridColumn headerText="Value" id="colValue" editable="true" dataField="value" />
 </mx:columns>
 </mx:DataGrid>

DataGrid Headerrenderer - Header Tooltip


package mypackage
{
import mx.controls.Text;

public class DGHeaderRenderer extends Text
{
public function DGHeaderRenderer()
{
height = 20;
}


override public function set data(value:Object):void {
super.data = value;

this.toolTip = "Click to sort by this column or reverse sort order.";
super.invalidateDisplayList();
}
}
}

and use the above as
<mx:DataGridColumn id="mycol" headerText="Col" dataField="col1" headerRenderer="mypackage.DGHeaderRenderer"/>




http://www.cflex.net/showFileDetails.cfm?ObjectID=443&Object=File&ChannelID=1

View Demo

Single ItemRenderer for Multiple Columns in a DataGrid

Many a times we have similar columns in a datagrid and are required to be rendered in a similar manner with only little variations like formatting of the column. It is redundant in such a case to write a separate ItemRenderer per column. A better approach would be to write single ItemRenderer and pass properties to the ItemRenderer to identify a particular column.


This can be achieved by settings the ItemRenderer to column using Actionscript.
The catch is to pass properties to ItemRenderer using ClassFactory.properties method.

http://livedocs.adobe.com/flex/2/langref/mx/core/ClassFactory.html

Here's the sample code:

---

var colRendererFactory:ClassFactory = new ClassFactory(columnRendererClass);
colRendererFactory.properties = {columnName:"mycol1"};
column1.itemRenderer = colRendererFactory

var colRendererFactory2:ClassFactory = new ClassFactory(columnRendererClass);
colRendererFactory2.properties = {columnName:"mycol2"};
column2.itemRenderer = colRendererFactory2;

---

This way you can have the same itemrenderer for multiple columns and can do different styling for each column based on the properties passed.

Adding Total Row at the end of DataGrid

Algo:
====

1. Create two datagrids and put both in a VBox. Set the 'verticalGap' of the VBox to zero.
2. First datagrid contains all the rows while the second one contains only the total row.
3. Second datagrid has
a) showHeaders = false
b) rowCount = 1
4. Dataprovider of the First datagrid is the arraycollection containing the Objects/data representing various rows
5. Dataprovider of the Second datagrid is the arraycollection containing ONLY one item which contains the total dataobject.

e.g.
The code would be something like :


Click here for demo
Click here for the source code

Approach 2
Another approach has been mentioned at:
http://blogs.adobe.com/aharui/2007/04/datagrid_footers.html

But the above implementation doesn't take care of resizing columns. In order to add that support:
1. add following function to FooterDataGrid
public function recreateBorder() : void
{
removeChild(DisplayObject(border));
border = null;
createBorder();
}

2. call this function on the "columnStretch" event i.e.

columnStretch="{dg1.recreateBorder()}" >

Click here to see the demo.

Exporting Datagrid data to excel

This is a updated version of http://www.cflex.net/showFileDetails.cfm?ObjectID=298&Object=File&ChannelID=1

Algo:
===
1. Convert the datagrid data to csv string
2. Post data to a servlet
3. Servlet returns the same csv string back with content -type of the HTTPResponse set to "application/ms-excel"


1. Convert the datagrid data to csv string
This is a generic version and should work with any datagrid.

public class DataGridCSVTransformer
{
private static var csvSeparator : String = "\t";
private static var lineSeparator = "\n";

public static function toCSV(dg : DataGrid) : String
{
var str : String = "";
for(var i : int = 0; i <>
{
var dgc : DataGridColumn = dg.columns[i];
if(!dgc.visible)
continue;
str += "\""+dgc.headerText+"\"";
if(i < (dg.columnCount -1))
str += csvSeparator;
}
str += "\r\n";
var rowCount : int = dg.dataProvider.length;

for(var j:int = 0; j <>
{
for(var k : int = 0; k <>
{
var dgc : DataGridColumn = dg.columns[k];
if(!dgc.visible)
continue;
var obj : Object = null;
if(dg.dataProvider is ArrayCollection)
obj = (dg.dataProvider as ArrayCollection).getItemAt(j);
else
obj = (dg.dataProvider as Array)[j];

str += "\""+dgc.itemToLabel(obj)+"\"";
if(k < (dg.columnCount -1))
str += csvSeparator;
}
if(j < (rowCount - 1))
str += lineSeparator;
}

Alert.show("String :: "+str);
return str;
}
}

2. Post the CSV data to servlet
private function doPost(event:Event) : void
{
var csvConverter : DataGridCSVTransformer = new DataGridCSVTransformer();
var dgCSV : String = csvConverter.toCSV(dg);
var url : String = "http://localhost:8080/flextest/reports/genreport";
var urlr : URLRequest = new URLRequest(url);
urlr.method = "POST";
var urlv : URLVariables = new URLVariables();
urlv.reportdata = dgCSV;
urlr.data = urlv;
navigateToURL(urlr,"_blank");
}

3. Servlet returns the same csv string back with content -type of the HTTPResponse set to "application/ms-excel"

public void generateReport(HTTPServletRequest req, HTTPServletResponse res)
throws ServletException, IOException
{
String csvData = req.getParameter("reportData");
res.setContentType("application/ms-excel");
res.getOutputStream().print(csvData);
}