Show dataTip on a datagrid column

Hi,
I need to show dataTip on a datagrid column only if its length is greater than 20 chars.
Additionaly, my datagrid is a custom component, I am passing the column names as an array and building the grid dynamically
so that it could be used for any dataprovider (with different set of columns).
when the dataTipFunction is invoked runtime I would not know the column field name
to access the value since the dataTipFunction makes available only the item:Object unlike labelFunction which provides both item and column.
But i would know all the column names at any given point in time.
Is there anyway we can get hold for which column the dataTipFunction is being called for...
Any help is greatly appreciated.

Subclass DataGridColumn and add the dataTipFunction to the subclass. Then
the 'this' pointer will be the column.

Similar Messages

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

Tooltip show forever until the mouse exists the datagrid column header

Hi,
Any idea on showing tooltip forever until the mouse exists the datagrid column header.
Thanks
Atul

Hi JamieVJohnson,
Please specify the
GroupStyle.Panel to the
DataGridRowsPresenter in DataGrid, since the default GroupStyle.Panel (StackPanel) cannot fit for the DataGrid Width "*" and the columns collapse.
<DataGrid Height="100">
<DataGrid.GroupStyle>
<GroupStyle>
<GroupStyle.Panel>
<ItemsPanelTemplate>
<DataGridRowsPresenter/>
</ItemsPanelTemplate>
</GroupStyle.Panel>
<GroupStyle.ContainerStyle>
<Style TargetType="{x:Type GroupItem}">
</Style>
</GroupStyle.ContainerStyle>
</GroupStyle>
</DataGrid.GroupStyle>
<DataGrid.Columns>
<DataGridTextColumn Header="Column 1" Width="2*"/>
<DataGridTextColumn Header="Column 2" Width="1*"/>
</DataGrid.Columns>
</DataGrid>
Sincerely,
Bob Bao
Please remember to mark the replies as answers if they help and unmark them if they provide no help.
Are you looking for a typical code sample? Please download
all in one code framework !

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.
             * <p>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.</p>
             * @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.

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 !

Datagrid column value

How do I iterate over each row and then the columns of the
datagrid?
I populate the datagrid columns through an actionscript
function (on click of a button and using datagrid.addItem()
method). So my dataprovider is not an arraycollection or from xml
or whatever.

DataGrid does not have an "addItem()" method.
Are you using Flex 1.5?
Show us the code where you are doing this.
Tracy

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 to make spark datagrid columns to behave like mx datagrid columns

Hello.
I have a problem with spark datagrid component. I can't force spark datagrid columns behave like old mx datagrid columns. In mx datagrid columns fills 100% of datagrid regardles of resizing column or datagrid itself (it will not show horizontal scrolling bar). In spark datagrid last column (colC) will never word wrap, event after setting horizontalScrollPolicy=off. I would like to somehow constrain spark columns to behave like mx ones.
App snippet (try to resize app and columns - especially colC - and you will see what I mean):
<?xml version="1.0" encoding="utf-8"?>
<s:Application 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:Declarations>
        <s:ArrayCollection id="dp">
            <s:DataItem colA="some sample data" colB="some sample data" colC="some sample data"/>
            <s:DataItem colA="some sample data" colB="some sample data" colC="some sample data"/>
            <s:DataItem colA="some sample data" colB="some sample data" colC="some sample data"/>
            <s:DataItem colA="some sample data" colB="some sample data" colC="some sample data"/>
            <s:DataItem colA="some sample data" colB="some sample data" colC="some sample data"/>
            <s:DataItem colA="some sample data" colB="some sample data" colC="some sample data"/>
            <s:DataItem colA="some sample data" colB="some sample data" colC="some sample data"/>
            <s:DataItem colA="some sample data" colB="some sample data" colC="some sample data"/>
            <s:DataItem colA="some sample data" colB="some sample data" colC="some sample data"/>
        </s:ArrayCollection>
    </fx:Declarations>
    <s:layout>
        <s:HorizontalLayout/>
    </s:layout>
    <s:DataGrid id="grid" width="100%" height="100%" dataProvider="{dp}" variableRowHeight="true" horizontalScrollPolicy="off">
        <s:columns>
            <s:ArrayList>
                <s:GridColumn headerText="Column A" dataField="colA"/>
                <s:GridColumn headerText="Column B" dataField="colB"/>
                <s:GridColumn headerText="Column C" dataField="colC"/>
            </s:ArrayList>
        </s:columns>
    </s:DataGrid>
    <mx:DataGrid id="grid2" width="100%" height="100%" dataProvider="{dp}" wordWrap="true" variableRowHeight="true">
        <mx:columns>
            <mx:DataGridColumn headerText="Column A" dataField="colA"/>
            <mx:DataGridColumn headerText="Column B" dataField="colB"/>
            <mx:DataGridColumn headerText="Column C" dataField="colC"/>
        </mx:columns>
    </mx:DataGrid>
