Re: [flexcomponents] Extending Datagrid Headers

[slangeberg]

We needed to do something similar, where a datagrid would have metadata /
summaries inline, but didn't want them to sort. Another example would be  a
row at bottom, where you could have column totals, you don't want those to
sort with the regular data. I'll probably turn this into a component, but
would like to hear any suggestions / requests:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"; layout="absolute"
       creationComplete="init()">
    <mx:Script>
       <![CDATA[
           import mx.controls.dataGridClasses.DataGridColumn;
           import mx.events.DataGridEvent;
           import mx.collections.*;

           // Declare storage variables and initialize the simple
variables.
           // The data provider collection.
           private var myXML:XML;
           private var myLoader:URLLoader;
           private var myDPList:XMLListCollection;

           private function init():void
           {
                  myXML = new XML();

               var XML_URL:String = "ResponseTable.xml";
               var myXMLURL:URLRequest = new URLRequest(XML_URL);
               myLoader = new URLLoader(myXMLURL);
               myLoader.addEventListener("complete", onDataLoaded );
           }
           //Initialize the DataGrid control with sorted data.
           private function onDataLoaded( e:* ):void
           {
               myXML = XML(myLoader.data);

               var col:DataGridColumn;
               var cols:Array = new Array();
               for each( var colXml:XML in myXML.columns.column ) {
                   col = new DataGridColumn();
                   col.dataField = [EMAIL PROTECTED];
                   col.headerText = [EMAIL PROTECTED];
                   cols.push( col );
               }
               //set columns
               headerGrid.columns = subGrid.columns =  bodyGrid.columns =
cols;

               // Set the Collection (binding!!) as
               //the DataGrid data provider.
               myDPList = new XMLListCollection( myXML.data.row );

               headerGrid.dataProvider = myDPList;
               headerGrid.rowCount = myDPList.length + 1;

               subGrid.dataProvider = myXML.subTable.row;
               subGrid.rowCount = myXML.subTable.row.length();

               bodyGrid.dataProvider = myDPList;
               bodyGrid.rowCount = myDPList.length;
           }
       ]]>
   </mx:Script>

   <mx:DataGrid id="headerGrid"
       width="500" y="24" x="24"
       draggableColumns="false"> <!--headerRelease="headRelEvt(event);"-->
   </mx:DataGrid>
   <mx:DataGrid id="subGrid"
           width="500" y="{headerGrid.y+headerGrid.rowHeight}" x="24"
           selectable="false"
           showHeaders="false"
           >
           <!--headerRelease="headRelEvt(event);"-->
   </mx:DataGrid>
   <mx:DataGrid id="bodyGrid"
           width="500" y="{subGrid.y+subGrid.height}" x="24"
           showHeaders="false">
<!--headerRelease="headRelEvt(event);"-->
   </mx:DataGrid><!---->
</mx:Application>

-Scott

On 07 Mar 2007 04:19:34 -0800, Alberto Albericio <[EMAIL PROTECTED]>
wrote:

  Hi all,

I need to extend the Datagrid control in order to draw an extra header
that "lables" groups of columns. This extra header does not need to be
functional but only informative.

I wanted to ask you, guys, what is the best approach to achieve this?

I would also like to specify the groups by setting some kind of
parameter of the new datagrid component. In the example ( jpg )
attached, it would be something like this:

<custom:exDatagrig
groups="[ { columns: [ age, money ], label: 'Personal data' } ]"
...
/>

Thank you all.

Alberto

--

: : ) Scott

<<attachment: tablemeta.JPG>>

<?xml version="1.0" encoding="iso-8859-1"?>
<table>
	<columns>
		<column dataField="segment" headerText="" />
		<column dataField="numCust" headerText="" />
		<column dataField="actualResponse" headerText="Actual Response" />
		<column dataField="predResponse" headerText="Predicted Response" />
	</columns>
	<subTable>
		<row>
			<segment></segment>
			<numCust>N</numCust>
			<actualResponse>Mean</actualResponse>
		</row>
		<row>
			<segment>All</segment>
			<numCust>362422</numCust>
			<actualResponse>4.03%</actualResponse>
		</row>
	</subTable>	
	<data>
		<row>
			<segment>0</segment>
			<numCust>36251</numCust>
			<actualResponse>14.60%</actualResponse>
		</row>
		<row>
			<segment>1</segment>
			<numCust>54654</numCust>
			<actualResponse>7.12%</actualResponse>
		</row>
		<row>
			<segment>2</segment>
			<numCust>32156</numCust>
			<actualResponse>4.67%</actualResponse>
		</row>
		<row>
			<segment>3</segment>
			<numCust>654321</numCust>
			<actualResponse>3.90%</actualResponse>
		</row>		
	</data>
</table>