Hide a DataGrid Column in a State?

In one state, I want to show all columns. In a second state,
I want to hide a few columns and made the grid smaller.
I have:
<mx:State name="detail">
<mx:AddChild relativeTo="{hbox1}"
position="lastChild">
<ns:DetailPanel id="detailPanel" />
</mx:AddChild>
<mx:SetProperty target="{listPanel}" name="width"
value="450"/>
</mx:State>
</mx:states>
I know how to hide a column in
Actionscript, but I thought it would be more convenient to
make it part of the state.

The reason I was thinking States-only is that I am now
switching state, and trying to hide these 2 columns via
Actionscript and the column widths are getting messed up when the
states switch (on the columns not getting hidden).
Some columns suddenly get way narrower when the panel gets
wider -- the opposite of what I'd expect -- and get narrower that
their set widths.

Similar Messages

Hide Specific Datagrid Column Header

Hi,
I'm asking for if ther is a method to hide a specific
datagrid header colum;
The showHeaders property of datagrid give me the possibility
to set the visibility of all datagrid header column.
There is a way to hide, for example, the header of first
datagrid column?
PLEASE HELP ME!!
Thank you

"markuspedro" <[email protected]> wrote in
message
news:glvr3g$gls$[email protected]..
> thank's, but this solution not run.. i would hide the
header of specif
> column..
>
> It' s impossible that flex give us the possibility to
hide only the header
> of all columns...
If you hide the header, then the space it occupies will still
be there, so
the rows will line up. Try using a headerRenderer wit one
state that shows
the header text and one state that shows nothing.

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.

Adding a Tree into a datagrid column

I have a requirement where I have to create a datagrid with
one of the columns having a tree control. The problem I am trying
to resolve is how to dynamically change the height of the datagrid
column which has the tree when the tree is collapsed and
dynamically increase the datagrid column height when the tree is
expanded.
Is is feasible ? Am I chasing a wild dream ?
Any help will be greatly appreciated...
Thanks

Darin,
Thank you for responding. I was able to get a tree display in
a datagrid. I am going to attach all the code.
The problem I am facing is, I need two clicks to expand a
tree in the datagrid column so that both the tree to expand and the
datagrid column to adjust its height. Let me know why this is so.
May be, being a newbie, I am completely off the track here. Thanks
in advance.
THE MXML
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="
http://www.adobe.com/2006/mxml"
layout="absolute" xmlns:ns1="com.ram.flash.custom.*">
<mx:XML id="xmlData" source="myDataWithTree.xml"/>
<mx:HBox>
<mx:DataGrid id="dgSource"
dataProvider="{xmlData.person}" editable="false"
variableRowHeight="true">
<mx:columns>
<mx:Array>
<mx:DataGridColumn editable="false" sortable="false"
resizable="true" width="400" textAlign="left" headerText="Id"
dataField="address">
<mx:itemRenderer>
<mx:Component>
<ns1:PruDataGridTreeColumn
disclosureOpenIcon="@Embed(source='icn_minus.jpg')"
disclosureClosedIcon="@Embed(source='icn_plus.jpg')" width="260"
height="20" />
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
<mx:DataGridColumn headerText="Name" dataField="name"
editable="false"/>
<mx:DataGridColumn headerText="Age" dataField="age"
editable="false"/>
</mx:Array>
</mx:columns>
</mx:DataGrid>
</mx:HBox>
</mx:Application>
THE DATA
<?xml version="1.0" encoding="UTF-8" ?>
<data>
<person>
<name>Mister</name>
<age>36</age>
<address>
<Capitals label="U.S. State Capitals">
<capital label="AL" value="Montgomery"/>
<capital label="AK" value="Juneau"/>
<capital label="AR" value="Little Rock"/>
<capital label="AZ" value="Phoenix"/>
<capital label="AL" value="Montgomery"/>
<capital label="AK" value="Juneau"/>
<capital label="AR" value="Little Rock"/>
<capital label="AZ" value="Phoenix"/>
<capital label="AL" value="Montgomery"/>
<capital label="AK" value="Juneau"/>
<capital label="AR" value="Little Rock"/>
<capital label="AZ" value="Phoenix"/>
</Capitals>
</address>
</person><person>
<name>Missus</name>
<age>28</age>
<address>
<Capitals label="Indian State Capitals">
<capital label="AL" value="Montgomery"/>
<capital label="AK" value="Juneau"/>
<capital label="AR" value="Little Rock"/>
<capital label="AZ" value="Phoenix"/>
</Capitals>
</address>
</person>
</data>
THE CUSTOM ACTIONSCRIPT CLASS
package com.ram.flash.custom
import flash.geom.Rectangle;
import mx.core.IDataRenderer;
import mx.controls.listClasses.IListItemRenderer;
import flash.display.DisplayObjectContainer;
import flash.events.Event;
import mx.managers.ISystemManager;
import mx.controls.Tree;
import flash.display.Sprite;
import flash.display.DisplayObject;
import mx.events.FlexEvent;
import mx.collections.XMLListCollection;
import flash.events.MouseEvent;
import mx.controls.treeClasses.TreeItemRenderer;
import mx.controls.treeClasses.TreeListData;
import mx.core.ClassFactory;
import mx.events.ScrollEvent;
import mx.controls.DataGrid;
import mx.events.CollectionEvent;
import mx.events.CollectionEventKind;
public class PruDataGridTreeColumn extends Tree implements
IListItemRenderer, IDataRenderer
private var _data : Object = null;
private var _dataGrid:DataGrid = null;
[Bindable("dataChange")]
public override function get data():Object
return _data;
public function set myDataGrid(value:DataGrid):void
_dataGrid = value;
public function PruDataGridTreeColumn()
super();
public override function set data(value:Object):void
this._data = value;
this.invalidateProperties();
var xmlDATA:XMLList = new XMLList(_data);
this.labelField='@label';
this.dataProvider = xmlDATA.address.Capitals;
dispatchEvent(new FlexEvent(FlexEvent.DATA_CHANGE));
override public function expandItem(item:Object,
open:Boolean, animate:Boolean=false, dispatchEvent:Boolean=false,
cause:Event=null):void
animate = true;
super.expandItem(item,open,animate,dispatchEvent,cause);
var lc:XML = new XML(item);
var ht:Number = 20;
var wt:Number = this.width;
if(open)
ht = (lc.children().length() * 20 + 40);
this.height = (lc.children().length() * 20 + 40);
else
ht = 20;
this.height = 20;
}