</s:Application>

the datagrid has sortItems and sortItemsOn methods you can use.

Devices does not show up in left-hand column

Ipod nano is connected to USB port and has fully charged. "Devices" doesn't show up in left-hand column. Library, Store, Genius, and Playlists are listed. Looked on public forums, but no viable solution displayed. I welcome suggestions. Nano was not recognized when used an older cable. 2nd cable worked.
I think it could be my PC's problem. It doesn't list the nano in control panel.
I reset the nano, to no avail.
Thanks.Greg

Welcome to the Apple Community.
Unless you have any devices it won't show up. The Apple TV is not a device that shows up in the devices list in iTunes, that was the Apple TV 1.

Sharing does not show up on the side column ... tried turning off home sharing then turning it back on ... shared shows up untell i click "done " then its gone.

sharing does not show up on the side column ... tried turning off home sharing then turning it back on ... shared shows up untell i click "done " then its gone.

Yes, I have also tried and failed when setting up Home Sharing. I have followed the instruction given on the Support website, but this is all I see:
Both computers are on the same local network and both allow Home Sharing and are signed in with the same user name. I am not sure what else to do. Any suggestions?

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.

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.

Report suddenly showing ORA-20001: Error fetching column value: ORA-06502:

Hi,
Some reports in my applications are suddenly showing:
ORA-20001: Error fetching column value: ORA-06502: PL/SQL: numeric or value error: character string buffer too small
instead iof the data they used to show.
In my development system I can fix this by:
1. changing the column alias in my sql
select 'a' alias1 from dual becomes
select 'a' alias2 from dual
2. SAVE CHANGES
3. change column alias back to original
select 'a' alias2 from dual becomes
select 'a' alias1 from dual
4. reorder columns back to original in the 'report attributes' tab
alias1 is now at the bottom of my colum list - i just bounce it up to column 4 using the up arrows
5. SAVE CHANGES
then everything starts working OK again.
There seems to be nothing wrong with my sql as I can make it works on a new page or after I run the above steps, so I guess something is breaking somewhere but I cannot work out what.
Has anyone else seen this? Does anyone know the cause? Does anyone have a fix for this that does not involve the above steps (plus redeployment to prodcution and all the work that involves)?
I am seeing this on version 2.3 and 3.0.
Thanks,
Martin

Hi Scott,
I think this is want you want (sorry it's not easy to read):
wp.suite_id - Database Column NUMBER - Report Column Based on LOV
wp.project_id - Database Column NUMBER - Report Column Based on LOV
wp.application_order wp_order - Database Column NUMBER - Report Column Standard
lpad(wp.work_package_id,5,'0')||' - '||wp.name wp_name - Database Column NUMBER/VARCHAR2 - Report Column Standard
pt.application_order pt_order - Database Column NUMBER - Report Column Standard
pt.name pt_name - Database Column VARCHAR2 - Report Column Standard
substr(pt.description,1,30) description - Database Column VARCHAR2 - Report Column Standard
pt.application_tier - Database Column VARCHAR2 - Report Column Based on LOV
pt.application_method - Database Column VARCHAR2 - Report Column Based on LOV
pt.TECH_LEAD_ID - Database Column NUMBER - Report Column Based on LOV
This report has no link columns and no derived columns.
Regards,
Martin

Show dataTip on a datagrid column

Similar Messages

Maybe you are looking for