DataGrid Column/Data alignment

I have an issue with a DataGrid where I'm trying to align the
header differently from the data underneath. I would like the
header to be center-aligned, and the data to be right-aligned, but
it seems to be all or nothing with textAlign. Has anyone run into
this and found a way to do it?

If you have different align values for each column, then I
think you will need to use a custom headerRenderer as Tracy
suggested. Here is a sample:
<mx:DataGridColumn dataField="full_name" width="175"
textAlign="left">
<mx:headerRenderer>
<mx:Component>
<mx:Label text="Name" textAlign="center"/>
</mx:Component>
</mx:headerRenderer>
</mx:DataGridColumn>
In this sample, the column textAlign is set to left and the
header textAlign is set to center in the Label component of the
headerRenderer.
I hope this helps.
Vygo

Similar Messages

Fetching column data for clicked DataGrid cell

I am using a DataGrid and the number of columns are based on the data thus dynamic; columns are added at runtime. I am trying to use the same ItemRenderer for all columns. The one piece I can not seem to get to work is knowing which datafield to use to populate each column. I have tried getting the column.dataField from the current datacolumn to no avail; sample code listed below. This is my first Flex project so my approach to the problem may not be the best; please alert me if this is the case. I would appreciate any help you could lend.
                var dgListData:DataGridListData = listData as DataGridListData;
                var dataGrid:DataGrid = dgListData.owner as DataGrid;
                var column:DataGridColumn = dataGrid.columns[dgListData.columnIndex];
                var dataField = column.dataField;
                var lbl:Label = new Label();
                lbl.text = value[dataField];    // must add based on previously named source field; dataField
ce

Update:
     A few more details...
I am trying to do this inside of override public function set data(value:Object):void {}

Sort Column Date - DataGrid - Flex 4.5.1

Hi
I made download the function (below) to sort column date in DateGrid, but is not working
private function date_sortCompareFunc(itemA:
Object, itemB:Object):int
 var dateA:Date=new Date(Date.parse(itemA.dob));
 var dateB:Date=new Date(Date.parse(itemB.dob));
 return ObjectUtil.dateCompare(dateA, dateB);
<s:GridColumn dataField="DATA_VENCIMENTO_ID"
 width="115"
 headerText="Data Vencimento"
 dataTipFunction="date_sortCompareFunc">
someone can help me?
Marcos

Hi Marcos,
This forum here is for questions related to the LiveCycle Collaboration Service product.
You might want to post your question to the Flex forum:
http://forums.adobe.com/community/flex/flex_general_discussion
Hope this helps.
Good luck,
Julien
LCCS Quality Engineering

How to ensure header and column data are aligned using JTable

We have a JTable but it looks like header cells are a bit misaligned from table column data. How can this be fixed?

I asked you a question in your previous posting on the exact same subject and you never replied. Why should i bother again?

Report Column Heading Alignment - Center Not Working Correctly

I am using Apex 2.1 (XE) and now have an application with about 30 pages. I've noticed that some of my reports which have columns with a heading alignment of "center" are not always centering if they have columns that align to the left or right included before them. I looked at the generated HTML and it shows that align="LEFT" or align="RIGHT" is being generated in the source even when the column heading is set to center in the designer. It appears that if a field higher on the list says to align the column heading left or right, then that is what the following columns are going to do also if they are set to center. So column heading left and right works great, and center works only if all the columns are set to center.
My question: Is this a known bug? Is it something that can be scheduled for a fix at some point in the future?
Luckily the column data itself obeys the column alignment, so this is strictly a cosmetic problem with the column headings.
Thanks,
Jim

Hello,
What theme are you using?
Try setting them with a css decalration. Instead of align="right" put this is in the heading attribute
style="text-align:right;" or style="text-align:left;"
Carl

Problems With Data Alignment when spooling to a CSV file

