Rotate HeaderText in DataGrid

Hello!
I got many letters in headerText of DataGridColumn. Can anyone help me with this problem?
1) Maybe someone know how works rotating()? This problem was discussed here http://tech.groups.yahoo.com/group/flexcoders/message/62230. But this method doesn't work.
2) Or is it possible to enter several strings to headerText with '\n' between them? 'cause we can always make headerHeight as big as we need to.
Here is a code of mine
<fx:Style>
 @font-face {
 src:url("assets/verdanab.ttf");
 fontFamily: "MyFont";
 fontWeight: bold;
 .myStyle1{
 fontFamily:"MyFont";
 fontSize:12pt;
</fx:Style>
<mx:DataGrid id="myGrid2" x="91" y="526" height="100" dataProvider="{initDG2}" editable="true"
 variableRowHeight="true" maxHeight="150" headerHeight="60">
 <mx:columns>
 <mx:DataGridColumn dataField="Field1" width="150" headerText="Very long text"/>
 <mx:DataGridColumn dataField="Field2" headerText="Very long text">
 <mx:headerRenderer>
 <fx:Component>
 <mx:VBox horizontalAlign="center">
 <mx:Text text="{this.headerText.data}" styleName=".myStyle1" rotation="90"/>
 </mx:VBox>
 </fx:Component>
 </mx:headerRenderer>
 </mx:DataGridColumn>
 </mx:columns>
</mx:DataGrid>
Sorry for my bad English. And thanks in advance.

Answer to second question is here http://www.actionscript.org/forums/showthread.php3?t=203048

Similar Messages

How to set headerText in DataGrids through ActionScript

Any help or suggestions with this appreciated. I'm populating
a datagrid control in Flex 2 with dynamically data. The number of
columns and column names aren't fixed. The column data itself is
just raw values; no field names or other elements to identify what
the column header should be.
So when the data provider updates I need to be able to
tweak/add the headerText for the columns. How do I access this
setting through actionscript? I see many examples for defining
<mx.DataGridcolumn> and properties, but I can't really do it
that statically in advance; I don't know the column count or type
of columns until runtime.
Is it possible to access the headerText property with
something like dataGridID.column[0].DataGridColumn.headerText = ""?
This is what I'm looking for, the ability to iterate through and
set the headerText, but I haven't found the magic incantation.
Thanks!

You can access the columns through the dataGrid.columns array
property.
Get a reference to that array from the DG into a variable,
modify the column elements as desired through that var, then
re-assign the var to the dg.columns property. So you are close:
var aColumns:Array = dataGridID.columns;
var dgc:DataGridColumn = aColumns[1];
dgc.headerText = "this is column 1";
dataGridID.columns = aColumns; //this step is required!
Tracy
Tracy

How to fix a DataGrid headercolumn's headerText causing sizing problems

Hello,
I have a datagrid with filter textboxes underneath the header columns.
My problem is that some of the headerText is rather large (in 2 of my columns), and causes it to wrap and stretch the header's height, which ultimately causes the columns to match up strangely and not in uniform.
Here is a screenshot of the problem:
http://img685.imageshack.us/img685/2283/gridcolumnsizeproblem.png
How can I make all column headings uniform in size, with my filtering text boxes? I do not see a height property. I have tried to add extra spaces in the smaller column headings but that does nothing as I think FLEX parses that out. Can I specifically size these so they match the longer ones?
Keep in mind, this DataGrid uses a custom renderer.
Here is my grid definition/MXML:
 <dataGridFilters:FilterDatagrid id="dg" width="100%" height="100%" rowCount="5" dataProvider="{deviceDataColl}" click="dg_clickHandler(event)" >
 <dataGridFilters:columns>
 <dataGridFilters:DataGridFilterColumn dataField="name" headerText="Name" width="150"/>
 
 <dataGridFilters:DataGridFilterColumn dataField="tHeat" headerText="Heat Point" width="75" textAlign="right"/>
 <dataGridFilters:DataGridFilterColumn dataField="tCool" headerText="Cool Point" width="75" textAlign="right"/>
 <dataGridFilters:DataGridFilterColumn dataField="tIndoor" headerText="Indoor Temp" width="80" textAlign="right"/>
 <dataGridFilters:DataGridFilterColumn dataField="tOutdoor" headerText="Outdoor Temp" width="90" textAlign="right"/>
 <dataGridFilters:DataGridFilterColumn dataField="insideHumidity" headerText="Indoor Humidity" width="100" textAlign="right"/>
 <dataGridFilters:DataGridFilterColumn dataField="currentFState" headerText="Fan State" width="75" textAlign="right"/>
 <dataGridFilters:DataGridFilterColumn dataField="currentFMode" headerText="Fan Mode" width="75" textAlign="right"/>
 <dataGridFilters:DataGridFilterColumn dataField="currentTState" headerText="State" width="75" textAlign="right"/>
 <dataGridFilters:DataGridFilterColumn dataField="currentTMode" headerText="Mode" width="75" textAlign="right"/>
 <dataGridFilters:DataGridFilterColumn dataField="nextSchedCPTDate" headerWordWrap="false" headerText="Next Scheduled Control Point Transition Date" width="100" textAlign="right"/>
 
 <dataGridFilters:DataGridFilterColumn dataField="nextSchedCPTTemp" headerWordWrap="false" headerText="Next Scheduled Control Point Transition Temp" width="100" textAlign="right"/>
 <dataGridFilters:DataGridFilterColumn dataField="groupOne" headerText="Group 1" width="75" textAlign="right"/>
 <dataGridFilters:DataGridFilterColumn dataField="groupTwo" headerText="Group 2" width="75" textAlign="right"/>
 </dataGridFilters:columns>
 </dataGridFilters:FilterDatagrid>
Any help is greatly appreciated!
Thank you,
Devtron

Rootsounds,
Here is my headerRenderer class:
package filters.header
 import mx.controls.dataGridClasses.DataGridHeader;
 import mx.core.mx_internal;
 use namespace mx_internal;
 public class DataGridFilterHeader extends DataGridHeader
 public function DataGridFilterHeader()
 super();
 *re-position the sort icon
 override protected function placeSortArrow():void
 super.placeSortArrow();
 if(sortArrow)
 var hh:Number = cachedHeaderHeight;
 sortArrow.y = (hh - sortArrow.measuredHeight - 8) > 0 ? 10: 0;
 if(sortArrow.visible)
 var n:int = headerItems.length;
 for (var i:int = 0; i < n; i++)
 if(visibleColumns[i].colNum == dataGrid.sortIndex)
 headerItems[i].setActualSize(visibleColumns[i].width - sortArrow.measuredWidth + 5, headerItems[i].height);
Here is my dataGrid extender:
package filters
 import filters.header.DataGridFilterHeader;
 import flash.events.Event;
 import mx.collections.ICollectionView;
 import mx.controls.DataGrid;
 import mx.controls.dataGridClasses.DataGridColumn;
 import mx.core.mx_internal;
 use namespace mx_internal;
 public class FilterDatagrid extends DataGrid
 public function FilterDatagrid()
 super();
 headerClass = DataGridFilterHeader;
 addEventListener("filterEvent",onFilterChange);
 override public function set dataProvider(value:Object):void
 if(dataProvider)
 resetFiltres();
 super.dataProvider = value;
 resetFiltres(filterFunction);
 private function onFilterChange(event:Event):void
 if(dataProvider)
 (dataProvider as ICollectionView).refresh();
 selectedIndex = 0;
 private function resetFiltres(inFilterFunction:Function = null):void
 if(dataProvider)
 (dataProvider as ICollectionView).filterFunction = inFilterFunction;
 (dataProvider as ICollectionView).refresh();
 if(inFilterFunction == null)
 var iLen:int= columnCount;
 for(var i:int=0;i<iLen;i++)
 var dgc:DataGridColumn = columns[i] as DataGridColumn;
 if(dgc is DataGridFilterColumn)
 DataGridFilterColumn(dgc).filterText = "";
 selectedIndex = 0;
 private function filterFunction(inObject:Object):Boolean
 var iLen:int= columnCount;
 for(var i:int=0;i<iLen;i++)
 var dgc:DataGridColumn = columns[i] as DataGridColumn;
 var dField:String = dgc.dataField;
 if(dgc is DataGridFilterColumn == false)
 continue;
 var srchStr:String = DataGridFilterColumn(dgc).filterText;
 if(srchStr == "")
 continue;
 var dataStr:String = dgc.itemToLabel(inObject);
 var regex:RegExp = new RegExp("^"+srchStr, "i");
 // if search string exists and
 // does not match the data in the row
 if(regex.exec(dataStr)==null)
 return false;
 return true;
If all this wrapper class stuff "Extends" the DataGrid, why wouldnt "headerHeight" be available as an attribute in my MXML/grid? When I try to set it explicitly in my dataGrid MXML, the compiler says "Cannot resolve attribute 'headerHeight'". I guess this doesnt really "extend" it? Im confused.

Flex evaluate string for dynamic datagrid headerText

Hello: I m new to Flex and am creating headerText for a datagrid (dgTop250). How do I get the variable headerStr to evaluate correctly in the last line of the function? With the code below I get the entire string as the column header in the datagrid, not the evaluated expression that I need. Variable headerStr is evaluating correctly, I just need it to get evaluated in the headerText statement.. I know the eval function isn't available in AS3.
public function get250(event:ResultEvent):void {
(var i:int = 0; i <= dgTop250.columnCount; i++) {
 var colName:String=dgTop250.columns[i].dataField;
 var headerStr:String="top250.lastResult.IMS001HQ2.SGM.getItemAt(i)."+colName+".label";
 (dgTop250.columns[i] as DataGridColumn).headerText = headerStr;
As an example, this is what I'm getting as the header: top250.lastResult.IMS001HQ2.SGM.getItemAt(i).STOCK.label
This is what I need: Stock Number
"Stock Number" is the label for STOCK.
thanks

I would think you need to remove the quotes to get it evaluated properly
Change this ..
var headerStr:String="top250.lastResult.IMS001HQ2.SGM.getItemAt(i)."+colName+".label";
to
var headerStr:String=top250.lastResult.IMS001HQ2.SGM.getItemAt(i).[colName].label;
maybe ???

Localization of headertext in a datagrid

Hi All,
I'm trying to get the headertext of a datagrid to display in the correct language after i've changed the language.
Every other label updates except the headertext. How can i force the headertext to update?
<mx:Canvas width="100%" height="100%">
 <mx:DataGrid id="userList" left="10" right="10" top="10" dataProvider="{usersAC}" itemClick="itemSelected(event)">
 <mx:columns>
 <mx:DataGridColumn dataField="userName" headerText="{resourceManager.getString('Messages', 'title.loginname')}"/>
 <mx:DataGridColumn dataField="firstName" headerText="{resourceManager.getString('Messages', 'title.firstname')}"/>
 <mx:DataGridColumn dataField="lastName" headerText="{resourceManager.getString('Messages', 'title.lastname')}"/>
 </mx:columns>
 </mx:DataGrid>
</mx:Canvas>
thanks

Call invalidate properties on the grid

DataGrid n000bie - headerText and data woes...

Hi,
So, I haven't worked with the DataGrid before until now; what I'm trying to do is grab the data from the first line of xmlDP, '<team>', and utilize those attributes as the column headerText(i.e.: 1. Chk, 2. Nam0rz, 3. Average, etc...). I can get that going, but I can't insert my data after I alter the col.headerText. via addColumn. See the comments in the code below for more of a description, but seeing how the DataGrid is a new paradigm for me, I know I'm doing this all wrong.
If anyone can help me wrangle this code together in order to get the desired outcome, or explain how to better construct the below code in order to achieve the desired outcome, I would greatly appreciate it.
import fl.data.DataProvider;
import fl.controls.dataGridClasses.DataGridColumn;
import fl.data.DataProvider;
import fl.controls.DataGrid;
import fl.data.DataProvider;
var loader:URLLoader = new URLLoader;
var aDg:DataGrid = new DataGrid();
var xmlDP:XML = <team col0="1. Chk" col1="2. Nam0rz" col2="3. Average" col3="4. DATA" col4="5. DATA2">
 <player checkBox="" name="Player G" avg="0.493" data="BLAH 7" data2="BLAH 17"/>
 <player checkBox="" name="Player H" avg="0.414" data="BLAH 8" data2="BLAH 88"/>
 <player checkBox="" name="Player I" avg="0.517" data="BLAH 9" data2="BLAH 19"/>
 <player checkBox="" name="Player J" avg="0.693" data="BLAH 10" data2="BLAH 20"/>
 <player checkBox="" name="Player K" avg="0.714" data="BLAH 11" data2="BLAH 21"/>
 <player checkBox="" name="Player L" avg="0.817" data="BLAH 12" data2="BLAH 22"/>
</team>;
createDataGrid();
function createDataGrid():void
 aDg.move(400, 40);
 aDg.width = 500;
 aDg.rowCount = aDg.length;
 var i:int;
 var attrArray:Array = [];
 var nodeArray:Array = [];
 for each (var att:XML in xmlDP.@*)
 aDg.rowCount = i;
 attrArray.push(xmlDP.@*[i]);
 trace("attrArray = "+ attrArray[i]);
 var col:DataGridColumn = new DataGridColumn(attrArray[i]);
 //if I comment out the next line, I get all the data I want, but lose the headerText I want.
 //If I don't comment it out, I get the headerText I want, but lose the data I want.
 //aDg.addColumn(col);
 col.headerText = String(attrArray[i]);
 i++;
 var myString:String;
 var myDP:DataProvider = new DataProvider(xmlDP);
 aDg.dataProvider = myDP;
 addChild(aDg);
Thanks muchleh,
Chipleh

Hi again kglad,
Thanks for the response. I was trying specifically not to use ["checkBox", "name", "avg", "data", "data2"] and instead use the values of the attributes of <team>. Regardless, I've scrapped that idea for now, as that seems to go against the paradigm of the dataGrid(like I mentioned, I'm n00b to this component).
The thing that's really got me stumped right now is this: When using the code below, the columns are constantly shifting when I compile(i.e.: the "name" column(or any other column for that matter) is never in the same place, they shift all over. Is there something you need to enable in the DataGrid to get consistent column placement results? What I'm expecting to see per my xml is:
checkBox | name | avg | data | data2
but instead I'll see:
data2 | name | avg | data | checkBox
or:
data | name | checkBox | data2 | avg
etc. The columns are never consistent.
import fl.data.DataProvider;
import fl.controls.dataGridClasses.DataGridColumn;
import fl.data.DataProvider;
import fl.controls.DataGrid;
import fl.data.DataProvider;
var loader:URLLoader = new URLLoader;
var aDg:DataGrid = new DataGrid();
var xmlDP:XML = <team>
 <player checkBox="" name="Player G" avg="0.493" data="BLAH 7" data2="BLAH 17"/>
 <player checkBox="" name="Player H" avg="0.414" data="BLAH 8" data2="BLAH 88"/>
 <player checkBox="" name="Player I" avg="0.517" data="BLAH 9" data2="BLAH 19"/>
 <player checkBox="" name="Player J" avg="0.693" data="BLAH 10" data2="BLAH 20"/>
 <player checkBox="" name="Player K" avg="0.714" data="BLAH 11" data2="BLAH 21"/>
 <player checkBox="" name="Player L" avg="0.817" data="BLAH 12" data2="BLAH 22"/>
</team>;
addDataGrid();
function addDataGrid():void
 var teamXML:XML = new XML(loader.data);
 aDg.setSize(500, 100);
 aDg.move(400, 40);
 aDg.rowCount = aDg.length;
 var myDP:DataProvider = new DataProvider(xmlDP);
 aDg.dataProvider = myDP;
 aDg.rowCount = aDg.length;
 addChild(aDg);
 aDg.name = "aDg";

How to resize the spark datagrid collumns based on the headertext?

Hi friends,
I am using spark datagrid for displaying the tablur data in my application, when i setting the dataprovider property of the datagrid, it displays the content exactally what i expeceted.
but the widht of the collumns are based on the content of the dataprovider, i am not able to see the full collumn name in the datagrid's header. I want to display the full collumn name to the users without setting the collumn width explicitly because the data are dynamically returned from the server. could you pls give me some ideas to acheive this...?
Thanks in advance.

Hi Karthikeyan Subramain,
You can make use of typicalItem proberty to set the column width.
Here is the link for sample code which uses typicalItem:
http://butterfliesandbugs.wordpress.com/2011/03/08/its-a-best-practice-to-size-a-spark-dat agrids-columns-with-a-typicalitem/
Hope this will help you
Thanks and Best regards,
Pooja Kuber | [email protected] | www.infocepts.com

How not to sort datagrid column on double click

Hello,
I am currently building an application containing a datagrid for data representation. I've created a custom datagridheader in order to add a input text for filtering the columns (see code below).
My goal is to hide the textinput, and then show it on a double click on the header. So i would like to know how to avoid the sort of this column each time i double click.?
<?xml version="1.0" encoding="utf-8"?>
<s:GridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
 xmlns:s="library://ns.adobe.com/flex/spark"
 xmlns:mx="library://ns.adobe.com/flex/mx" resize="onColumnResize(event)" clipAndEnableScrolling="true" doubleClick="managefilterField(event)">
 <fx:Declarations>
 
 <fx:Component id="defaultSortIndicator">
 <s:Path data="M 3.5 7.0 L 0.0 0.0 L 7.0 0.0 L 3.5 7.0" implements="spark.components.gridClasses.IGridVisualElement">
 <fx:Script>
 <![CDATA[
 import spark.components.DataGrid;
 import spark.components.Grid;
 * @private
 public function prepareGridVisualElement(grid:Grid, rowIndex:int, columnIndex:int):void
 const dataGrid:DataGrid = grid.dataGrid;
 if (!dataGrid)
 return;
 const color:uint = dataGrid.getStyle("symbolColor");
 arrowFill1.color = color;
 arrowFill2.color = color;
 ]]>
 </fx:Script>
 <s:fill>
 <s:RadialGradient rotation="90" focalPointRatio="1">
 
 <s:GradientEntry id="arrowFill1" color="0" alpha="0.6" />
 
 <s:GradientEntry id="arrowFill2" color="0" alpha="0.8" />
 </s:RadialGradient>
 </s:fill>
 </s:Path>
 </fx:Component>
 
 <s:Label id="labelDisplay"
 verticalCenter="1" left="0" right="0" top="0" bottom="0"
 textAlign="start"
 fontWeight="bold"
 verticalAlign="middle"
 maxDisplayedLines="1"
 showTruncationTip="true" />
 </fx:Declarations>
 <fx:Script>
 <![CDATA[
 import net.awl.ismp.console.components.misc.FilterCriteria;
 import net.awl.ismp.console.events.ColumnFilteredEvent;
 import net.awl.ismp.console.events.ColumnResizedEvent;
 import mx.events.ResizeEvent;
 import spark.components.gridClasses.IGridVisualElement;
 import mx.core.IVisualElement;
 import spark.components.DataGrid;
 import spark.components.GridColumnHeaderGroup;
 import spark.components.gridClasses.GridColumn;
 import spark.primitives.supportClasses.GraphicElement;
 // chrome color constants and variables
 private static const DEFAULT_COLOR_VALUE:uint = 0xCC;
 private static const DEFAULT_COLOR:uint = 0xCCCCCC;
 private static const DEFAULT_SYMBOL_COLOR:uint = 0x000000;
 private static var colorTransform:ColorTransform = new ColorTransform();
 * @private
 private function dispatchChangeEvent(type:String):void
 if (hasEventListener(type))
 dispatchEvent(new Event(type));
 protected function onColumnResize(event:ResizeEvent):void
 dispatchEvent(new ColumnResizedEvent(ColumnResizedEvent.COLUMNRESIZED_EVT,this.width,this.column.columnInde x));
 // maxDisplayedLines
 private var _maxDisplayedLines:int = 1;
 [Bindable("maxDisplayedLinesChanged")]
 [Inspectable(minValue="-1")]
 * The value of this property is used to initialize the
 * <code>maxDisplayedLines</code> property of this renderer's
 * <code>labelDisplay</code> element.
 * @copy spark.components.supportClasses.TextBase#maxDisplayedLines
 * @default 1
 * @langversion 3.0
 * @playerversion Flash 10
 * @playerversion AIR 1.5
 * @productversion Flex 4.5
 public function get maxDisplayedLines():int
 return _maxDisplayedLines;
 override protected function stateChanged(oldState:String, newState:String, recursive:Boolean):void
 trace("state changed from : "+oldState+" to "+newState);
 super.stateChanged(oldState, newState, recursive);
 * @private
 public function set maxDisplayedLines(value:int):void
 if (value == _maxDisplayedLines)
 return;
 _maxDisplayedLines = value;
 if (labelDisplay)
 labelDisplay.maxDisplayedLines = value;
 invalidateSize();
 invalidateDisplayList();
 dispatchChangeEvent("maxDisplayedLinesChanged");
 // sortIndicator
 private var _sortIndicator:IFactory;
 private var sortIndicatorInstance:IVisualElement;
 [Bindable("sortIndicatorChanged")]
 * A visual element that's displayed when the column is sorted.
 * The sortIndicator visual element is added to the <code>sortIndicatorGroup</code>
 * by this renderer's <code>prepare()</code> method. Any size/location constraints
 * specified by the sortIndicator define its location relative to the sortIndicatorGroup.
 * @default null
 * @langversion 3.0
 * @playerversion Flash 10
 * @playerversion AIR 1.5
 * @productversion Flex 4.5
 public function get sortIndicator():IFactory
 return (_sortIndicator) ? _sortIndicator : defaultSortIndicator;
 * @private
 public function set sortIndicator(value:IFactory):void
 trace("setSortIndicator");
 if (_sortIndicator == value)
 return;
 _sortIndicator = value;
 if (sortIndicatorInstance)
 sortIndicatorGroup.includeInLayout = false;
 sortIndicatorGroup.removeElement(sortIndicatorInstance);
 sortIndicatorInstance = null;
 invalidateDisplayList();
 dispatchChangeEvent("sortIndicatorChanged");
 * @private
 * Create and add the sortIndicator to the sortIndicatorGroup and the
 * labelDisplay into the labelDisplayGroup.
 override public function prepare(hasBeenRecycled:Boolean):void
 trace("prepare !!");
 super.prepare(hasBeenRecycled);
 if (labelDisplay && labelDisplayGroup && (labelDisplay.parent != labelDisplayGroup))
 labelDisplayGroup.removeAllElements();
 labelDisplayGroup.addElement(labelDisplay);
 trace(sortIndicator);
 trace("sortIndicatorInstance : "+sortIndicatorInstance);
 const column:GridColumn = this.column;
 if (sortIndicator && column && column.grid && column.grid.dataGrid && column.grid.dataGrid.columnHeaderGroup)
 const dataGrid:DataGrid = column.grid.dataGrid;
 const columnHeaderGroup:GridColumnHeaderGroup = dataGrid.columnHeaderGroup;
 if (columnHeaderGroup.isSortIndicatorVisible(column.columnIndex))
 if (!sortIndicatorInstance)
 sortIndicatorInstance = sortIndicator.newInstance();
 sortIndicatorGroup.addElement(sortIndicatorInstance);
 chromeColorChanged = true;
 invalidateDisplayList();
 // Initialize sortIndicator
 sortIndicatorInstance.visible = true;
 const gridVisualElement:IGridVisualElement = sortIndicatorInstance as IGridVisualElement;
 if (gridVisualElement)
 gridVisualElement.prepareGridVisualElement(column.grid, -1, column.columnIndex);
 sortIndicatorGroup.includeInLayout = true;
 sortIndicatorGroup.scaleY = (column.sortDescending) ? 1 : -1;
 else
 if (sortIndicatorInstance)
 sortIndicatorGroup.removeElement(sortIndicatorInstance);
 sortIndicatorGroup.includeInLayout = false;
 sortIndicatorInstance = null;
 private var chromeColorChanged:Boolean = false;
 private var colorized:Boolean = false;
 * @private
 * Apply chromeColor style.
 override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
 //trace("update display list");
 // Apply chrome color
 if (chromeColorChanged)
 var chromeColor:uint = getStyle("chromeColor");
 if (chromeColor != DEFAULT_COLOR || colorized)
 colorTransform.redOffset = ((chromeColor & (0xFF << 16)) >> 16) - DEFAULT_COLOR_VALUE;
 colorTransform.greenOffset = ((chromeColor & (0xFF << 8)) >> 8) - DEFAULT_COLOR_VALUE;
 colorTransform.blueOffset = (chromeColor & 0xFF) - DEFAULT_COLOR_VALUE;
 colorTransform.alphaMultiplier = alpha;
 transform.colorTransform = colorTransform;
 var exclusions:Array = [labelDisplay, sortIndicatorInstance];
 // Apply inverse colorizing to exclusions
 if (exclusions && exclusions.length > 0)
 colorTransform.redOffset = -colorTransform.redOffset;
 colorTransform.greenOffset = -colorTransform.greenOffset;
 colorTransform.blueOffset = -colorTransform.blueOffset;
 for (var i:int = 0; i < exclusions.length; i++)
 var exclusionObject:Object = exclusions[i];
 if (exclusionObject &&
 (exclusionObject is DisplayObject ||
 exclusionObject is GraphicElement))
 colorTransform.alphaMultiplier = exclusionObject.alpha;
 exclusionObject.transform.colorTransform = colorTransform;
 colorized = true;
 chromeColorChanged = false;
 super.updateDisplayList(unscaledWidth, unscaledHeight);
 * @private
 override public function styleChanged(styleProp:String):void
 var allStyles:Boolean = !styleProp || styleProp == "styleName";
 super.styleChanged(styleProp);
 if (allStyles || styleProp == "chromeColor")
 chromeColorChanged = true;
 invalidateDisplayList();
 protected function managefilterField(event:MouseEvent):void
 trace("double click sortIndicator : "+this.sortIndicatorInstance);
 this.filterInput.visible=!this.filterInput.visible;
 this.filterInput.includeInLayout=this.filterInput.visible;
 this.filterSpacer.visible=this.filterInput.visible;
 this.filterSpacer.includeInLayout=this.filterInput.visible;
 if(!this.filterInput.visible)
 this.filterInput.text="";
 dispatchEvent(new ColumnFilteredEvent(ColumnFilteredEvent.COLUMNFILTERED_EVT,new FilterCriteria(this.column.dataField,this.filterInput.text)));
 this.filterInput.setStyle("borderColor",0xFF6319);
 this.filterInput.setStyle("focusColor",0xFF6319);
 //this.filterInput.setStyle(
 protected function onTextInputSelection(event:MouseEvent):void
 event.stopImmediatePropagation();
 this.filterInput.setStyle("borderColor",0xFF6319);
 this.filterInput.setStyle("focusColor",0xFF6319);
 protected function onKeyUp(event:KeyboardEvent):void
 if(event.charCode==Keyboard.ENTER)
 stage.focus=null;
 protected function onFocusOut(event:FocusEvent):void
 this.filterInput.setStyle("borderColor",0x00ff00);
 this.filterInput.setStyle("focusColor",0x70B2EE);
 dispatchEvent(new ColumnFilteredEvent(ColumnFilteredEvent.COLUMNFILTERED_EVT,new FilterCriteria(this.column.dataField,this.filterInput.text)));
 ]]>
 </fx:Script>
 <s:states>
 <s:State name="normal" />
 <s:State name="hovered" />
 <s:State name="down" />
 </s:states>
 
 
 <s:Rect id="shadow" left="-1" right="-1" top="-1" bottom="-1" radiusX="2">
 <s:fill>
 <s:LinearGradient rotation="90">
 <s:GradientEntry color="0x000000"
 color.down="0xFFFFFF"
 alpha="0.01"
 alpha.down="0" />
 <s:GradientEntry color="0x000000"
 color.down="0xFFFFFF"
 alpha="0.07"
 alpha.down="0.5" />
 </s:LinearGradient>
 </s:fill>
 </s:Rect>
 
 
 <s:Rect id="fill" left="0" right="0" top="0" bottom="0">
 <s:fill>
 <s:LinearGradient rotation="90">
 <s:GradientEntry color="0xFFFFFF"
 color.hovered="0xBBBDBD"
 color.down="0xAAAAAA"
 alpha="0.85" />
 <s:GradientEntry color="0xD8D8D8"
 color.hovered="0x9FA0A1"
 color.down="0x929496"
 alpha="0.85" />
 </s:LinearGradient>
 </s:fill>
 </s:Rect>
 
 
 <s:Rect id="lowlight" left="0" right="0" top="0" bottom="0">
 <s:fill>
 <s:LinearGradient rotation="270">
 <s:GradientEntry color="0x000000" ratio="0.0" alpha="0.0627" />
 <s:GradientEntry color="0x000000" ratio="0.48" alpha="0.0099" />
 <s:GradientEntry color="0x000000" ratio="0.48001" alpha="0" />
 </s:LinearGradient>
 </s:fill>
 </s:Rect>
 
 
 <s:Rect id="highlight" left="0" right="0" top="0" bottom="0">
 <s:fill>
 <s:LinearGradient rotation="90">
 <s:GradientEntry color="0xFFFFFF"
 ratio="0.0"
 alpha="0.33"
 alpha.hovered="0.22"
 alpha.down="0.12"/>
 <s:GradientEntry color="0xFFFFFF"
 ratio="0.48"
 alpha="0.33"
 alpha.hovered="0.22"
 alpha.down="0.12" />
 <s:GradientEntry color="0xFFFFFF"
 ratio="0.48001"
 alpha="0" />
 </s:LinearGradient>
 </s:fill>
 </s:Rect>
 
 
 <s:Rect id="highlightStroke" left="0" right="0" top="0" bottom="0" excludeFrom="down">
 <s:stroke>
 <s:LinearGradientStroke rotation="90" weight="1">
 <s:GradientEntry color="0xFFFFFF" alpha.hovered="0.22" />
 <s:GradientEntry color="0xD8D8D8" alpha.hovered="0.22" />
 </s:LinearGradientStroke>
 </s:stroke>
 </s:Rect>
 
 
 <s:Rect id="hldownstroke1" left="0" right="0" top="0" bottom="0" includeIn="down">
 <s:stroke>
 <s:LinearGradientStroke rotation="90" weight="1">
 <s:GradientEntry color="0x000000" alpha="0.25" ratio="0.0" />
 <s:GradientEntry color="0x000000" alpha="0.25" ratio="0.001" />
 <s:GradientEntry color="0x000000" alpha="0.07" ratio="0.0011" />
 <s:GradientEntry color="0x000000" alpha="0.07" ratio="0.965" />
 <s:GradientEntry color="0x000000" alpha="0.00" ratio="0.9651" />
 </s:LinearGradientStroke>
 </s:stroke>
 </s:Rect>
 
 <s:Rect id="hldownstroke2" left="1" right="1" top="1" bottom="1" includeIn="down">
 <s:stroke>
 <s:LinearGradientStroke rotation="90" weight="1">
 <s:GradientEntry color="0x000000" alpha="0.09" ratio="0.0" />
 <s:GradientEntry color="0x000000" alpha="0.00" ratio="0.0001" />
 </s:LinearGradientStroke>
 </s:stroke>
 </s:Rect>
 
 
 <s:VGroup verticalAlign="middle" left="7" top="5" right="7" bottom="5" gap="2" >
 <s:TextInput id="filterInput" width="100%" visible="false" includeInLayout="false" keyUp="onKeyUp(event)" focusOut="onFocusOut(event)" click="onTextInputSelection(event)"/>
 <s:Spacer id="filterSpacer" visible="false" includeInLayout="false" height="5" />
 <s:HGroup width="100%" height="100%" verticalAlign="middle">
 <s:Group id="labelDisplayGroup" width="100%" />
 <s:Group id="sortIndicatorGroup" includeInLayout="false" />
 </s:HGroup>
 </s:VGroup>
</s:GridItemRenderer>

Based on your idea, i've intercepted the click event and I use stopImmediatePropagation.
THen i added an image to sort the column. So if the image is clicked the sort is ok.

Skinning selected DataGrid header in Flex 4

Hi,
What I'm trying to do seems trivial, but after hours of searching for historical clues I have still not achieved it. I simply want to reskin only the selected header. There seems to be multiple approaches:
1) define a custom headerRenderer - but this ends up with the sort indicator cobbled on top of your custom drawn area
2) rework the header background skin to clip/draw the selected column differently - but this requires clipping to the selected column, and figuring out the dimensions to clip to
Am I missing an obvious and easier solution? Any examples out there?
Thanks!

Thanks again Alex.
I managed to achieve something satisfactory with the following custom HeaderRenderer. The negative padding on the right side allows the gradient to extend underneath the sort skin to fill the entire column. This seemed easier (if not cleaner) than also skinning the sort arrow skin in the same way.
I also had to extend DataGridHeader and override drawHeaderIndicator (for the rollover of the column header) and drawSelectionIndicator (for the transitionary state of clicking on the column header before the sort takes effect).
Still a work in progress, but hopefully this will save the next Googler some time in achieving any of these goals. And of course I welcome any refinements or any admonishments that I'm doing something really stupid.
<?xml version="1.0" encoding="utf-8"?>
<s:Group>
implements="mx.controls.listClasses.IListItemRenderer"xmlns:fx="
http://ns.adobe.com/mxml/2009" xmlns:s="
library://ns.adobe.com/flex/spark" xmlns:mx="
library://ns.adobe.com/flex/halo"width="
100%" height="100%">
<fx:Script>
<![CDATA[
import com.company.player.model.Constants;
import mx.collections.ArrayCollection;
import mx.controls.DataGrid;
import mx.controls.dataGridClasses.DataGridColumn;
import mx.controls.listClasses.IListItemRenderer;
import mx.controls.listClasses.ListBase;
private var _data:Object;
static private const LABEL_BUFFER:int = 4;
static private const SORT_INDICATOR_WIDTH:int = 14;
override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
var owner:DataGrid = owner as DataGrid;
var col:DataGridColumn = data as DataGridColumn;
var bSorted:Boolean = false;
var ac:ArrayCollection = owner.dataProvider as ArrayCollection;
if (ac && ac.sort){
// there's a sort in place - is it on this column?
var sortFieldName:String = ac.sort.fields[0].name;
bSorted = (sortFieldName == col.dataField);
gradientOverlay.alpha = bSorted ? 1 : 0;
gradientOverlay.visible = bSorted;
lbl.width = col.width - LABEL_BUFFER - (bSorted ? SORT_INDICATOR_WIDTH : 0);
lbl.text = col.headerText;
lbl.setStyle(
"color", bSorted ? "#343434" : "#767676");
super.updateDisplayList(unscaledWidth, unscaledHeight);}
]]>
</fx:Script>
<s:HGroup id="gradientOverlay" width="100%" height="100%" paddingTop="-2" paddingRight="{-SORT_INDICATOR_WIDTH}" >
<s:Rect width="100%" height="100%" >
<s:fill>
<s:LinearGradient rotation="90">
<s:GradientEntry color="{Constants.SELECTION_GRADIENT1}" alpha="1"/>
<s:GradientEntry color="{Constants.SELECTION_GRADIENT2}" alpha="1"/>
</s:LinearGradient>
</s:fill>
</s:Rect>
</s:HGroup>
<s:HGroup width="100%" height="100%" verticalAlign="middle" paddingLeft="{LABEL_BUFFER}" >
<s:Label id="lbl" maxDisplayedLines="1" showTruncationTip="true" />
</s:HGroup>
</s:Group>

3d effect to datagrid

I can't apply an effect like this to a datagrid:
<s:Rotate3D id="rotator" angleYFrom="0" angleYTo="360"
 autoCenterTransform="true"
 effectEnd="effectEndHandler(event)"/>
<s:Button label="Flip grid" mouseDown="animateRotate(adg1)">
 </s:Button>
 <mx:AdvancedDataGrid id="adg1" designViewDataType="tree" width="353" height="100%">
 <mx:columns>
 <mx:AdvancedDataGridColumn headerText="Column 1" dataField="col1"/>
 <mx:AdvancedDataGridColumn headerText="Column 2" dataField="col2"/>
 <mx:AdvancedDataGridColumn headerText="Column 3" dataField="col3"/>
 </mx:columns>
 </mx:AdvancedDataGrid>
private function animateRotate(target:Object):void
 if (animatingTargets[target.id] === undefined)
 var effect:Effect;
 effect = rotator;
 effect.target = target;
 animatingTargets[target.id] = effect;
 effect.play();

It is rotating the full -90 degrees; it just doesn't look like it.
It's because of the combination of the transform center and the 3D projection point.
By default, transform effects work on the origin of the target object, typically (0, 0). So in the case of your datagrid, it will do the rotation around the left edge of the object.
Meanwhile, 3D projection happens by default around the center of the object, which means that you'll see that object rotated -90 that is positioned to the left of the projection point, just because that's how perspective projection works (blah blah view frustum blah blah blah).
To make the object "disappear" when it's at a 90 degree rotation, you need the object to rotate around the same point as the projection point. This means either you should set autoCenterTransform="true", which will flip the grid around its center:
 <s:Rotate3D id="rotator" angleYFrom="0" angleYTo="-90"
 repeatBehavior="{RepeatBehavior.REVERSE}"
 repeatCount="2" autoCenterTransform="true"
 effectEnd="effectEndHandler(event)"/>
or set the projection point to the left edge of the object:
 <s:Rotate3D id="rotator" angleYFrom="0" angleYTo="-90"
 repeatBehavior="{RepeatBehavior.REVERSE}"
 repeatCount="2"
 projectionX="0" projectionY="0" autoCenterProjection="false"
 effectEnd="effectEndHandler(event)"/>
Chet.

Datagrid Image Renderer Broken in CS SDK but not Flex project

Within a Photoshop Extension, I have a DataGrid which has an inline custom image renderer whose dataprovider is an ArrayCollection called "photos" representing a list of photos and some metadata properties. One of the properties "fileName" is concatenated with a path to a thumbnail image such as source="{'LR_AUTO/imported/thumbs/' + data.fileName}".
The dataprovider is bound to a LCDS DataService. When the extension is first launched, the dataservice initializes the dataprovider with the existing values for the "photos" arraycollection. The thumbnail images are correctly shown.
However, when the DataService receives a new row and updates the photos dataprovider, the datagrid's new row shows a broken image for the thumbnail even though the path is correct. I have dumped the photos dataprovider and verified that all information is correct. When I close Photoshop and relaunch it from Flash Builder, once again LCDS initializes the photos ArrayCollection and THEN the thumbnail that previously showed as broken show up correctly.
I have a ColdFusion Directory Watcher Gateway that watches a directory where Lightroom auto-imports images from a tethered capture session. When the camera sends Lightroom a new image, the new image is processed by Lightroom and moved to a target directory, and since ColdFusion's Directory Watcher is watching that targeted directory, ColdFusion will create a thumbnail image in a subfolder and notifiy LCDS that of the new image and related metadata.
*** This is the interesting part *** When Lightroom places new images in the target directory, this is propogated to the Photoshop Extension's datagrid, and the new row shows up as described earlier, showing a broken image for the thumbnail. BUT, instead of Lightroom, if I manually copy images to the folder where ColdFusion is watching, then exact same code path is exectuted and in the Photoshop Datagrid the new row appears and THE THUMBNAIL IMAGE shows up correctly.
The difference seems to be only in how the images are put in the original target location. The problem is when Lightroom puts them there, but it works when I put them there as a user.
*** More Interesting Info *** I have the Flex code for the Photoshop Extension duplicated in a standalone, non-CSSDK project using Flex 3.4 which I launch in a browser. I have mirrored the code in the Photoshop extension, but in this manner, the problem does not exist. With plain Flex 3.4 in a browser, whenever LCDS notifies the datagrid of a new photo record, the datagrid's new row ALWAYS shows the thumbnail correctly.
A primary difference in how the thumbnail image is rendered is that in a browser, the Flex 3.4 project accesses the image assets over the network, however, in the Photoshop Extension, the image asset WITH THE SAME RELATIVE PATH is accessed over the local file system.
source="{'LR_AUTO/imported/thumbs/' + data.fileName}"
So in the case of the browser, this path is a relative URL and the image is retrieved over HTTP, however, in the PS Extension, the same path represents a file system path relative to the project folder.
Unfortunately, because the Flash Player (including APE) cannot access BOTH the network and the local filesystem, so I cannot change the Extension to use network access.
** The important part to remember is that when I stop the Flash Builder debug session and close Photoshop, then relaunch the debug with Photoshop, then all the images show up correctly in the Extension.
Your advice is appreciated.
Thank you!
Steve
====================================================
Environment
====================================================
Photoshop CS5 Extended 12.01 x32
Flash Builder 4
CS SDK 1.02
Extension Builder SDK 3.4
MacBook Pro / OS X 10.5 / Intel Core 2 Duo 2.66 GHz / Procs: 1 / Cores: 2 / Memory: 8 GB
App configured for Photoshop CS5 and Photoshop CS5 Extended
====================================================
NewsAgencyPhotoshop.mxml
====================================================
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns="com.stevenerat.news.*"
 horizontalScrollPolicy="off" verticalScrollPolicy="off" verticalGap="0"
 layout="vertical" horizontalAlign="left" backgroundColor="#353535"
 historyManagementEnabled="false"
 creationComplete="init();">
 <mx:Script>
 public function handlePhotoClick(data:Object):void {
 this.PreviewImageWindow = PreviewImage(PopUpManager.createPopUp(this,PreviewImage,true));
 var filePath:String = data.dirPath + data.fileName;
 PreviewImageWindow.addEventListener("imageOpenEvent",imageOpenListener);
 PreviewImageWindow.addEventListener("imageCloseEvent",imageCloseListener);
 PreviewImageWindow.addEventListener("imageSavedEvent",imageSaveListener);
 PreviewImageWindow.setFileName(data.fileName);
 PreviewImageWindow.setFilePath(filePath);
 PreviewImageWindow.y = 0;
 PreviewImageWindow.x = 0;
 ]]>
 </mx:Script>
 <mx:ArrayCollection id="photos"/>
 <NewsPhoto/>
 <mx:DataService id="ds" destination="NewsAgencyPhotos" autoSyncEnabled="true" autoCommit="true" conflict="conflictHandler(event)"/>
 <mx:Label text="News Agency Photos" fontSize="20" paddingBottom="30"/>
 <mx:Label text="Available Images" fontSize="15"/>
 <mx:DataGrid id="photoIPTC" dataProvider="{photos}" editable="true" width="220" rowCount="5" rowHeight="75" wordWrap="true">
 <mx:columns>
 <mx:DataGridColumn headerText="id" dataField="fileName" width="40" editable="false" sortDescending="true"/>
 <mx:DataGridColumn dataField="psLock" width="65" headerText="Status" editable="false" editorDataField="value">
 <mx:itemEditor>
 <mx:Component>
 <mx:ComboBox editable="false">
 <mx:dataProvider>
 <mx:String>New</mx:String>
 <mx:String>Open</mx:String>
 <mx:String>Edited</mx:String>
 </mx:dataProvider>
 </mx:ComboBox>
 </mx:Component>
 </mx:itemEditor>
 </mx:DataGridColumn>
 <mx:DataGridColumn headerText="Photo" dataField="fileName" width="80" editable="false">
 <mx:itemRenderer>
 <mx:Component>
 <mx:HBox horizontalAlign="center" horizontalScrollPolicy="off" verticalScrollPolicy="off">
 <mx:Image click="outerDocument.handlePhotoClick(data);" source="{'LR_AUTO/imported/thumbs/' + data.fileName}" width="75" height="75"/>
 </mx:HBox>
 </mx:Component>
 </mx:itemRenderer>
 </mx:DataGridColumn>
 </mx:columns>
 </mx:DataGrid>
