Flex(DataGrid), How to change the visible state of certain cell while mouse over the row

Question

I have three columns and the default visible state of last column is false.My problem is how can I change the visible state of the certain cell while the mouse over any part of the row.

English is not my native language,so if I didn't make my question clearly enough ,Please keep read.

------------------------------------------------
|  column1  | column2   | column3 (invisible)  | row1
|  column1  | column2   | column3 (invisible)  | row2
------------------------------------------------

how can I show the cell(row1,column3) while the mouse over any column of row1.

Answer 1

You can easily toggle the visibility of the whole column when rolling over items in column1 that way:

<mx:DataGrid dataProvider="{[{c1:'a1', c2:'b1', c3:'c1'}]}">
    <mx:columns>
        <mx:DataGridColumn headerText="Column 1" dataField="c1">
            <mx:itemRenderer>
                <mx:Component>
                    <mx:Label text="{listData.label}"
                        rollOver="DataGrid(owner).columns[2].visible = true"
                        rollOut="DataGrid(owner).columns[2].visible = false"
                    >
                        <mx:Script>
                            <![CDATA[
                                import mx.controls.DataGrid;
                            ]]>
                        </mx:Script>
                    </mx:Label>
                </mx:Component>
            </mx:itemRenderer>
        </mx:DataGridColumn>
        <mx:DataGridColumn headerText="Column 2" dataField="c2" />
        <mx:DataGridColumn headerText="Column 3" dataField="c3" visible="false" />
</mx:DataGrid>

Of course, you'd better create new class instead of inline item renderer.

Showing the only renderer in the 3rd column is very tricky, because if the whole column is invisible, then no renderers for that column is created.

I think it's better to use tooltip-like solution, like this:

<mx:Script>
<![CDATA[
     import test.CellRenderer;
]]>
</mx:Script>
<mx:UIComponent id="textFlowContainer" width="100%" height="100%" />
<mx:DataGrid dataProvider="{[{c1:'a1', c2:'b1', c3:'c1'}]}">
    <mx:columns>
        <mx:DataGridColumn headerText="Column 1" dataField="c1" itemRenderer="{new ClassFactory(CellRenderer)}" />
        <mx:DataGridColumn headerText="Column 2" dataField="c2" itemRenderer="{new ClassFactory(CellRenderer)}" />
    </mx:columns>
</mx:DataGrid>

Where test.CellRenderer is:

<?xml version="1.0" encoding="utf-8"?>
<mx:Label xmlns:mx="http://www.adobe.com/2006/mxml" text="{listData.label}"
         rollOver="rollOverHandler()" rollOut="rollOutHandler(event)">
<mx:Script>
    <![CDATA[
        import mx.managers.PopUpManagerChildList;
        import mx.managers.PopUpManager;
        import mx.controls.Label;
        import mx.controls.DataGrid;

        private var popupLabel:Label;

        private function rollOverHandler ():void
        {
            popupLabel = new Label();
            popupLabel.addEventListener(MouseEvent.ROLL_OUT, rollOutHandler);
            popupLabel.text = data.c3;
            PopUpManager.addPopUp(popupLabel, this, false, PopUpManagerChildList.PARENT);
            var p1:Point = new Point(0, this.y);
            p1 = localToGlobal(p1);
            var p2:Point = new Point(listData.owner.x+listData.owner.width, 0);
            p2 = listData.owner.parent.localToGlobal(p2);
            popupLabel.move(p2.x, p1.y);
        }

        private function rollOutHandler (event:MouseEvent):void
        {
            if (popupLabel && !popupLabel.hitTestPoint(event.stageX, event.stageY))
            {
                PopUpManager.removePopUp(popupLabel);
                popupLabel = null;
            }
        }
    ]]>
</mx:Script>
</mx:Label>