Checkbox in a datagrid column header not working properly

Hi,
I have rendered a checkbox in the header of a datagrid column
using headerRenderer property. That column also has all entries as
checkboxes. What I want to do is that on checking the header
checkbox, all checkboxes should get checked. Though I am able to do
this BUT the header checkbox remains uncheched in the whole
process! Whereas, if I remove this eventHandler from it, then the
header checkbox shows the correct state i.e., show checked on
checking & unchecked on unchecking!
Any input?
Thanks in advance,
Cheree

hi many thanks for looking at my problem
what i am trying to do is show a column if the proc_id is greater than 2
it just looks a bit silly when a user configures the file (but not submitted it for loading)
the file cnt is null or zero - i had hoped not to show this - the proc_id is found from the report query !

Unsort a DataGrid Column

short version:
Is there a clever way to "un-sort" a datagrid column so the
Column and Grid will go back to the original pre-sorted state?--not
just remove the ability to sort.
long-winded background:
I'm using a ComboBox to toggle between report views (which
are displayed in a DataGrid). I have 2 views: the All View and the
Grouped View. The trouble I'm having is that once a column in my
DataGrid gets sorted by a User (which is desirable) in the All
View, then when the User toggles to the Grouped View the sort is
still in place for the column (not desirable). Upon toggle (via
ComboBox change event), I first clear out the DataProvider of all
data, then I'm setting the "sortable" property of the individual
columns and the DataGrid to be 'false' and then I'm repopulating
the DataProvider with fresh data. The result is that the ability to
sort the datagrid is indeed taken away from the User, but the new
data still appears sorted by the column.
dataAC.removeAll(); // ArrayCollection DataProvider to my
DataGrid
// Grouped View
for (var j:int=0;j<graphDG.columns.length;j++) {
var dgc: DataGridColumn = graphDG.columns[j] as
DataGridColumn;
dgc.sortable = false;
graphDG.sortableColumns = false;
...// refill dataAC

Hello feldt12,
This will clear the sort:
ListCollectionView(dataGrid.dataProvider).sort = null;
ListCollectionView(dataGrid.dataProvider).refresh();
Thanks,
Philip
Message was edited by: Philip Keiter

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.

Hide/show a column in a report

Hi,
I'm actually looking for a solution to hide/show a column in a report (matrix form)in function of a parameter..
Using the conditionnal formating propertie to hide a column (return false) works, but the colmuns in the right side don't move.. It's not very pretty..
An other way could be to change the elasticity property of a column, and replace the data by "", but apparently, we can't access to this property by the srw command.
I really need a solution, else I'll have to produce as many reports as I've to hide columns...
Thanks a lot
Best regards..
DAvid
null

Hi,
I use 'decode' in sql statement. If your sql statement is applicable to this,you may use it. So you can choose which columns you want to use and also you can concatanate columns to make them one column.

Need help adding image to datagrid column

Hi,
Can anyone tell me how to add an image to a datagrid column?
I have created a flex library project which contains a mxml component with a datagrid, an item renderer mxml component which rendered the image within the datagrid column depending on the value coming back from the database for that column and a folder 'assets' which hold all the images. When I add the library to my main project and call the mxml component with the datagrid an image place holder is visible in the datagrid column but not the image. However, if I take the image out of the library project and added to an 'assets' folder in the main project the image is displayed in the datagrid column.
It looks like, even though the images are in the flex library project and only the flex library project is trying to display the images in the datagrid, the library project is looking in the main application project folder for the image.
Does anyone know why this is happening and how to fix it?
Thanks in advance for an help,
Xander.

I have tried embedding the images in my library but it still didn't work. Also I can't embed the image as I'm using the value of the column to complete the image name, for example in my mxml item renderer component I have the added the following code
<mx:Image source="@Embed(source='assets/' + data.mycolumnvalue + '.png')" tooltip="{data.mycolumnvalue}"/>
but nothing is displayed.

How do I show an image in a DataGrid column?

I'm not sure that this is possible. I would like to show an
image in a datagrid column based on the data that the grid is bound
to. Is there any way to do this? I'm using Beta 3.
Thanks!

Yes, you need a custom itemRenderer. This can be inline or a
custom class.
Tracy

How to Hide a entire column in a Table Control?

Can we hide an entire column in a Table control? Plz give some hints in doing the same...

Here is a sample, if you wish to do it programattically. If you used the table control wizard, then you should have a module which is listed in the flow logic PBO of the screen. Its probably commented out.
itabcon_change_col_attr
Uncomment it and create the module. Then put the code that I have in the module below into your module.
report zrich_0003 .
*&spwizard: declaration of tablecontrol 'ITABCON' itself
controls: itabcon type tableview using screen 0100.
data: begin of itab occurs 0,
 fld1 type c,
 fld2 type c,
 end of itab.
start-of-selection.
call screen 100.
*& Module STATUS_0100 OUTPUT
* text
module status_0100 output.
* SET PF-STATUS 'xxxxxxxx'.
* SET TITLEBAR 'xxx'.
endmodule.
*& Module ITABCON_change_col_attr OUTPUT
* text
module itabcon_change_col_attr output.
 data: wa like line of itabcon-cols.
loop at itabcon-cols into wa.
 if wa-screen-name = 'ITAB-FLD2'.
 wa-invisible = '1'.
 modify itabcon-cols from wa.
 endif.
endloop.
endmodule.
Regards,
Rich Heilman

Center text in Datagrid columns

Hi all,
I need help vertically centering text in a datagrid column.
Does anyone know of a way to do this without custom item
Renderers?

Would really need to see the code to see the extent of the damage Photoshop html has caused. This is a typical problem when exporting html from Photoshop OR trying to assemble the slices into one gigantic table where the cells have been split and merged numerous times which causes distortion.
The idea, looking at your page, would be to insert a simple 3 column x 1 row table into Dreamweaver then insert the components that make up your page into their realtive columns. Using this simple construction method will ensure that all the page elements remain seperate and cannot interact with other element in different cells, which is what is NOT happening in your construction at the moment.

How do I hide a table column

Hi,
I'm trying to create a link column in a table by declaring one column as link type and set its linkColumnKey to another column which contains the actual text of the http URL. I'd like to hide the second column in the table. How do I do that? One of the posts I found said that I can set the column type to USER and an empty title, then the column won't be displayed since I don't have a renderer. However, the column still gets displayed.
Any help would be appreciated.
Thanks,
Jenny

Try this
this.model.getColumn("col1").setType(TableColumnType.LINK);
this.model.getColumn("col1").setLinkClickTarget("_blank"); //to open in new win
this.model.getColumn("col1 Opportunities").setLinkColumnKey("col2");

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

Using a Datagrid in a New State

Is it possible to put a datagrid in a new state? Everytime I
try I get a parser error in the code. I am trying to have the
datagrid pop onto the scren after a selection is made which is why
I am putting it into another state.
Thanks.
Dave

I think this should work. Can you post simplified sample
code.

Hide a DataGrid Column in a State?

Similar Messages

Maybe you are looking for