Resizing that datagrid column in flex 2

[ghostofcain]

On double click...
Just get me started people. Experienced Flasher / newbie Flexer requires help!!! :(

[CDHBookingEdge]

We (or at least I) need a bit more info to go on, I feel. How are you wanting to resize it? Are you wanting to resize the whole datagrid itself or just the columns? And are you wanting to make the columns wider or the rows taller?
Can you be a bit more specific as to what you want to do? ;-)

Thanks,
Christopher

[ghostofcain]

I want to make the columns wider (to a specific value) by double-clicking the column header. :)

[madgett]

On double click...
Just get me started people. Experienced Flasher / newbie Flexer requires help!!! :(
This is actually fairly tricky. Start out with your MXML file, which points to our Flex Test Actionscript class that will be our program entry point.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" xmlns:content="content.*">
<content:Test />
</mx:Application>
Inside Test.as we will define our datagrid, set some properties and assign a custom headerRenderer on our datagrid columns.

The key here is that we need to create our own header renderer so that we can tell it to do something on MouseEvent.DOUBLE_CLICK. Because it extends InteractiveObject we are able to do this with no trouble. The tricky part is that we have to wrap our custom header renderer with a ClassFactory object. I'm neutral on Adobe's approach on this, but it's they way they want us to do it.

We can have the ClassFactory assign properties to our header renderer class, which will store the original test instance, and inside the double click handler we will call a method on the test instance that changes the width of the column that was double clicked. We also store the DataGridColumn instance on the header renderer.

Test.as:package content
{
import mx.core.Application;
import mx.controls.DataGrid;
import mx.collections.ArrayCollection;
import mx.controls.dataGridClasses.DataGridColumn;
import mx.core.ClassFactory;
import content.CustomHeaderRenderer;
public class Test
{
private var dg:DataGrid;
public function Test():void
{
dg = new DataGrid();
// populate the datagrid
var arrCollection:ArrayCollection = new ArrayCollection();
arrCollection.addItem({ID:0,Bird:"Canadian Goose",Tag:49581019});
arrCollection.addItem({ID:1,Bird:"Stork",Tag:23345684});
arrCollection.addItem({ID:2,Bird:"Convor",Tag:11568756});
arrCollection.addItem({ID:3,Bird:"Chicken",Tag:98531748});
dg.dataProvider = arrCollection;
dg.width = 300;
// turn these off, they interfere with the double click
dg.sortableColumns = false;
dg.draggableColumns = false;
for (var i:uint = 0; i<dg.columns.length; i++)
{
// grab the column instances
var dgCol:DataGridColumn = dg.columns[i];
// assign the new header renderer
var renderer:ClassFactory = new ClassFactory(CustomHeaderRenderer);
// set the properties, we want the renderer to store the current instance of Test.as (this)
// and also the column, for ease of referencing
renderer.properties = {handler:this, column:dgCol};
// assign our custom renderer
dgCol.headerRenderer = renderer;
}
Application.application.addChild(dg);
}
public function dg_RESIZE_HEADER(col:DataGridColumn):void
{
// resize code...can do whatever you want in here, this is what I have found to work efficiently
var w:Number = 0;
for (var i:uint=0; i<dg.columnCount; i++)
{
if (dg.columns[i] != col)
{
dg.columns[i].width = 20;
w += 20;
}
}
col.width = dg.width-w;
}
}
}
CustomHeaderRenderer.aspackage content
{
import mx.controls.dataGridClasses.DataGridItemRenderer;
import flash.events.MouseEvent;
import mx.controls.dataGridClasses.DataGridColumn;
public class CustomHeaderRenderer extends DataGridItemRenderer
{
public var handler:content.Test;
public var column:mx.controls.dataGridClasses.DataGridColumn;
public function CustomHeaderRenderer():void
{
super();
this.doubleClickEnabled = true;
this.addEventListener(MouseEvent.DOUBLE_CLICK, this_DOUBLE_CLICK);
}
private function this_DOUBLE_CLICK(e:MouseEvent):void
{
handler.dg_RESIZE_HEADER(column);
}
}
}

[vinitha]

Hi all,

Requirement is to display ellipses in the datagrid column when the text is large. I achieved this by setting width to the label control which is placed inside the itemRenderer. See the code below.

<mx:itemRenderer>
<mx:Component>
<mx:HBox horizontalScrollPolicy="off">
<mx:Label text="{data.Name}" toolTip="{data.Name}" width="180"/>
</mx:HBox>
</mx:Component>
</mx:itemRenderer>

But when i resize the column the text should be shown completely. How can i achieve this? Please do help me in solving this.

Thanks in advance.


This is actually fairly tricky. Start out with your

MXML file, which points to our Flex Test Actionscript class that will be our program entry point.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" xmlns:content="content.*">
<content:Test />
</mx:Application>
Inside Test.as we will define our datagrid, set some properties and assign a custom headerRenderer on our datagrid columns.

The key here is that we need to create our own header renderer so that we can tell it to do something on MouseEvent.DOUBLE_CLICK. Because it extends InteractiveObject we are able to do this with no trouble. The tricky part is that we have to wrap our custom header renderer with a ClassFactory object. I'm neutral on Adobe's approach on this, but it's they way they want us to do it.

We can have the ClassFactory assign properties to our header renderer class, which will store the original test instance, and inside the double click handler we will call a method on the test instance that changes the width of the column that was double clicked. We also store the DataGridColumn instance on the header renderer.

Test.as:package content
{
import mx.core.Application;
import mx.controls.DataGrid;
import mx.collections.ArrayCollection;
import mx.controls.dataGridClasses.DataGridColumn;
import mx.core.ClassFactory;
import content.CustomHeaderRenderer;
public class Test
{
private var dg:DataGrid;
public function Test():void
{
dg = new DataGrid();
// populate the datagrid
var arrCollection:ArrayCollection = new ArrayCollection();
arrCollection.addItem({ID:0,Bird:"Canadian Goose",Tag:49581019});
arrCollection.addItem({ID:1,Bird:"Stork",Tag:23345684});
arrCollection.addItem({ID:2,Bird:"Convor",Tag:11568756});
arrCollection.addItem({ID:3,Bird:"Chicken",Tag:98531748});
dg.dataProvider = arrCollection;
dg.width = 300;
// turn these off, they interfere with the double click
dg.sortableColumns = false;
dg.draggableColumns = false;
for (var i:uint = 0; i<dg.columns.length; i++)
{
// grab the column instances
var dgCol:DataGridColumn = dg.columns[i];
// assign the new header renderer
var renderer:ClassFactory = new ClassFactory(CustomHeaderRenderer);
// set the properties, we want the renderer to store the current instance of Test.as (this)
// and also the column, for ease of referencing
renderer.properties = {handler:this, column:dgCol};
// assign our custom renderer
dgCol.headerRenderer = renderer;
}
Application.application.addChild(dg);
}
public function dg_RESIZE_HEADER(col:DataGridColumn):void
{
// resize code...can do whatever you want in here, this is what I have found to work efficiently
var w:Number = 0;
for (var i:uint=0; i<dg.columnCount; i++)
{
if (dg.columns[i] != col)
{
dg.columns[i].width = 20;
w += 20;
}
}
col.width = dg.width-w;
}
}
}
CustomHeaderRenderer.aspackage content
{
import mx.controls.dataGridClasses.DataGridItemRenderer;
import flash.events.MouseEvent;
import mx.controls.dataGridClasses.DataGridColumn;
public class CustomHeaderRenderer extends DataGridItemRenderer
{
public var handler:content.Test;
public var column:mx.controls.dataGridClasses.DataGridColumn;
public function CustomHeaderRenderer():void
{
super();
this.doubleClickEnabled = true;
this.addEventListener(MouseEvent.DOUBLE_CLICK, this_DOUBLE_CLICK);
}
private function this_DOUBLE_CLICK(e:MouseEvent):void
{
handler.dg_RESIZE_HEADER(column);
}
}
}