DataGrid column X Position

65 views
Skip to first unread message

HowardC11

unread,
Mar 1, 2008, 12:22:44 AM3/1/08
to Flex India Community
Ok, I've been on this for awhile, perhaps someone can help.

I have a datagrid with 10 columns, I want a marker above the last 4
columns categorizing it. On initial load, I need to find the x
position of the left edge of columnIndex 6. When I resize the stage
or the datagrid, I need to have the DataGrid event give me that x
position.

Anyone have any experience with this?

Thanks,
Howard

Aasim

unread,
Mar 1, 2008, 8:48:51 AM3/1/08
to Flex India Community
Hi Howard,

I have put together a small example.
I have extended the datagrid component, you need to specify which
column edge needs to be watched for the x position.

Hope this helps..

Here is the code...

the mxml file.........

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute" xmlns:classes="classes.*">
<mx:Script>
<![CDATA[
import mx.controls.Alert;
import mx.events.ResizeEvent;

]]>
</mx:Script>
<classes:CustomDataGrid id="dgCustom" watchColumnEdge="5" x="0" y="0"
>
<classes:columns>
<mx:DataGridColumn headerText="1" width="60"/>
<mx:DataGridColumn headerText="2"/>
<mx:DataGridColumn headerText="3"/>
<mx:DataGridColumn headerText="4"/>
<mx:DataGridColumn headerText="5"/>
<mx:DataGridColumn headerText="6"/>
<mx:DataGridColumn headerText="7"/>
<mx:DataGridColumn headerText="8"/>
<mx:DataGridColumn headerText="9"/>
<mx:DataGridColumn headerText="10"/>
</classes:columns>
</classes:CustomDataGrid>
</mx:Application>

and the .as file...

package classes
{
import mx.controls.DataGrid;
import mx.controls.Alert;

public class CustomDataGrid extends DataGrid
{
//stores the x position of the edge
private var _edge:Number;

//specifies which column left edge is to be watched
private var _watchColumnEdge:Number;

public function get watchColumnEdge():Number{
return _watchColumnEdge;
}

public function set watchColumnEdge(n:Number):void{
_watchColumnEdge=n;
}

public function get edge():Number{
return _edge;
}

public function set edge(n:Number):void{
_edge=n;
}

public function CustomDataGrid():void{
super();
}

//this function will loop and check for the edge being repositioned
public function getEdge():void{
edge=0;
for(var i:int=0;i<columns.length;i++){
if(i==watchColumnEdge){
break;
}
edge+=columns[i].width;
}
//put in your event dispatch here if needed.
Alert.show(edge.toString());
}

override protected function updateDisplayList(unscaledWidth:Number,
unscaledHeight:Number):void{
super.updateDisplayList(unscaledWidth,unscaledHeight);
getEdge();
}

}
}



Regards,
Aasim

HowardC11

unread,
Mar 3, 2008, 8:37:15 PM3/3/08
to Flex India Community
Thanks alot. Made it look very easy.
> > Howard- Hide quoted text -
>
> - Show quoted text -

HowardC11

unread,
Mar 5, 2008, 12:22:49 PM3/5/08
to Flex India Community
The code works great, now another question... I used the same code for
the resize event on the container so when the stage is resized, the
same position can be located. However, it isn't working all the time.
> > - Show quoted text -- Hide quoted text -
Reply all
Reply to author
Forward
0 new messages