Datagrid column focus

Hi,
I got the column focus after create a row in my datagrid, now
I want to
create a general function for all my datagrids but I got an
error
Implicit coercion of a value of type void to an unrelated
type Function.
Looks like I can't pass my datagrid value in the function
Tks
JFB
Here is my code
callLater(focusNewRow(myDataGrid)); --> here is the error
public function focusNewRow(tempDataGrid:DataGrid):void{
tempDataGrid.editedItemPosition = {
columnIndex:0,rowIndex:tempDataGrid.dataProvider.length-1

That fixed the problem...
Thank you Robert.
Rgds
JFB
"Robert Hirst" <[email protected]> wrote in
message
news:f858na$4im$[email protected]..
> callLater takes two parameters, the first is the name
(e.g. no
> parentheses) of
> the function, and the second is an array of parameters.
If you have the
> brackets, then Flex will assume you want the function to
be evaluated and
> so
> you are passing "void" into the callLater method.
>
> I believe what you want to do looks more like this:
>
> callLater(focusNewRow,[myDataGrid]);
>
>

Similar Messages

  • DataGrid Column Focus Out Event

    I have an editable datagrid and I'm trying to accomplish the
    following:
    When a user edits a cell, then focuses out, a function is
    called that sends off a service with that value, along with the id
    value in that same item. I've tried using itemFocusOut, but I'm
    getting bizzare results---the function is executing multiple times.
    So i need the function to know what cell was focused out, and also
    all of the other information that accompanies that item.
    Thanks for any help.

    Here's what I ended up doing.
    Somewhere after Load, I added:
    PropertyDescriptor pd = DependencyPropertyDescriptor.FromProperty(DataGridColumn.ActualWidthProperty, typeof(DataGridColumn));
    foreach (DataGridColumn column in Columns) {
    //Add a listener for this column's width
    pd.AddValueChanged(column, new EventHandler(ColumnWidthPropertyChanged));
    Then the following 2 methods:
    private bool _columnWidthChanging;
    private void ColumnWidthPropertyChanged(object sender, EventArgs e)
    // listen for when the mouse is released
    _columnWidthChanging = true;
    if (sender != null)
    Mouse.AddPreviewMouseUpHandler(this, BaseDataGrid_MouseLeftButtonUp);
    void BaseDataGrid_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
    if (_columnWidthChanging) {
    _columnWidthChanging = false;
    /// whatever you wanted to do here
    The ColumnWidthPropertyChanged fires constantly while the user drags the width around, so if you just listen to that, you'll be over-doing it.
    Adding the PreviewMouseUp handler let me only do my processing when the user is done changing the width.
    Hope this helps someone.
    Janene

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

  • 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

  • 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

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

  • Flex 3: DataGrid Column width on resize

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

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

  • 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

  • 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 in module causing memory leak

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

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

  • Datagrid column that contains checkbox erroring

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

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

  • Datagrid column 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

Maybe you are looking for