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

Similar Messages

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

  • Dynamic text in a dataGrid column?

    i have a datagrid. i want to populate the first column with a different label depending on the row number.
    A good example of this would be
    Column 1 label
    Label 1
    Label 2
    Label 3
    Label 4
    I have these labels in an array, so i could access them if i had the row number.
    Anyone know how to do this?
    thanks!

    Hi peteandrus,
    You can simply use the code snippet below to display the labels row wise....
    <?xml version="1.0" encoding="utf-8"?>
    <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
       <mx:Script>
       <![CDATA[
        import mx.controls.Alert;
          [Bindable]private var myAC:Array = [
             {Column1:'Label 1', Column2:"Text 1"},
             {Column1:'Label 2', Column2:"Text 2"},
             {Column1:'Label 3', Column2:"Text 3"},
             {Column1:'Label 4', Column2:"Text 4"}
       ]]>
       </mx:Script>
    <mx:DataGrid id="dataGrid" dataProvider="{myAC}" x="10" y="177" visible="true">          
      <mx:columns>
       <mx:DataGridColumn  headerText="Column 1 label" dataField="Column1"/>           
       <mx:DataGridColumn dataField="Column2" headerText="Column 2 label" />           
      </mx:columns>
    </mx:DataGrid>
    </mx:Application>
    If you really want to find the row index based assignment you can try something using labelFunction for the DataGrid column...
    Something like below:
    <?xml version="1.0" encoding="utf-8"?>
    <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
       <mx:Script>
       <![CDATA[
        import mx.controls.dataGridClasses.DataGridColumn;
        import mx.controls.Alert;
        [Bindable]private var myAC:Array = [
      {Column1:'Label 1', Column2:"Text 1"},
            {Column1:'Label 2', Column2:"Text 2"},
            {Column1:'Label 3', Column2:"Text 3"},
            {Column1:'Label 4', Column2:"Text 4"}
    private var counter:int=-1;         
        private function column1LabelFunction(item:Object, coulmn:DataGridColumn):String
         var strLabel:String="";
         counter++;
         if(counter < myAC.length)
          strLabel = myAC[counter].Column1;
      return strLabel;    
       ]]>
       </mx:Script>
    <mx:DataGrid id="dataGrid" dataProvider="{myAC}" x="10" y="177" visible="true">          
      <mx:columns>
       <mx:DataGridColumn  headerText="Column 1 label" labelFunction="column1LabelFunction"/>           
       <mx:DataGridColumn dataField="Column2" headerText="Column 2 label" />           
      </mx:columns>
    </mx:DataGrid>
    </mx:Application>
    Thanks,
    Bhasker Chari

  • If myText.text == any value in a datagrid column

    Hey guys, in a simple form, I am trying to achieve what's in my title.
    I have a text box in which you type in a value (number).
    I have a submit button which inserts the value into my data-grid which  is populated by a data provider to display that information (ZendAMF).
    For my submit button function I need it to loop through all the  values(rows) in a column (my dataprovider) of my data-grid to check if my text box value  is equal to any of the data in the rows for that column.
    I found a function on another forum that should help me achieve this but I still cannot get it to work as I don't think I'm using the function correctly. Note the function is called "findItem()"
    Here is my example code:
    //I have a datagrid
    <mx:DataGrid id="myDataGrid"  dataProvider="amfcall.getData.lastResult}">
             <mx:columns>
                <mx:DataGridColumn  headerText="MyHeading" dataField="myDataField"/>
             </mx:columns>
    </mx:DataGrid>
    //I  have a form for adding data into the datagrid
    <mx:Form  id="addData">
        <mx:FormItem>
            <mx:TextInput  id="myText"/>
        </mx:FormItem>
    </mx:Form>
    //I  have a button to submit the form data by calling a function
    <mx:Button  label="Add" id="addData" click="findItem()"/>
    //I  have the function to find any item in the datagrid column that is equal  to the text input in the form. This is what I can't code correctly.
    public  function findItem(myDataGrid.dataProvider, myDataField:String,  myText.text):Boolean
         for each(var item:Object in  myDataGrid.dataProvider)    
              if(item[myDataField] == myText.text)            
                return  true;    
         return false;
    So I don't think I'm correctly typing the first line of the 'findItem' function as I'm currently receiving [I]1084: Syntax error: expecting rightparen before dot.[/I] for this line [I]public function findItem(myDataGrid.dataProvider, myDataField:String, myText.text):Boolean [/I]
    Also, the error does not change if I strict type those things to ':Object' etc.
    I may just be using the function totally wrong, can anyone hlpe me out?

    Hard to tell what’s going on from the information you are providing; but just looking at the first line of your sample code:
    Have you checked in the debugger to see what your dataProvider looks like?
    You want a resultHandler to set some kind of list – let’s say a previously declared AC, which then becomes your dataProvider for the DataGrid. Something like:
    private function amfCallResultHandler(event:ResultEvent):void{
          Var someVar:ArrayCollection = event.result as ArrayCollection;
          blah blah blah;
          myDataProvider = someVar;    
    HTH,
    Carlos

  • 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"?>
    <!-- This example uses the dataProvider to build the
    dataGrid columns dynamically -->
    <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>
            <!--- The default value of the <code>sortIndicator</code> property.
            It must be an IFactory for an IVisualElement.       
            <p>This value is specified in a <code>fx:Declaration</code> block and can be overridden
            by a declaration with <code>id="defaultSortIndicator"</code>
            in an MXML subclass.</p>
            @langversion 3.0
            @playerversion Flash 10
            @playerversion AIR 2.0
            @productversion Flex 4.5
            -->
            <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">   
                            <!--- @private -->
                            <s:GradientEntry id="arrowFill1" color="0" alpha="0.6" />
                            <!--- @private -->
                            <s:GradientEntry id="arrowFill2" color="0" alpha="0.8" />
                        </s:RadialGradient>
                    </s:fill>
                </s:Path>
            </fx:Component>
            <!--- Displays the renderer's label property, which is set to the column's <code>headerText</code>.
            It must be an instance of a <code>TextBase</code>, like <code>s:Label</code>.
            <p>This visual element is added to the <code>labelDisplayGroup</code> by the renderer's
            <code>prepare()</code> method.   Any size/location constraints specified by the labelDisplay
            define its location relative to the labelDisplayGroup.</p>
            <p>This value is specified with a <code>fx:Declaration</code> and can be overridden
            by a declaration with <code>id="labelDisplay"</code>
            in an MXML subclass.</p>
            @langversion 3.0
            @playerversion Flash 10
            @playerversion AIR 2.0
            @productversion Flex 4.5
            -->
            <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>     
        <!-- layer 1: shadow -->
        <!--- @private -->
        <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>
        <!-- layer 2: fill -->
        <!--- @private -->
        <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>
        <!-- layer 3: fill lowlight -->
        <!--- @private -->
        <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>
        <!-- layer 4: fill highlight -->
        <!--- @private -->
        <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> 
        <!-- layer 5: highlight stroke (all states except down) -->
        <!--- @private -->
        <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>
        <!-- layer 6: highlight stroke (down state only) -->
        <!--- @private -->
        <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>
        <!--- @private -->
        <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:Rect id="fill" left="0" right="0" top="0" bottom="0">
            <s:fill>
                <s:LinearGradient rotation="90">
                    <s:GradientEntry color.normal="0xf9f9f9" color.hovered="0xfcfdfa"
                                     color.down="0xdceac2" alpha="0.85" />
                    <s:GradientEntry color.normal="0xeaeaea" color.hovered="0xdceac2"
                                     color.down="0xd2e1b5" alpha="0.85" />
                </s:LinearGradient>
            </s:fill>
        </s:Rect>-->
        <!--<s:VGroup left="7" right="7" top="5" bottom="5" gap="6" verticalAlign="middle">
            <s:TextInput width="100%" />
            <s:HGroup width="100%">
                <s:Group id="labelDisplayGroup" width="100%" />
                <s:Group id="sortIndicatorGroup" includeInLayout="false" />
            </s:HGroup>
        </s:VGroup>-->
        <s:VGroup verticalAlign="middle" left="7" top="5" right="7" bottom="5" gap="2" >
            <s:TextInput id="filterInput" width="100%" visible="false" includeInLayout="false" keyUp="onKeyUp(event)" focusOut="onFocusOut(event)" click="onTextInputSelection(event)"/>
            <s:Spacer id="filterSpacer" visible="false" includeInLayout="false" height="5" />
        <s:HGroup width="100%" height="100%" verticalAlign="middle">
            <s:Group id="labelDisplayGroup" width="100%" />
            <s:Group id="sortIndicatorGroup" includeInLayout="false" />
        </s:HGroup>
        </s:VGroup>
    </s:GridItemRenderer>

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

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

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

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

  • Datagrid column header word wrap issue

    Hi All,
    I'm passing dynamic text to a datagrid column header. The word wrap is true but it's not working.
    Any ideas how to fix this issue?
    DataGridColumn headerText="{myVar.text} Total" headerWordWrap="true"
    Thanks
    Johnny

    @Johnny,
    Try to make use of the headerRenderer property and use <mx:Text /> control as a renderer so that your headerText gets wrapped..
    Thanks,
    Bhasker
    Message was edited by: BhaskerChari

  • Cancel edition in a Datagrid Column

    What i´m wishing to do is very simple, i just want to cancel an edition in a DataGrid column,
    Loosing focus of the textbox confirms the edition, i wanted to place 2 buttons above the edition text box, cancel and confirm, but it seems to be impossible...
    any idea?
    thanks in advance!!

    Yea that seems to work fine for me so in full, with editing features
    Custom Comp
    <?xml version="1.0" encoding="utf-8"?>
    <mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="182" height="72"  >
    <mx:Script>
    <![CDATA[
    private function handleOk():void {
    this.data.someText = textInput.text
    override public function set data(value:Object):void {
    super.data = value;
    textInput.text = data.someText
    private function cancel():void {
    textInput.text = data.someText;
    ]]>
    </mx:Script>
    <mx:TextInput id="textInput" x="10" y="10" />
    <mx:Button x="10" y="40" label="Update" click="handleOk()"/>
    <mx:Button x="85" y="40" label="Cancel" click="cancel()"/>
    </mx:Canvas>
    Application
    <?xml version="1.0" encoding="utf-8"?>
    <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:local="*">
    <mx:Script>
    <![CDATA[
    import mx.collections.ArrayCollection;
    [Bindable]
    private var ac:ArrayCollection = new ArrayCollection([
    {someText : 'Line 1'},
    {someText : 'Line 2'},
    {someText : 'Line 3'},
    {someText : 'Line 4'},
    {someText : 'Line 5'},
    {someText : 'Line 6'},
    {someText : 'Line 7'},
    {someText : 'Line 8'},
    {someText : 'Line 9'},
    {someText : 'Line 10'}
    ]]>
    </mx:Script>
    <mx:DataGrid x="71" y="90" dataProvider="{ac}">
    <mx:columns>
    <mx:DataGridColumn headerText="Column 1" dataField="someText" itemRenderer="Comp1" width="182"/>
    <mx:DataGridColumn headerText="Column 2" dataField="col2"/>
    <mx:DataGridColumn headerText="Column 3" dataField="col3"/>
    </mx:columns>
    </mx:DataGrid>
    </mx:Application>
    Hope this helps
    Andrew

  • Setting the editable property of a datagrid column dynamically

    Hi,
    Im trying to set the editable property and renderer is editable property for a datagrid column to false on the creation complete event of the datagrid.But It does not work.While visible property works.why doesnt the editable property work.The particular column has a renderer which is a text box.and the editable property is set to false initially.Any Suggestions or ideas on how to achieve this will be of great help.

    Eu tenho vontade de estar devidamente por dentro de tudo isso.

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

  • Importing two-column text from Pages

    I've produced several successful calendars and books using the iPhoto service in the past couple of years, but one thing has me defeated.
    So far, I have used Pages to create text, then style it the way I want, and finally cut and paste it into the book project. It works perfectly. So far, so good.
    Now I want to do two-column text pages, instead of a full-width single-column layout, but I can't find a way to do it.
    I have tried exporting the two-column set out of Pages as a pdf, then using the Import command in iPhoto, but it is greyed out in the navigation window. No go.
    Any ideas?

    Do a Print to PDF of the Pages layout and select the Send PDF to iPhoto option. That will create a jpg image of the page which can be added to a full page layout in the Book. Here are a couple of crude examples of that from a Word document: Portrait oriented - Landscape oriented.
    Of course my example is single column but with a two column layout in Pages and in the landscape mode it would work just as well.
    TIP: For insurance against the iPhoto database corruption that many users have experienced I recommend making a backup copy of the Library6.iPhoto (iPhoto.Library for iPhoto 5 and earlier) database file and keep it current. If problems crop up where iPhoto suddenly can't see any photos or thinks there are no photos in the library, replacing the working Library6.iPhoto file with the backup will often get the library back. By keeping it current I mean backup after each import and/or any serious editing or work on books, slideshows, calendars, cards, etc. That insures that if a problem pops up and you do need to replace the database file, you'll retain all those efforts. It doesn't take long to make the backup and it's good insurance.
    I've created an Automator workflow application (requires Tiger or later), iPhoto dB File Backup, that will copy the selected Library6.iPhoto file from your iPhoto Library folder to the Pictures folder, replacing any previous version of it. It's compatible with iPhoto 6 and 7 libraries and Tiger and Leopard. iPhoto does not have to be closed to run the application, just idle. You can download it at Toad's Cellar. Be sure to read the Read Me pdf file.
    Note: There now an Automator backup application for iPhoto 5 that will work with Tiger or Leopard.
    Message was edited by: Old Toad

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

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

  • [WPF] Format column text for showing percentage

    Hi,
    in one column of my DataGrid I show percentage values.
    From database, I get the number:
    - in view, I would concatenate the char "%"
    - in edit, the user add his value and when mouse leaves cell automatically is concatenated the char "%"
    How can I implement it?
    Thanks.

    Replace any DataGridTextColumn with a DataGridTemplateColumn and specify a StringFormat for the TextBlock in the CellTemplate only:
    <DataGrid.Columns>
    <!--<DataGridTextColumn Binding="{Binding Val, StringFormat=P}"/>-->
    <DataGridTemplateColumn>
    <DataGridTemplateColumn.CellTemplate>
    <DataTemplate>
    <TextBlock Text="{Binding Val, StringFormat='\{0\}%'}"/>
    </DataTemplate>
    </DataGridTemplateColumn.CellTemplate>
    <DataGridTemplateColumn.CellEditingTemplate>
    <DataTemplate>
    <TextBox Text="{Binding Val}"/>
    </DataTemplate>
    </DataGridTemplateColumn.CellEditingTemplate>
    </DataGridTemplateColumn>
    </DataGrid.Columns>
    Note that the "number" source property must be an int, double, decimal etc. for the StringFormat to get applied.
    Please remember to close your threads by marking helpful posts as answer and then start a new thread if you have a new question.

Maybe you are looking for