Dear members,
I am spooling data to a csv file. My data contains 3 columns
For example :
col1 col2 col3
USD,10000033020000000000000,-1144206.34
The 2nd column is alphanumeric, it contains some rows which have only numbers and some which have numbers and alphabets.
The 3rd column contains only numbers with positive or negative values.
I am facing problem with alignment. when i open the spooled csv file then i find that the 3rd column is aligned to right .
In the 2nd column, rows which have only numbers are right justified and rows which have alpha numeric data are left justified.
I tried using the JUSTIFY function in sql plus but still it is not working for me.
Can any body give your opinion on how to control the alignment in spooled csv files.
Your responce is highly appreciated.
Here is my code :
WHENEVER SQLERROR CONTINUE
SET TIMING off
set feedback off
set heading off
set termout OFF
set pagesize 0
set linesize 200
set verify off
set trimspool ON
SET NEWPAGE NONE
col to_char(glcd.segment1||glcd.segment2||glcd.segment3||glcd.segment4||glcd.segment5||glcd.segment6) ALIAS CONCATENATED_SEGMENTS
col CONCATENATED_SEGMENTS justify left
col to_char(decode(glbal.currency_code,glsob.currency_code,
(begin_balance_dr - begin_balance_cr) + (period_net_dr -period_net_cr),
(begin_balance_dr_beq - begin_balance_cr_beq) + (period_net_dr_beq -period_net_cr_beq))) alias Total_Functional_Currency
col Total_Functional_Currency justify left
COlUMN V_INSTANCE NEW_VALUE V_inst noprint
select trim(lower(instance_name)) V_INSTANCE
from v$instance;
column clogname new_value logname
select '/d01/oracle/'|| '&&V_inst' ||'out/outbound/KEMET_BALANCE_FILE_EXTRACT' clogname from dual;
spool &&logname..csv
SELECT glsob.currency_code ||','||
to_char(glcd.segment1||glcd.segment2||glcd.segment3||glcd.segment4||glcd.segment5||glcd.segment6) ||','||
to_char(decode(glbal.currency_code,glsob.currency_code,
(begin_balance_dr - begin_balance_cr) + (period_net_dr -period_net_cr),
(begin_balance_dr_beq - begin_balance_cr_beq) + (period_net_dr_beq -period_net_cr_beq)))
from gl_balances glbal , gl_code_combinations glcd , gl_sets_of_books glsob
where      period_name = '&1' /* Period Name */
and      glbal.translated_flag IS NULL
and      glbal.code_combination_id = glcd.code_combination_id
and      glbal.set_of_books_id = glsob.set_of_books_id
and      glbal.actual_flag = 'A'
and      glsob.short_name in ('KEC-BOOKS' , 'KUE' , 'KEU','KEMS', 'KEAL' , 'KEAL-TW' , 'KEAL-SZ' , 'KEAM')
and glcd.segment1 != '05'
and decode(glbal.currency_code , glsob.currency_code , (begin_balance_dr - begin_balance_cr) + (period_net_dr -period_net_cr) ,
(begin_balance_dr_beq - begin_balance_cr_beq) + (period_net_dr_beq -period_net_cr_beq)) != 0
and glbal.template_id IS NULL
ORDER BY glcd.segment1 || glcd.segment2 || glcd.segment3 || glcd.segment4 || glcd.segment5 || glcd.segment6
spool off
SET TIMING on
set termout on
set feedback on
set heading on
set pagesize 35
set linesize 100
set echo on
set verify on
Thanks
Sandeep

i think you do not have to worry about your code when you say that the plain texts created are ok when opened on the notepad. it is on the excel that you will need some adjustments. not sure about this but you might want to read about the applying styles in the excel by going through it's help menu.

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

JTable cell data alignment ..Emergency

Hello,
I have created a table using a JTable. I want to align some columns data right, and some left and some columns center. How do I go about to do this. If i add textfields on this table ..then all the stuff goes smooth but in case of simple TableColumns alighnment dont work
for(int index=0;index<columnNames.length;index++)
TableColumn column = table.getColumnModel().getColumn(index);
Component component =table.getDefaultRenderer(table.getColumnClass(index)). getTableCellRendererComponent( table, data[index],false, false, 0, index);
if i cast component to textField then i found Method name textField.setHorizontalAlignment(SwingConstants.RIGHT);
but if i hav simple JTable then i dont found any method setHorizontalAlignment(SwingConstants.RIGHT);
Can you please help me.
Thanks in advance

Overrider getColumnClass() in your table model such that you return the class of the data in that column. For java.lang.Number derivatives, JTable will right justify those for you.

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.

Editable Datagrid Column

I have to make a datagrid column editable during runtime based on the data. If the column has a specific data then the column should not be editable otherwise it should be editable. Can we do it in flex ? please show some pointers.

I don't have any examples , but you should probably have a custom itemrenderer for your datagrid which contains a textarea. In the itemrenderer should override set data( value:Object ):void. In that function you check a condition to see if the textarea "editable" value should be set to true or false. Below I have some pseudo-code.
<s:Itemrenderer>
override public function set data( value:Object ):void
if( object.decidingValue > 0 )
TnA.editable = false;
else
TnA.editable = true;
<s:TextArea id="TnA" />
</s:Itemrenderer>
or you could just put the code in the TextArea declaration
<s:TextArea id="TnA" editable="{data.decidingValue > 0}" />
(TextInput area is probably more appropriate than a textarea , but the logic is the same )
If this response was helpful please mark it as such.

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 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>

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;
}

DataGrid Column/Data alignment

Similar Messages

Maybe you are looking for