</mx:Application>
====================================================
A DUMP OF THE DATAPROVIDER
in this case, one array item existed when launched, then a second was added
while running. The first has its thumbnail show, the second item has broken image
====================================================
------------------DUMP----------------------------
(mx.collections::ArrayCollection)#0
filterFunction = (null)
length = 2
list = (mx.data::DataList)#1
 fillParameters = (Array)#2
 length = 2
 localItems = (Array)#3
 [0] (com.stevenerat.news::NewsPhoto)#4
 aperture = "F10"
 cameraLens = "EF24-70mm f/2.8L USM"
 cameraModel = "Canon EOS 7D"
 city = ""
 copyrightNotice = "¬© Steven Erat 2011"
 country = ""
 creator = "Steven Erat"
 description = ""
 dirPath = "/Users/stevenerat/LR_AUTO/imported/"
 fileName = "ERAT_STEVEN_20110122_162.jpg"
 focalLen = "42.0 mm"
 headline = ""
 id = 1
 iso = "100"
 keywords = "Alt, Dramatic, Fashion, Girl, Glamorous, Glamour, Inked, Model, Portrait, SOPHA"
 psLock = "New"
 shutterSpeed = "1/128 sec"
 state = ""
 [1] (com.stevenerat.news::NewsPhoto)#5
 aperture = "F10"
 cameraLens = "EF24-70mm f/2.8L USM"
 cameraModel = "Canon EOS 7D"
 city = ""
 copyrightNotice = "¬© Steven Erat 2011"
 country = ""
 creator = "Steven Erat"
 description = ""
 dirPath = "/Users/stevenerat/LR_AUTO/imported/"
 fileName = "ERAT_STEVEN_20110122_163.jpg"
 focalLen = "42.0 mm"
 headline = ""
 id = 2
 iso = "100"
 keywords = "Alt, Dramatic, Fashion, Girl, Glamorous, Glamour, Inked, Model, Portrait, SOPHA"
 psLock = "New"
 shutterSpeed = "1/128 sec"
 state = ""
 uid = "8BAC025E-60D1-11F1-3654-44BDB0D218CE"
 view = (mx.collections::ArrayCollection)#6
 filterFunction = (null)
 length = 2
 list = (mx.data::DataList)#1
 sort = (null)
 source = (null)
