Flex, Datagrids, rows & how to expand a row

[kronus]

Hi Everyone,

It's been a long time and I'm always appreciative of your help.

I'm working on a Datagrid at the component level in Flex.

I know that I can expand a row within the Datagrid by clicking on a row:

        private function onItemClick(e : ListEvent) : void
        {
            // setting these xml properties will automatically update the itemRenderers on the fly
 
            // expand the item clicked on
            var selData : AssetInfo = e.itemRenderer.data as AssetInfo;
            if (selData.expanded != true)
                selData.expanded = true;
               }
 

But when I try to accomplish the same thing with a mouse rollover, then I can no longer access ListEvent. Probably because rollOver has to deal with MouseEvent.

Nevertheless, I am able to see what the mouse is rolling over by way of trace:

I use the datagrid's property of rollOver="onCreationComplete()" to call the addEventListener
 
        private function onCreationComplete():void
        {
            //register for the mouse_over enter event
            var myListener = addEventListener(MouseEvent.MOUSE_OVER, onMouseOver);        
        }
 
        private function onMouseOver(myListener):void
        {
            trace(myListener);
        }
 
 

The question is, what can I do with the information being shown by the trace to expand one of the rows, as I do when I click on one of the rows.

Here's what is returned in the trace

[MouseEvent type="mouseOver" bubbles=true cancelable=false eventPhase=3 localX=12 localY=91 stageX=999 stageY=270 relatedObject=MyAppAir0.$MyApp.Shell114.HDividedBox115.$browser.$am.$tabnav.Canvas371.$assetList.ListBaseContentHolder376.DataGridItemRenderer1733 ctrlKey=false altKey=false shiftKey=false buttonDown=false delta=0 commandKey=false controlKey=false clickCount=0]
 
 

Thanx n advance

[kronus]

I figured it out.

It was an epic “programming” journey over the weekend for me to figure out how to do the rollover on the items within the datagrid.

First, I found out that this lib(flexlib:VAccordion) cannot be used with Flex Builder 2, which is what I have at home. Then I found out that Flex Builder 3 can only run with Java 1.5, which is the version of Java that is allowed to install on 10.5 OS, which I am running 10.4. After that, I found out that the flexlib:VAccordion from the open source google code could not be implemented at the component level, which had me starting over from scratch. So, after battling with myself on how long it would take for me to get fired, I had to figure out that I had to use a listEvent, rather than a MouseEvent.

This morning, I discovered in an adobe tech manual, that itemRollOver, as opposed to RollOver, uses the ListEvent and not the MouseEvent. From there I was able to determine the rowIndex and the rest is datagrid history.

first, use the itemRollOver within the datagrid header
<mx:DataGrid xmlns:mx="http://www.adobe.com/2006/mxml" 
    width="100%" height="100%" 
    verticalScrollPolicy="on"
    paddingBottom="0" paddingLeft="0" paddingRight="0" paddingTop="0"
    itemClick="onItemClick(event)"
    variableRowHeight="true"
    borderThickness="0"
    showHeaders="false"
    verticalGridLines="false" 
    selectionColor="#EEEEEE"
    rollOverColor="#D3D8DE"
    textRollOverColor="#FFFFFF"
    textSelectedColor="#000000"
    color="#FFFFFF" 
    styleName="listView"
    itemRollOver="onMouseOver(event)"
>
 
Then use this function to expand each row that the mouse rolls over:
 
import mx.events.DataGridEvent;
 
private function onMouseOver(event:ListEvent):void
{
    var myRow = event.rowIndex;
    var data2 : ArrayCollection = this.dataProvider as ArrayCollection;
 
        for(var i:int = 0; i < data2.length; i++)
        {
            var dat2 : AssetInfo = data2[i] as AssetInfo;
 
            if (dat2 != data2[myRow] && dat2.expanded != false)
                dat2.expanded = false;
        }
        data2[myRow].expanded = true;
        //trace(myRow);
}
 

And that's all there is to it :-)

[kronus]

Left something out that is pretty important to making this work:

expand is a state:

    <mx:states>
        <mx:State name="expanded">
            <!-- <mx:SetProperty name="height" value="196"/> -->
            <mx:AddChild position="lastChild">
 
                <mx:Canvas x="10" y="33" width="100%" height="100%" backgroundColor="#000000" id="$thumb" click="showPreview();" />
 
            </mx:AddChild>
        </mx:State>
    </mx:states>
 

Also, this comes from an itemrenderer in the first column of the datagrid.

<mx:DataGridColumn id="assetDGC" itemRenderer="FirstColumn" headerText="Name" width="575" minWidth="160" sortable="true" sortCompareFunction="sortByName" />
 

[vinayrajp]

Kronus,
Is AssetInfo a separate class that has a member variable named expanded? How does the switching of the state occur? What does the itemrenderer for the datagrid column look like? Just a few questions after seeing this thread. Thanks for your reply in advance.

Thanks.