Datagrid column width

I have 3 grids and they each have 5 columns that are a fixed
width and a different number of other columns for each grid that
are not fixed. I try width and minWidth in the DataGridColumn but I
can only make one grid fill 100% across. Im sure its a bug. I would
think the grid would streatch the widths to make 100%. any
thoughts?

Can you please put a code snippet? It would be easier to
analyze that way!
Thanks!

Similar Messages

Changing dataGrid column width with actionScript

Having a strange change when trying to change any dataGrid column width with this code:
dataGrid.columns[ 5 ].width = 200;
It do changes the width of column number 6 to 200, but strangely it's also changes the width of the preceding columns (0-4). Every preceding column automatically increases a little bit than its' existing width without having me any idea.
Any idea anyone have!
Thanks..!
SK

Hi,
See if this thread helps:
http://www.adobe.com/cfusion/webforums/forum/messageview.cfm?catid=585&threadid=1237299
Cheree

DataGrid column width is not set properly

Hi,
 In the below example I has called the OptimizeDataGrid method on Button Click event to resize the Column according to the data. First time of the button click event it called the function whereas the Datagrid Column width alone is not set properly.whereas on second time it is working properly.
For Eg : In the below statement the text value is coming as 55 and widthPadding is comes as 25. but the sum of these two value is not in the dg.columns[col].width.
dg.columns[col].width = text + widthPadding;
But the same is working on the second time of the Button click event. is any help me out to resovle this issue. Thanks in Advance.
<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
 width="100%" height="100%" >
 <mx:Script>
 <![CDATA[
 import mx.utils.ObjectUtil;
 import mx.collections.ArrayCollection;
 import mx.core.UITextField;
 import mx.events.AdvancedDataGridEvent;
 import mx.binding.utils.BindingUtils;
 import mx.controls.Alert;
 import mx.controls.AdvancedDataGrid;
 import mx.controls.advancedDataGridClasses.*;
 import mx.controls.DataGrid;
 import mx.controls.dataGridClasses.*;
 [Bindable]
 private var dpFlat:ArrayCollection = new ArrayCollection([
 {Region:"aabbCC", Territory:"Central Californiaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa",
 Territory_Rep:"Joe Smith", Actual:29134, Estimate:30000},
 {Region:"AAbbcc", Territory:"Nevada",
 Territory_Rep:"Bethany Pittman", Actual:52888, Estimate:45000}
 private function optimizeDataGrid(dg:Object,widthPadding:uint = 0,heightPadding:uint = 0):void
 if ((!dg is DataGrid))
 return;
 var col:uint;
 var colWidth:uint;
 var tf:TextFormat;
 var renderer:UITextField;
 var widths:Array = new Array(dg.columnCount);
 var height:uint = 0;
 var dgCol:Object;
 var text:uint = 0;
 if (dg.columnCount > 0 && dg.dataProvider != null)
 for (col = 0; col < dg.columnCount; ++col)
 widths[col] = 0;
 for each (var item:Object in dg.dataProvider)
 for (col = 0; col < dg.columnCount; ++col)
 renderer = new DataGridItemRenderer();
 dg.addChild(renderer);
 dgCol = dg.columns[col];
 renderer.text = dgCol.itemToLabel(item);
 widths[col] = Math.max(renderer.measuredWidth, widths[col]);
 height = Math.max(renderer.measuredHeight, height);
 dg.removeChild(renderer);
 for (col = 0; col < dg.columnCount; ++col)
 dg.addChild(renderer);
 renderer.text = dg.columns[col].headerText;
 widths[col] = Math.max(renderer.measuredWidth,widths[col]);
 dg.removeChild(renderer);
 text = widths[col];
 dg.columns[col].width = text + widthPadding;
 if (height != 0)
 dg.rowHeight = height + heightPadding;
 ]]>
 </mx:Script>
 <mx:DataGrid id="myADG"
 dataProvider="{dpFlat}" rowCount="{dpFlat.length}" sortableColumns="false">
 <mx:columns>
 <mx:DataGridColumn dataField="Region" />
 <mx:DataGridColumn dataField="Territory_Rep" headerText="Territory Rep" />
 <mx:DataGridColumn dataField="Territory" />
 <mx:DataGridColumn dataField="Actual" />
 <mx:DataGridColumn dataField="Estimate" />
 </mx:columns>
 </mx:DataGrid>
 <mx:Button label="click" id="click" click="optimizeDataGrid(myADG,25,5);"/>
</mx:Application>
Regards
Harikumar

With horizontalScrollPolicy="off" (the default), it is hard to control
column widths because the columns are sometimes overridden to make sure they
fit on the screen.

Flex 3: DataGrid Column width on resize

Hello experts,
I am facing an issue with width of DataGrid columns. We are using Flex 3.2.
I am setting the widths for columns in creationComplete handler of DataGrid. When the browser window is resized, say restore down and then maximize,
the column widths are changing. Please find the code below:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" height="100%" width="100%">
<mx:Script>
 <![CDATA[
 import mx.core.ScrollPolicy;
 [Bindable]
 private var isVisible:Boolean = true;
 private function creationCompleteHandler():void{
 dataGrid.horizontalScrollPolicy = ScrollPolicy.ON;
 artist.width = dataGrid.width * 0.40;
 album.width = dataGrid.width * 0.50;
 Price.width = dataGrid.width * 0.10;
 dataGrid.horizontalScrollPolicy = ScrollPolicy.OFF;
 ]]>
</mx:Script>
<mx:DataGrid id="dataGrid" width="80%" height="100%" creationComplete="creationCompleteHandler()">
 <mx:ArrayCollection>
 <mx:Object Artist="Pavement" Price="11.99"
 Album="Slanted and Enchanted" />
 <mx:Object Artist="Pavement"
 Album="Brighten the Corners" Price="11.99" />
 </mx:ArrayCollection>
 <mx:columns>
 <mx:DataGridColumn id="artist" dataField="Artist"/>
 <mx:DataGridColumn id="album" dataField="Album" visible="{isVisible}"/>
 <mx:DataGridColumn id="Price" dataField="Price" />
 </mx:columns>
 </mx:DataGrid>
</mx:Application>
Is there anything wrong i am doing here? Please help me in resolving this.
Thanks,
Srilatha

Hi Srilatha,
DataGrid width is 100% and the main application width also 100%, So the
DataGrid will try to occupy the whole window, when you do "restore down" &
"maximize" Application width will change.. and it will effect DataGrid and
its columns also. Try to give some fixed width for dataGrid and you can
expect the result.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
height="100%" width="100%">
 <mx:Script>
 <![CDATA[
 import mx.core.ScrollPolicy;
 private var isVisible:Boolean = true;
 private function creationCompleteHandler():void
 dataGrid.horizontalScrollPolicy = ScrollPolicy.ON;
 artist.width = dataGrid.width * 0.40;
 album.width = dataGrid.width * 0.50;
 Price.width = dataGrid.width * 0.10;
 dataGrid.horizontalScrollPolicy = ScrollPolicy.OFF;
 ]]>
 </mx:Script>
 <mx:DataGrid id="dataGrid" width="500" height="100%"
creationComplete="creationCompleteHandler()">
 <mx:ArrayCollection>
 <mx:Object Artist="Pavement" Price="11.99"
 Album="Slanted and Enchanted" />
 <mx:Object Artist="Pavement"
 Album="Brighten the Corners" Price="11.99" />
 </mx:ArrayCollection>
 <mx:columns>
 <mx:DataGridColumn id="artist" dataField="Artist"/>
 <mx:DataGridColumn id="album" dataField="Album"
visible=""/>
 <mx:DataGridColumn id="Price" dataField="Price" />
 </mx:columns>
 </mx:DataGrid>
</mx:Application>
Thanks
Pradeep Reddy

DataGrid: column width to content

Hi all.
I have some DataGrid, filled from array or from external
source - it's not matter.
Headers of columns can have different length, and I need to
implement columns resizing depends of header length.
I understand, that I must use some custom headerRenderer, but
I am flex newbie and have not used renderers earlier, so my test
was not sucessfull.
I've configired my DataGrid as in the attached code..
and how must I implement my renderer? should I override "set
data function" or some other method?
how can I get header lentgh in pixels?
and then how can I set column width?
Thanks and best regards.

Should I use a Label, or I need another component?
For example, can I use such renderer format?

Setting datagrid column width according to itemrenderer.

Hi all,
This is my first question ever in any forum i have visited, so if you find anything stupid about my way of asking question then Pls ignore.
I have taken a datagrid and for one of the datagrid column I have an itemrendere which is an HBOX. THe Hbox contains 3 buttons Edit, Update, cancel. At first only Edit button is visible and on click of it, It is removed from the Hbox and 2 other buttons i.e. Update and Cancel are added in the Hbox. what i want is when i add these 2 buttons the size of the datagrid column should get adjusted accordingly.
I have serached a lot abt this but couldnt find a solution. Please help.
Happy new year to all.....

@Pramod :
(listdata.owner as datagrid) .validateNow();
// thats wat i did. but not working.
@John : TypicalItem may work but I am using Flex Builder 3 and i think it does not provide the typicalItem class in it.

DataGrid Column Width Issues (Bug?)

I have a couple datagrid with three columns, one column in
each grid has width="50". I've noticed some odd behavior with this.
First, in Flex Builder, the width of those columns randomly change
in Design view. If I go and change the width setting to something
else and back to 50 or refresh the display it goes back to
displaying correctly.
Second, when I actually run the project, it seems that my
contraint layout settings expand my 50 pixels significantly. It
certainly doesn't evenly split my three columns if I have a width
setting, but it is far bigger than 50 pixels.
These could be completely unrelated, but are both
unexpected.

I haven't set the horizontalScrollPolicy, so I'm assuming
it's the default. The way you described it is the way I understand
it would work, however, it seems that when I use contraint layout
to stretch it to nearly 100% across the screen, the 50 pixels is
not kept. That one column is certainly narrower that the remaining
two columns, but it is far bigger that 50 pixels. It's more like
100 or 150. It's more an annoyance than anything. I have a column
with a Checkbox in this disproportionally large column. Visually,
it looks odd.

Spark DataGrid with Dynamic Column Width

Lets suppose I have a Spark Datagrid with no explicit typicalItem. When the Datagrid is initialized, the column widths are calcualted correctly based on the contents of the dataprovider. However if I add/remove an item from the dataprovider, or modify the one of the objects in the dataprovider, the column widths never update to reflect the change. Is the the correct behavior for a DataGrid? If so, is there any method I can call to force the DataGrid to recalculate and redraw the column widths?

When Spark DataGrid doesn't have a typicalItem, it uses the first dataProvider item as the typicalItem. If you change that, the DataGrid won't pick it up immediately. You can invalidate the current typicalItem using dataGrid.invalidateTypicalItem().

Trouble with DataGrid's last column width

I have a datagrid with thirty columns.
When I use the mouse to drag the window and resize its size,the last column width becomes more and more wide,and the previous column width is squeezed small.
If anybody else came accross the same problem,can you share your solution?
Thanks,
April

If horizontalScrollPolicy=”off” then there is an attempt to fit all columns within the width of the DG while respecting minWidth of the columns. Make sure the minWidths allow the columns you want to shrink can shrink.
However, there is still a chance of round-off error. I think the only solution may be to set the width of each column as you want it on a resize event from the DG.

Dynamic DataGrid columns

How can I get this example to wok with <mx:HTTPService>
insead of the inline <mx:XML> ?
Dynamic DataGrid columns
Example of how to dynamically create DataGridColumns
A completely dynamic DataGrid example.
This example uses the xml from the Flexstore example. It
examines the first product node and uses that to create the
definitions for the columns. There is some example logic to change
the columns properties.
It then instantiates the GataGrid and its columns array,
assigns the properties, and then the dataProvider, and then adds
the dataGrid to the application container.
The example is fully self-contained, since a portion of the
catalog.xml file is included in the mxml.
<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="
http://www.adobe.com/2006/mxml"
layout="vertical"
creationComplete="initApp()">
<mx:Script><![CDATA[
import mx.controls.dataGridClasses.DataGridColumn;
import mx.controls.DataGrid;
import mx.collections.XMLListCollection;
import mx.controls.Alert;
[Bindable]
private var _xlcCatalog:XMLListCollection; //the
dataProvider for the DG
//run by creationComplete
public function initApp():void
_xlcCatalog = new XMLListCollection(xmlCatalog.product);
//wrap the XML product nodes in an XMLListCollection
buildDG(); //creates the dataGrid
}//initApp
private function buildDG():void
var aColumnDef:Array = getColumnDefArray(); //returns a
noraml array of objects that specify DtaGridColumn properties
var oColumnDef:Object;
var dg:DataGrid = new DataGrid; //instantiate a new DataGrid
var dgc:DataGridColumn;
var aColumnsNew:Array = dg.columns
var iTotalDGWidth:int = 0;
for (var i:int=0;i<aColumnDef.length;i++) { //loop over
the column definition array
oColumnDef = aColumnDef
dgc = new DataGridColumn(); //instantiate a new
DataGridColumn
dgc.dataField = oColumnDef.dataField; //start setting the
properties from the column def array
dgc.width = oColumnDef.width;
iTotalDGWidth += dgc.width; //add up the column widths
dgc.editable = oColumnDef.editable;
dgc.sortable = oColumnDef.sortable
dgc.visible = oColumnDef.visible;
dgc.wordWrap = oColumnDef.wordWrap;
aColumnsNew.push(dgc) //push the new dataGridColumn onto the
array
dg.columns = aColumnsNew; //assign the array back to the
dtaGrid
dg.editable = true;
dg.width = iTotalDGWidth;
dg.dataProvider = _xlcCatalog; //set the dataProvider
this.addChild(dg); //add the dataGrid to the application
}//buildDG
//uses the first product node to define the columns
private function getColumnDefArray():Array
//Alert.show("colcount:" + xmlCatalog.toXMLString());
var aColumns:Array = new Array();
var node0:XML = xmlCatalog.product[0]; //get the first
"product" node
var xlColumns:XMLList = node0.children(); //get its child
nodes (columns) as an XMLList
var xmlColumn:XML
var oColumnDef:Object;
for (var i:int=0;i<xlColumns.length();i++) { //loop over
the xmlList
xmlColumn = xlColumns;
oColumnDef = new Object();
oColumnDef.dataField = xmlColumn.localName(); //make the
dataField be the node name
switch (oColumnDef.dataField) { //conditional column
property logic
case "name":
oColumnDef.width = 80;
oColumnDef.sortable = false;
oColumnDef.visible = true;
oColumnDef.editable = false;
oColumnDef.wordWrap = false;
break;
case "description":
oColumnDef.width = 200;
oColumnDef.sortable = false;
oColumnDef.visible = true;
oColumnDef.editable = false;
oColumnDef.wordWrap = true;
break;
case "price":
oColumnDef.width = 40;
oColumnDef.sortable = true;
oColumnDef.visible = true;
oColumnDef.editable = true;
oColumnDef.wordWrap = false;
break;
case "image":
oColumnDef.width = 100;
oColumnDef.sortable = false;
oColumnDef.visible = false;
oColumnDef.editable = false;
oColumnDef.wordWrap = false;
break;
default:
oColumnDef.width = 50;
oColumnDef.sortable = true;
oColumnDef.visible = true;
oColumnDef.editable = false;
oColumnDef.wordWrap = false;
break;
aColumns.push(oColumnDef);
return aColumns; //return the array
}//getColumnDefArray
]]></mx:Script>
<mx:XML id="xmlCatalog">
<catalog>
<product productId="1">
<name>Nokia 6010</name>
<description>Easy to use without sacrificing style,
the Nokia 6010 phone offers functional voice communication
supported by text messaging, multimedia messaging, mobile internet,
games and more</description>
<price>99.99</price>
<image>assets/pic/Nokia_6010.gif</image>
<series>6000</series>
<triband>false</triband>
<camera>false</camera>
<video>false</video>
<highlight1>MMS</highlight1>
<highlight2>Large color display</highlight2>
</product>
<product productId="2">
<name>Nokia 3100 Blue</name>
<description>Light up the night with a
glow-in-the-dark cover - when it's charged with light you can
easily find your phone in the dark. When you get a call, the Nokia
3100 phone flashes in tune with your ringing tone. And when you
snap on a Nokia Xpress-on™ gaming cover*, you'll get
luminescent light effects in time to the gaming
action.</description>
<price>139</price>
<image>assets/pic/Nokia_3100_blue.gif</image>
<series>3000</series>
<triband>true</triband>
<camera>false</camera>
<video>false</video>
<highlight1>Glow-in-the-dark</highlight1>
<highlight2>Flashing lights</highlight2>
</product>
<product productId="3">
<name>Nokia 3100 Pink</name>
<description>Light up the night with a
glow-in-the-dark cover - when it's charged with light you can
easily find your phone in the dark. When you get a call, the Nokia
3100 phone flashes in tune with your ringing tone. And when you
snap on a Nokia Xpress-on™ gaming cover*, you'll get
luminescent light effects in time to the gaming
action.</description>
<price>139</price>
<image>assets/pic/Nokia_3100_pink.gif</image>
<series>3000</series>
<triband>true</triband>
<camera>false</camera>
<video>false</video>
<highlight1>Glow-in-the-dark</highlight1>
<highlight2>Flashing lights</highlight2>
</product>
<product productId="4">
<name>Nokia 3120</name>
<description>Designed for both business and pleasure,
the elegant Nokia 3120 phone offers a pleasing mix of features.
Enclosed within its chic, compact body, you will discover the
benefits of tri-band compatibility, a color screen, MMS, XHTML
browsing, cheerful screensavers, and much more.</description>
<price>159.99</price>
<image>assets/pic/Nokia_3120.gif</image>
<series>3000</series>
<triband>true</triband>
<camera>false</camera>
<video>false</video>
<highlight1>Multimedia messaging</highlight1>
<highlight2>Animated screensavers</highlight2>
</product>
<product productId="5">
<name>Nokia 3220</name>
<description>The Nokia 3220 phone is a fresh new cut
on some familiar ideas - animate your MMS messages with cute
characters, see the music with lights that flash in time with your
ringing tone, download wallpapers and screensavers with matching
color schemes for the interface.</description>
<price>159.99</price>
<image>assets/pic/Nokia_3220.gif</image>
<series>3000</series>
<triband>false</triband>
<camera>true</camera>
<video>false</video>
<highlight1>MIDI tones</highlight1>
<highlight2>Cut-out covers</highlight2>
</product>
</catalog>
</mx:XML>
</mx:Application>

It should work the same way.
What problem are you having?
Tracy

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.

ItemRenderer in a datagrid column setStyle() does not do anything to the appearance

I have a custom ItemRenderer in a datagrid column, however
the setStyle() does not do anything to the appearance. when it is
called. Any ideas?
<mx:DataGridColumn dataField="area" width="50"
headerText="Area">
<mx:itemRenderer>
<mx:Component>
<mx:Text>
<mx:Script>
<![CDATA[
override public function set data( value:Object ) : void {
super.data = value;
setStyle("Color",0xff0000);
if(data.area == 'G'){
setStyle("backgroundColor",0xff0000);
}else{
setStyle("backgroundColor",0xff0000);
]]>
</mx:Script>
</mx:Text>
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>

Your renderer code looks a little strange. This works, and
may get you started:

Datagrid column text styles

I have a datagrid column that contains strings in this
syntax: ##% (##%)
When the percentages are over 0% I'd like the text to be
green; when the percentages are under 0%, I'd like to change the
text to red. Apart from breaking this into two columns, how can I
change the colors of different strings inside the same datagrid
column?
Thanks,
Tom

Tom,
One way to do this would be to make a custom ItemRenderer
based on a Label for your dataGrid column. Then, just test whether
you have positive or negative values for your dataField. If it is
negative, use a setStyle('color', 0xFF0000) for red. Here is a
basic example:
<?xml version="1.0" encoding="utf-8"?>
<mx:Label xmlns:mx="
http://www.adobe.com/2006/mxml">
<mx:Script>
<![CDATA[
override public function set data(value:Object):void {
super.data = value;
if (value != null)
if(value.fieldValue >= 0) //fieldValue will need to match
your dataField value from your dataProvider of your dataGrid. You
might need to convert it to an int to compare.
setStyle("color", 0x00DD00);
} else {
setStyle("color", 0xDD0000);
super.invalidateDisplayList();
]]>
</mx:Script>
</mx:Label>
Then in your main app:
<mx:DataGridColumn headerText="Drill Type"
dataField="fieldVAlue" width="105"
itemRenderer="renderers.RedGreen"/>
This assumes that your mxml component is named
'RedGreen.mxml' and is in the 'renderers' directory. You can adjust
this to fit your project as needed. I hope this helps.
Vygo

Datagrid column in module causing memory leak

Hi All
I'm having trouble with a DataGrid column preventing a module from being release properly. I can't imagine this is the intended behaviour.
Using this simple test case, a WindowedApplication and an mx:Module I wonder if anyone else can reproduce this problem. The issue goes away if you simply comment out the GridColumn Instance.
Can anyone offer any advice?
Many thanks
James
DataGridTest.mxml
<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
 xmlns:s="library://ns.adobe.com/flex/spark"
 xmlns:mx="library://ns.adobe.com/flex/mx">
 <fx:Script>
 <![CDATA[
 import mx.core.IVisualElement;
 import mx.events.ModuleEvent;
 import mx.modules.IModuleInfo;
 import mx.modules.ModuleManager;
 private var assetModule:IModuleInfo;
 protected function load_clickHandler(event:MouseEvent):void
 assetModule = ModuleManager.getModule('DataGridTestModule.swf');
 assetModule.addEventListener("ready", getModuleInstance);
 assetModule.load();
 public function getModuleInstance(event:ModuleEvent):void
 var sm:DisplayObject = assetModule.factory.create() as DisplayObject;
 sm.addEventListener("close", closeModule);
 contentHolder.addElement(sm as IVisualElement);
 private function closeModule(event:Event):void
 event.target.removeEventListener("close", closeModule);
 contentHolder.removeElement(event.target as IVisualElement);
 assetModule.unload();
 assetModule = null;
 ]]>
 </fx:Script>
 <s:VGroup width="100%" height="100%">
 <s:HGroup >
 <s:Button id="load" label="Load" click="load_clickHandler(event)"/>
 </s:HGroup>
 <s:BorderContainer id="contentHolder" width="100%" height="100%"/>
 </s:VGroup>
</s:WindowedApplication>
DataGridTestModule.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Module xmlns:fx="http://ns.adobe.com/mxml/2009"
 xmlns:s="library://ns.adobe.com/flex/spark"
 xmlns:mx="library://ns.adobe.com/flex/mx"
 layout="absolute" xmlns:components="components.*">
 <fx:Script>
 <![CDATA[
 protected function close_clickHandler(event:MouseEvent):void
 dispatchEvent(new Event('close', true, false))
 ]]>
 </fx:Script>
 <s:BorderContainer id="contacts"
 width="100%" height="100%"
 backgroundAlpha="0"
 borderVisible="false">
 <s:layout>
 <s:VerticalLayout/>
 </s:layout>
 <s:Button id="close" label="Close" click="close_clickHandler(event)"/>
 <s:DataGrid id="queries" >
 <s:columns>
 <s:ArrayList>
 <s:GridColumn/> 
 </s:ArrayList>
 </s:columns>
 </s:DataGrid>
 </s:BorderContainer>
</mx:Module>

OK, So I've done some more testing. Creating the GridColumn in AS during the creationComplete event is a slight improvement. It seems to allow the DataGrid and the Module be GC'd, but it's still leaking memory somewhere. I just can't get my head around the Profiler. Also, it's going to be a massive headache if we have to rewrite our application to create all the GridColumns in AS. Surely this shouldn't be necessary?
New test case below:
DataGridTest.mxml
<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
 xmlns:s="library://ns.adobe.com/flex/spark"
 xmlns:mx="library://ns.adobe.com/flex/mx">
 <fx:Script>
 <![CDATA[
 import mx.collections.ArrayList;
 import mx.core.IVisualElement;
 import mx.events.ModuleEvent;
 import mx.modules.IModuleInfo;
 import mx.modules.ModuleManager;
 import spark.components.gridClasses.GridColumn;
 private var assetModule:IModuleInfo;
 private var sm:DisplayObject;
 protected function load_clickHandler(event:MouseEvent):void
 assetModule = ModuleManager.getModule('DataGridTestModule.swf');
 assetModule.addEventListener("ready", getModuleInstance);
 assetModule.load();
 public function getModuleInstance(event:ModuleEvent):void
 sm = assetModule.factory.create() as DisplayObject;
 sm.addEventListener("close", closeModule);
 contentHolder.addElement(sm as IVisualElement);
 private function closeModule(event:Event):void
 event.target.removeEventListener("close", closeModule);
 contentHolder.removeElement(event.target as IVisualElement);
 assetModule.unload();
 assetModule = null;
 ]]>
 </fx:Script>
 <s:VGroup width="100%" height="100%">
 <s:HGroup >
 <s:Button id="load" label="Load" click="load_clickHandler(event)"/>
 </s:HGroup>
 <s:BorderContainer id="contentHolder" width="100%" height="100%"/>
 </s:VGroup>
</s:WindowedApplication>
DataGridTestModule.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Module xmlns:fx="http://ns.adobe.com/mxml/2009"
 xmlns:s="library://ns.adobe.com/flex/spark"
 xmlns:mx="library://ns.adobe.com/flex/mx"
 creationComplete="module1_creationCompleteHandler(event)"
 layout="absolute" xmlns:components="components.*">
 <fx:Script>
 <![CDATA[
 import flash.utils.setTimeout;
 import mx.collections.ArrayList;
 import mx.events.FlexEvent;
 import spark.components.gridClasses.GridColumn;
 [Bindable]
 private var _col:ArrayList = new ArrayList();
 protected function close_clickHandler(event:MouseEvent):void
 dispatchEvent(new Event('close', true, false))
 protected function module1_creationCompleteHandler(event:FlexEvent):void
 var gc:GridColumn = new GridColumn();
 gc.headerText = 'Test Column';
 _col.addItem(gc);
 ]]>
 </fx:Script>
 <s:BorderContainer width="100%" height="100%">
 <s:layout>
 <s:VerticalLayout/>
 </s:layout>
 <s:Button id="close" label="Close" click="close_clickHandler(event)"/>
 <s:DataGrid id="queries" columns="{_col}"/>
 </s:BorderContainer>
</mx:Module>

Datagrid column that contains checkbox erroring

Hi i'm trying to set the selected option on a checkbox in a datagrid column but i keep getting the error "Access to undefined property data". Can someone shead some light on how i can fix this? The code i have is below.
Thanks in advance....
<mx:DataGrid x="140" y="85" width="596" height="294" id="rankGrid" dataProvider="{dp}" doubleClick="updRank();" doubleClickEnabled="true">
<mx:columns>
<mx:DataGridColumn headerText="Court" dataField="court"/>
<mx:DataGridColumn headerText="Team One" dataField="level"/>
<mx:DataGridColumn headerText="Checked In" dataField="chkdInOne">
<mx:itemRenderer>
<fx:Component>
<s:CheckBox selected="{data.chkdInOne}" click="outerDocument.checkInTeamOne()" />
</fx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
<mx:DataGridColumn headerText="Team One" dataField="teamonedesc"/>
<mx:DataGridColumn headerText="Checked In" dataField="chkdInTwo">
<mx:itemRenderer>
<fx:Component>
<s:CheckBox click="outerDocument.checkInTeamTwo()" selected="{data.chkdInTwo}"/>
</fx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
<mx:DataGridColumn headerText="Team Two" dataField="teamtwodesc"/>
</mx:columns>
</mx:DataGrid>

try wrapping your component inside the itemrenderer tag
<fx:Component>
 <s:ItemRenderer>
 <s:CheckBox />
 </s:ItemRenderer>
</fx:Component>

Datagrid column width

Similar Messages

Maybe you are looking for