nwebb

There may be reasons you want to create your DataGrid column(s) programmatically. If like me it’s something you only do now and again, it helps to have a little reminder of how to do certain things like applying a custom renderer, or ensuring that tabbing works correctly between your DataGrid’s child items.

The example code below should help with just that. It’s not a full explanation but should be enough to get you up and running quickly. See the notes for more detailed explanations of what some of the lines are doing.

Creating a Column
[as]
/**
* @return A ‘percent’ column for a DataGrid.
*/
private function createPercentColumn():DataGridColumn
{
var col:DataGridColumn = new DataGridColumn();
col.headerText = “Percent”;
col.setStyle(“textAlign”, “center”);
col.dataField = “percentage”; //See Note1.
col.editorDataField = “value”; //See Note2.
col.width = 100;
col.rendererIsEditor = true;
col.editable = true; //See Note3.
col.labelFunction = onValueFunc;

//See Note4.
var colItemRenderer:ClassFactory = new ClassFactory();
colItemRenderer.generator = ValueStepper;
colItemRenderer.properties = { totalToValidateAgainst:100, maximum:100,
investmentWeightingType:_dataPortfolio.investmentWeightingType };

col.itemRenderer = colItemRenderer;
return col;
}
[/as]

Note1: Specify the name of the property from your dataProvider that you want to display.

Note2: We are using a class called “ValueStepper” as the editor/renderer for our column. “ValueStepper” is a custom renderer I created which extends from NumericStepper (it is irrelevant what additional functionality ValueStepper has – all you need to know is that it is a type of NumericStepper) so we must use the NumericStepper.value property as the main property for our column. By default the DataGrid assumes columns use text and therefore will try to monitor a property called ‘text’ but because a NumericStepper doesn’t have a ‘text’ property we have to specify the property it should be using instead.

Note3: If you’ve set col.rendererIsEditor=true it may appear to make absolutely no difference whether you also set col.editable to true or false because you can input values regardless. However, setting col.editable=false will prevent your DataGrid from tabbing between the child items. You’re usually going to want to let your users tab through the input fields of each item in your DataGrid, so normally you will want to set this to true.

In order to allow tabbing of your DataGrid’s child items, it appears that you must also *explicitly* set dataGrid.editable=true on the DataGrid. Technically this means you don’t have to set the column’s editable properly UNLESS you do NOT wish to be editable (i.e. dataGrid.editable=false).

Note4: This is how you set a renderer for your column when creating the column programmatically. You need to create a ClassFactory and then set generator. You can pass properties in to your renderer as properties of an anonymous object (see “{}”). Finally you assign the ClassFactory instance to the col.itemRenderer property.

Calling The Column Method
Now we have a method to generate a column, here is a quick example of how you might call the above method:
[as]
dgColumns = new Array(); //dgColumns should be a bindable property
dgColumns.push(createPercentColumn());
[/as]

Instantiating Your DataGrid
Finally, here is an example of what your DataGrid MXML may look like. Note that I set the columns by binding to ‘dgColumns’. Also note that ‘editable’ is set to true, and I have disabled tabbing on the DataGrid instance, but allowed it for the children using ‘tabEnabled’ and ‘tabChildren’:
[as]
dataProvider="{_dataAssetSelection.dataCollection}" variableRowHeight="true" allowMultipleSelection="false" columns="{dgColumns}" tabChildren="true" tabEnabled="false" editable="true" />
[/as]