Flex Grid Issues

Question

Hi,
I am using Flex Grid in my project where i am successfully able to populate xml data dynamically. what i am doing here, I am dynamically generating the xml using httpservice. This HttpService is returning an XmlList that i am using to bind the grid dynamically.
Here i am not fixing the column header text and column width as  in future the number of cloumns can be increased so i can't fix the column header text and column width.
Here the issue is: how to remove " _x0020_"  from the header text and how to fix column width dynamically using Action Script.
For better idea please refer the screen shot as attached along with post.
Please have a look on the code as pasted below:
<?xml version="1.0" encoding="utf-8"?><mx:Canvas 
xmlns:mx="http://www.adobe.com/2006/mxml" width="862" height="580"><mx:TitleWindow 
x="182" y="113" width="670" height="395" layout="vertical" title="
Top Presenters" fontSize="12"horizontalAlign="
center" verticalAlign="top" showCloseButton="true" close="CloseGridWindow()" verticalScrollPolicy="
off" borderColor="#000000"horizontalScrollPolicy="
off" borderThicknessLeft="3"borderThicknessRight="
3" borderThicknessBottom="3" creationComplete="GetTopPresentersXMLData()" backgroundColor="
#FFFFFF" cornerRadius="
0" color="#FFFFFF" >
<mx:Script><![CDATA[
import mx.controls.dataGridClasses.DataGridColumn; 
import mx.collections.XMLListCollection; 
import mx.managers.PopUpManager; 
import mx.rpc.events.FaultEvent; 
import mx.rpc.events.ResultEvent; 
import mx.rpc.http.HTTPService; 
import mx.events.FlexEvent; 
import mx.controls.Alert; 
//funtion to get Top Presenters xml data 
private function GetTopPresentersXMLData():void{
var httpService:HTTPService = new HTTPService();httpService.url =
"http://ri/CItSL/Ters.aspx?mode=all&month=march&year=2009";httpService.resultFormat =
"e4x";httpService.addEventListener(ResultEvent.RESULT, onResultHttpService);
httpService.send();
Bindable] 
private var _xmlData:XMLList; 
//funtion to receive Http Service Response as XML Document  
private function onResultHttpService(e:ResultEvent):void{
var xmlData:XMLList = e.result.Table;myGrid.dataProvider = xmlData;
for each (var node:XML in xmlData[0].children()){
addDataGridColumn(node.name());
//function to add column dynamically  
private function addDataGridColumn(dataField:String):void{
//var spacePattern:RegExp=/_x0020_/g; 
//var andPattern:RegExp=/_x0026_/g; 
//dataField=dataField.replace(spacePattern," "); 
//dataField=dataField.replace(andPattern,"&"); 
var dgc:DataGridColumn=new DataGridColumn(dataField); 
var cols:Array=myGrid.columns;cols.push(dgc);
myGrid.columns=cols;
myGrid.validateNow();
//funtion to remove grid window 
private function CloseGridWindow():void{
PopUpManager.removePopUp(
this);}
]]>
</mx:Script>  
<mx:DataGrid id="myGrid" alternatingItemColors="[#A2F4EF, #EFDE7D]" x="0" y="0" sortableColumns="false" width="658" height="352" fontSize="10" verticalAlign="middle" editable="false" enabled="true" horizontalGridLineColor="#befcc4" color="#000000">  
</mx:DataGrid>
</mx:TitleWindow>
Please let me know, If anyone knows the solution.

Answer 1

Hi,
You can follow the below mentioned code and see if this works for you.
<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml"
    creationComplete="onComplete();">
    <mx:Script>
        <![CDATA[
            // imports:
            import mx.events.FlexEvent;
            import mx.core.UIComponent;
            import mx.controls.dataGridClasses.DataGridColumn;
            import mx.controls.Text;
            import mx.utils.ObjectUtil;
            import mx.controls.Label;
            import mx.collections.ArrayCollection;
            // data provider:
            [Bindable] private var dp:ArrayCollection = new ArrayCollection();
            private function onComplete():void {
                // populate data provider here
                // to avoid calcMaxLengths execution when the app is created:
                dp = new ArrayCollection(
                        { col1: "Short", col2: "Other column 1" },
                        { col1: "Some long string", col2: "Other column 2" },
                        { col1: "Short", col2: "Other column 3" },
                        { col1: "Short", col2: "Other column 4" },
                        { col1: "The longest value in this column", col2: "Other column 5" },
                        { col1: "Short", col2: "Other column 6" },
                        { col1: "Short", col2: "Other column 7" }
            // this is going to be executed whenever the data provider changes:
            [Bindable("dataChange")]
            private function calcMaxLengths(input:ArrayCollection):ArrayCollection {
                // if there are items in the DP:
                if ( input.length > 0 ) {
                    // and no SPECIAL child exists:
                    if ( getChildByName("$someTempUICToRemoveAfterFinished") == null ) {
                        // create new SPECIAL child
                        // this is required to call measureText
                        // if you use custom data grid item renderer
                        // then create instance of it instead of UIComponent:
                        var uic:UIComponent = new UIComponent();
                        // do not show and do not mess with the sizes:
                        uic.includeInLayout = false;
                        uic.visible = false;
                        // name it to leverage get getChildByName method:
                        uic.name = "$someTempUICToRemoveAfterFinished";
                        // add event listener:
                        uic.addEventListener(FlexEvent.CREATION_COMPLETE, onTempUICCreated);
                        // add to parent:
                        addChild(uic);
                // return an input:
                return input;
            // called when SPECIAL child is created:
            private function onTempUICCreated(event:FlexEvent):void {
                // keep the ref to the SPECIAL child:
                var renderer:UIComponent = UIComponent(event.target);
                // output - this will contain max size for each column:
                var maxLengths:Object = {};
                // temp variables:
                var key:String = "";
                var i:int=0;
                // for each item in the DP:
                for ( i=0; i<dp.length; i++ ) {
                    var o:Object = dp.getItemAt(i);
                    // for each key in the DP row:
                    for ( key in o ) {
                        // if the output doesn't have current key yet create it and set to 0:
                        if ( !maxLengths.hasOwnProperty(key) ) {
                            maxLengths[key] = 0;
                        // check if it's simple object (may cause unexpected issues for Boolean):
                        if ( ObjectUtil.isSimple(o[key]) ) {
                            // measure the text:
                            var cellMetrics:TextLineMetrics = renderer.measureText(o[key]+"");
                            // and if the width is greater than longest found up to now:
                            if ( cellMetrics.width > maxLengths[key] ) {
                                // set it as the longest one:
                                maxLengths[key] = cellMetrics.width;
                // apply column sizes:
                for ( key in maxLengths ) {
                    for ( i=0; i<dg.columnCount; i++ ) {
                        // if the column actually exists:
                        if ( DataGridColumn(dg.columns[i]).dataField == key ) {
                            // set size + some constant margin
                            DataGridColumn(dg.columns[i]).width = Number(maxLengths[key]) + 12;
                // cleanup:
                removeChild(getChildByName("$someTempUICToRemoveAfterFinished"));
        ]]>
    </mx:Script>
    <mx:DataGrid id="dg" horizontalScrollPolicy="on" dataProvider="{calcMaxLengths(dp)}" width="400">
        <mx:columns>
            <mx:DataGridColumn dataField="col1" width="40" />
            <mx:DataGridColumn dataField="col2" width="100" />
        </mx:columns>
    </mx:DataGrid>
</mx:WindowedApplication>
Regards