sort = (null)
source = (null)
------------------END_DUMP------------------------

I expected that if my extension uses the local filesystem AND the network that I would get a Security Sandbox Exception as I recently described in this thread:
http://forums.adobe.com/thread/791918?tstart=0
However, I just tried changing my datagrid image renderer to access the thumbnail via HTTP and the thumbnail issue after Lightroom export does not happen.
 <mx:DataGridColumn headerText="Photo" dataField="fileName" width="80" editable="false">
 <mx:itemRenderer>
 <mx:Component>
 <mx:HBox horizontalAlign="center" horizontalScrollPolicy="off" verticalScrollPolicy="off">
 <mx:Image click="outerDocument.handlePhotoClick(data);" source="{'http://localhost:8500/LR_AUTO/imported/thumbs/' + data.fileName}" width="75" height="75"/>
 </mx:HBox>
 </mx:Component>
 </mx:itemRenderer>
 </mx:DataGridColumn>
Furthermore, I can also open the image via the Photoshop DOM, and it does open correctly. It seems that I do have a solution now, although I'm not certain as to why I'm not getting a Security Sandbox Exception as I described in the other post.
Thanks for reading.

DataGrid does not display XML data

Hello, and thanks for reading this...
I am having a problem displaying XMLList data in a DataGrid.
The data is coming from a Tree control, which is receiving it
from a database using HTTPService.
The data is a list of "Job Orders" from a MySQL database,
being formatted as XML by a PHP page.
If it would be helpful to see the actual XML, a sample is
here:
http://www.anaheimwib.com/_login/get_all_orders_test2.php
All is going well until I get to the DataGrid, which doesn't
display the data, although I know it is there as I can see it in
debug mode. I've checked the dataField property of the appropriate
DataGrid column, and it appears correct.
Following is a summary of the relevant code.
...An HTTPService named "get_all_job_orders" retrieves
records from a MySQL database via PHP...
...Results are formatted as E4X:
HTTPService resultFormat="e4x"
...An XMLListCollection's source property is set to the
returned E4X XML results:
...The "order" node is what is being used as the top-level of
the XML data.
<mx:XMLListCollection id="jobOrdersReviewXMLList"
source="{get_all_job_orders.lastResult.order}"/>
...The "jobOrdersReviewXMLList" collection is assigned to be
the dataProvider property of a Tree list, using the @name syntax to
display the nodes correctly, and a change event function is defined
to add the records to a DataGrid on a separate Component for
viewing the XML records:
<mx:Tree dataProvider="{jobOrdersReviewXMLList}"
labelField="@name"
change="jobPosForm.addTreePositionsToDG(event)"/>
...Here is the relevant "jobPosForm" code (the Job Positions
Form, a separate Component based on a Form) :
...A variable is declared:
[Bindable]
public var positionsArray:XMLList;
...The variable is initialized on CreationComplete event of
the Form:
positionsArray = new XMLList;
...The Tree's change event function is defined within the
"jobPosForm" Component.
...Clicking on a Tree node fires the Change event.
...This passes an event object to the function.
...This event object contains the XML from the selected Tree
node.
...The Tree node's XML data is passed into the positionsArray
XMLList.
...This array is the dataProvider for the DataGrid, as you
will see in the following block.
public function addTreePositionsToDG(event:Event):void{
this.positionsArray = selectedNode.positions.position;
...A datagrid has its dataProvider is bound to
positionsArray.
...(I will only show one column defined here for brevity.)
...This column has its dataField property set to "POS_TITLE",
a field in the returned XML record:
<mx:DataGrid width="100%" variableRowHeight="true"
height="75%" id="dgPositions"
dataProvider="{positionsArray}" editable="false">
<mx:columns>
<mx:DataGridColumn width="25" headerText="Position Title"
dataField="POS_TITLE"/>
</mx:columns>
</mx:DataGrid>
In debug mode, I can examine the datagrid's dataProvider
property, and see that the correct XML data from the Tree control
is present. However, The datagrid does not display the data in any
of its 6 columns.
Does anyone have any advice?
Thanks for your time.

Hello again,
I came up with a method of populating the DataGrid from the
selected Item of a Tree Control which displays complex XML data and
XML attributes. After the user clicks on a Tree branch, I call this
function:
public function addTreePositionsToDG(event:Event):void{
//Retrieve all "position" nodes from tree.
//Loop thru each Position.
//Add Position data to the positionsArray Array Collection.
//The DataGrid dataprovider is bound to this array, and will
be updated.
positionsArray = new ArrayCollection();
var selectedNode:Object=event.target.selectedItem;//Contains
entire branch.
for each (var position:XML in
selectedNode.positions.position){
var posArray:Array = new Array();
posArray.PK_POSITIONID = position.@PK_POSITIONID;
posArray.FK_ORDERID = position.@FK_ORDERID;
posArray.POS_TITLE = position.@POS_TITLE;
posArray.NUM_YOUTH = position.@NUM_YOUTH;
posArray.AGE_1617 = position.@AGE_1617;
posArray.AGE_1821 = position.@AGE_1821;
posArray.HOURS_WK = position.@HOURS_WK;
posArray.WAGE_RANGE_FROM = position.@WAGE_RANGE_FROM;
posArray.WAGE_RANGE_TO = position.@WAGE_RANGE_TO;
posArray.JOB_DESCR = position.@JOB_DESCR;
posArray.DES_SKILLS = position.@DES_SKILLS;
positionsArray.addItem(posArray);
So, I just had to manually go through the selected Tree node,
copy each XML attribute into a simple Array, then ADD this Array to
an ArrayCollection being used as the DataProvider for the DataGrid.
It's not elegant, but it works and I don't have to use a Label
Function, which was getting way too complicated. I still think that
Flex should have an easier way of doing this. There probably is an
easier way, but the Flex documentation doesn't provide an easy path
to it.
I want to thank you, Tracy, for the all the help. I checked
out the examples you have at www.cflex.net and they are very
helpful. I bookmarked the site and will be using it as a resource
from now on.

DataGrid ItemRender and font family

i am writing a custom data grid ItemRender that, for every
cell, displays a numeric value. Additionally, if the xml data
structure defines an attribute for a given row, it is supposed to
display a colored arrow in the same cell.
Reading the data and determining if to display the arrow, and
the color of the arrow work fine. I am trying to embed the
windgings font to display the arrow, that way I can set the color
programatically. As I said, reading the data works fine, the
coloring of the 'arrow' works fine. My problem is I cannot change
the fontFamily of any label in the item renderer. Even the entire
renderer itself. Below is my code, followed by several other things
I have tried. Thanks for the help.
<?xml version="1.0" encoding="utf-8"?>
<mx:HBox xmlns:mx="
http://www.adobe.com/2006/mxml"
width="100%" height="100%"
implements="mx.controls.listClasses.IDropInListItemRenderer"
horizontalScrollPolicy="off" verticalScrollPolicy="off">
<mx:Style>
@font-face
src: local("wingdings");
fontFamily: myArrowFont;
font-anti-alias-type: advanced;
font-weight: bold;
.arrowStyle
fontFamily: myArrowFont;
font-weight: bold;
font-size: 12;
</mx:Style>
<mx:Script>
<![CDATA[
import mx.controls.listClasses.BaseListData;
import mx.controls.dataGridClasses.DataGridListData;
protected var _listData:DataGridListData;
public function get listData():BaseListData
return _listData;
public function set listData(value:BaseListData):void
_listData = DataGridListData(value);
invalidateProperties();
override public function set data(value:Object):void
super.data = value;
cellArrow.setStyle('color',value[_listData.dataField].@color);
switch(value[_listData.dataField][email protected]())
case 'up':
cellArrow.text = 'é';
break;
case 'down':
cellArrow.text = 'ê';
break;
case 'equal':
cellArrow.text = 'd';
break;
default:
cellArrow.text = '';
break;
cellText.text = value[_listData.dataField];
]]>
</mx:Script>
<mx:Label id="cellText" text=""/>
<mx:Spacer width="100%"/>
<mx:Label id="cellArrow" styleName="arrowStyle"
text=""/>
</mx:HBox>
I have tried using <mx:Label id="cellArrow"
fontFamily='myArrowFont'/>
I have set the fontFamily='myArrowFont' in the base HBox tag
as well, and it doesn't change the font of either the cellArrow or
cellText label.
I have also used
cellArrow.setStyle('fontFamily','myArrowFont') in the override set
data method.
I have written the same component in ActionScript
implementing the same functionality.
The cellArrow label's text and color are set correctly to the
data, however I cannot get the font to change to windgings.
I have tried setting the DataGridColumn fontFamily to the
wingdings font, and all it does is change the header text of the
column, not any of the rows.
The actual datagrid is created entirely in actionscript,
because it is part of a control that will build a datagrid with X
number of columns, defined in a data structure. That code works
fine as well, and is below, incase it helps.
//_dataP is an XMLList from an httpservice or web service
that defines our grids
var colsX:XMLList = _dataP..column; //get an xmllist of our
columns
var len:int = colsX.length(); //and store the length
var cols:Array = new Array(); //create an empty array to hold
each column
var col:DataGridColumn; //a data grid column reference
for(var i:int = 0; i < len; i++)
col = new DataGridColumn(); //create a new column
col.headerText = colsX
.@text; //set the header text
col.dataField = colsX.@field; //and data field
col.itemRenderer = new ClassFactory(quadBoxItemRenderer);
cols.push(col); //add it to the array
_grid.columns = cols; //set our columns array as the columns
of the grid
var rows:XMLList = _dataP..row;
_grid.rowCount = (rows.length() == 0) ? 1 : rows.length();
_grid.dataProvider = rows; //and give it the list of rows
_grid.percentWidth = 100;
_gridBox.addChild(_grid);
any help is vastly appreciated. Thanks.

Disregard my question - I've unfortunately failed to check the font-family string as submitted by the server and it turned out to still have a colon character in front of it...
I guess I've spent a few too many nights working on this making me susceptible to tiredness and a strangely blank mind...
My apologies,
Rogier

Flash 2.0 Datagrid component bug ?

Recently I found a bug in Datagrid component. The swf file
which contain datagrid act differely in IE 6, and IE 7.
This is what I've done:
1) Compile swf, export it together with html file.
2) Run the html file
3)Press on one of the cell,drag it and then release it
outside of the browser/flash canvas.
4)Move the mouse pointer back to flash canvas
5)The grid will scroll automatically( move the move up and
down to test)
6)After a few times mouse pointer movement, suddenly IE
crash, CPU usage 100%
I have tested the swf file on firefox 2.007 and stand alone
flash player, however, none of the flash player have this bug.
Therefore I suspect that the ActiveX flash plugin for IE cause this
bug.
This is the source code, which I use to create the datagrid
for testing.
ps: open one fla file, drag datagrid component from component
panel to the stage or it will not run.
import mx.controls.DataGrid;
var header = "Stock Code/\nName,Type,Status,Order
Date\nTime,Duration,OrderQty/\nPrice,Matched Qty/\nPrice,Trd
Curr/\nMatched Value,Account No/\nOrder No";
var wid =
"90,43.2699356842522,91.5969497381748,87.4747020181826,60.4473499934867,67.9851014914014, 90.2231829093762,111.8984058876167,134.104372277509";
var alig = "left ,left, left , left , left , right , right ,
right , left ";
var halig = "center ,center,center , center , center , center
, center , center , center ";
var fxdata:Array = new Array();
fxdata[0]= new Array("67676
GPACKET","Buy","Expired","05/09/2007 06:04:20 PM","Day","200
4.34","0 0.00","MYR 0.00","423423423432");
fxdata[1]= new Array("054066
FASTRAK","Buy","Expired","05/09/2007 01:45:18 PM","Day","47,900
0.27","0 0.00","MYR 0.00","fdsfsdfsdf");
fxdata[2]= new Array("737013
HUBLINE","Sell","Expired","05/09/2007 11:53:19 AM","Day","400
0.69","0 0.00","MYR 0.00","93743");
fxdata[3]= new Array("31474
L&G","Buy","Expired","03/09/2007 11:35:35 AM","Day","500
0.70","0 0.00","MYR 0.00","389dskjfsd");
fxdata[4]= new Array("38182
GENTING","Buy","Expired","28/08/2007 11:38:59 AM","Day","500
7.35","0 0.00","MYR 0.00","90sklsdakl");
fxdata[5]= new Array("05005
PALETTE","Buy","Expired","28/08/2007 11:08:23 AM","Day","500
0.115","0 0.00","MYR 0.00","jsdaflk;as");
fxdata[6]= new Array("093082
GPACKET","Buy","Expired","27/08/2007 03:49:43 PM","Day","300
3.82","0 0.00","MYR 0.00","jsdafj;sda");
fxdata[7]= new Array("644769
KELADI","Buy","Expired","27/08/2007 11:05:36 AM","Day","10,000
0.30","0 0.00","MYR 0.00","jsadjf;lkdas");
fxdata[8]= new Array("676653
KASSETS","Buy","Expired","24/08/2007 06:15:33 PM","Day","500
2.93","0 0.00","MYR 0.00","jlsdf;adas");
fxdata[9]= new Array("473323
JAKS","Buy","Expired","23/08/2007 04:45:03 PM","Day","100 0.915","0
0.00","MYR 0.00","jjkljsdlfasd");
fxdata[10]= new Array("03069
IPOWER","Buy","Expired","22/08/2007 10:18:01 AM","Day","9,800
0.365","0 0.00","MYR 0.00","jlajsd;lfjads");
fxdata[11]= new Array("05025
LNGRES","Buy","Expired","21/08/2007 03:08:06 PM","Day","9,900
0.28","0 0.00","MYR 0.00","jlkjsdafl");
fxdata[12]= new Array("01308 N2N","Buy","Expired","21/08/2007
10:34:51 AM","Day","200 1.71","0 0.00","MYR 0.00","mjkjadsflasd");
fxdata[13]= new Array("70069
IPOWER","Buy","Cancelled","21/08/2007 10:02:08 AM","Day","0
0.37","0 0.00","MYR 0.00","jkjasd;fsda");
fxdata[14]= new Array("03069
IPOWER","Buy","Cancelled","20/08/2007 07:20:54 PM","Day","0
0.38","0 0.00","MYR 0.00","jkjsdlkfjsdaf");
fxdata[15]= new Array("12651
MRCB","Buy","Replaced","20/08/2007 05:31:59 PM","Day","900 2.35","0
0.00","MYR 0.00","upuewoirwe");
var mdtgrid:DataGrid;
_root.createEmptyMovieClip("displayobj1",
_root.getNextHighestDepth(),{_x:0,_y:0});
initial();
function initial(){
_root.mdtgrid =
_root.createClassObject(mx.controls.DataGrid, "xxx",
_root.getNextHighestDepth());
_root.mdtgrid.doLater(_root,"setData");
function setData(){ //insert data to datagrid
var temp:Array = new Array();
for (var i in _root.fxdata){
temp
= new Object();
for (var j in _root.fxdata){
temp
[j] = _root.fxdata[j];
_root.mdtgrid.dataProvider =temp;
_root.mdtgrid.doLater(_root,"setdgStyle");
function setdgStyle(){
var rowhight = 40;
var noofrow = 8;
var headerheight = 35;
var gridheight = (rowhight * noofrow) + headerheight ;
_root.mdtgrid.setSize(800, gridheight);
_root.mdtgrid.rowHeight =rowhight;
_root.setHeader(_root.header.split(","));
_root.setWidth(_root.wid.split(","));
_root.setAlign(_root.alig.split(","));
_root.mdtgrid.invalidate();
function setHeader(datasource:Array){ //set header label
var leng:Number = _root.mdtgrid.columnCount;
var sleng:Number = datasource.length;
var temp:Object;
for (i =0 ;i<leng;i++){
if (i>=sleng){
break;
_root.mdtgrid.getColumnAt(i).headerText = datasource
function setWidth(datasource:Array){ //set columns width
var leng:Number = _root.mdtgrid.columnCount;
var sleng:Number = datasource.length;
var temp:Object;
for (i =0 ;i<leng;i++){
if (i>=sleng){
break;
_root.mdtgrid.getColumnAt(i).width = Number(datasource);
function setAlign(datasource:Array){ //set Alignment
var leng:Number = _root.mdtgrid.columnCount;
var sleng:Number = datasource.length;
var temp:Object;
for (i =0 ;i<leng;i++){
if (i>=sleng){
break;
temp = _root.mdtgrid.getColumnAt(i);
temp.setStyle("textAlign",trim(datasource

Anyone know how to fix it ?

Urgent help required to make variableRowHeight & rowCount work hand in hand for a Datagrid

HI,
I am using variableRowHeight property on a datagrid to wrap the text and this works perfectly.
At the same time, I have to assign rowCount dynamically. My logic for caluculating rowCount is rowcount = sampleData.length > 5 ? 5:sampleData.length; where sampleData is my ArrayCollection. The caluculation happens correctly.
The issue here is rows of the datagrid do not show correctly.
From the post http://forums.adobe.com/message/2350643#2350643 I understood that both variableRowHeight & rowCount do not work hand in hand.
So, I tried removing variableRowHeight and it works fine. The solution says using measureHeightOfItems and viewMetrics to calculate the height may solve the issue. I did not understand it very clearly.
Can anyone let me know the solution with example.
Thnaks
Code
=========
<?xml version="1.0"?><mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" initialize="init()" xmlns:itemren="
com.itemren.*">
<mx:Script>
<![CDATA[
import mx.rpc.events.FaultEvent;
import mx.rpc.events.ResultEvent;
import com.vo.HeaderVO;
import com.vo.DataVO;
import mx.utils.ObjectUtil;
import mx.collections.IViewCursor;
import mx.controls.Alert;
import mx.collections.ArrayCollection;
Bindable]
public static var sampleData:ArrayCollection = new ArrayCollection ();
Bindable]
public var rowcount:int;
public function init():void {
sampleData.addItem( { AssetNo :
"234567890", AssetName : "Asset Name 1", Amount : "10000.02" } );sampleData.addItem( { AssetNo :
"234567891", AssetName : "Asset Name 2", Amount :"2.04" } );sampleData.addItem( { AssetNo :
"234567892", AssetName : "Asset Name 3", Amount : "4578.00" } );sampleData.addItem( { AssetNo :
"234567893", AssetName : "Asset Name 4", Amount : "384.00" } );sampleData.addItem( { AssetNo :
"234567894", AssetName : "Asset Name 5", Amount : "21454.20" } );sampleData.addItem( { AssetNo :
"234567890", AssetName : "Asset Name 1", Amount : "10000.02" } );sampleData.addItem( { AssetNo :
"234567891", AssetName : "Asset Name 2", Amount :"2.04" } );sampleData.addItem( { AssetNo :
"234567892", AssetName : "Asset Name 3", Amount : "4578.00" } );
trace ("sampleData.length ========= "+sampleData.length);
rowcount = sampleData.length > 5 ? 5:sampleData.length;
trace("count is ==== "+rowcount);
dg.rowCount=rowcount;
trace("dg.rowCount is === "+ObjectUtil.toString(dg.rowCount));
dg.dataProvider=sampleData;
]]>
</mx:Script>
<mx:Panel title="POC for dynamic rowCount of datagrid" height="100%" width="100%" paddingTop="
10" paddingLeft="10" paddingRight="10">
<mx:DataGrid id="dg" width="50%" wordWrap="true" variableRowHeight="
true">
<mx:columns>
<mx:DataGridColumn dataField="AssetNo" headerText="Asset No" paddingLeft="20" />
<mx:DataGridColumn dataField="AssetName" headerText="Asset Name" paddingLeft="20"/>
<mx:DataGridColumn dataField="Amount" headerText="Amount" paddingLeft="20"/>
</mx:columns>
</mx:DataGrid>
</mx:Panel>
</mx:Application>

Hi,
have you checked your bindings not only for the WF --> Method, also for the Method --> WF?
Christoph
Of course I mean the bindings between Task and Method / Method and Task
Edited by: Christoph Schle on Dec 21, 2007 11:05 AM

Rotate HeaderText in DataGrid

Similar Messages

Maybe you are looking for