Programmatic datagrid itemEditors in Flash Builder / Flex 4
While building a multilingual copy editor module for Flex 4 CMS system, I’ve encountered a following problem:
I have a editable datagrid with variable heights.The problem is, default itemEditor for a datagrid is an input textfield which is a single line , but I need a multiline editor such as text area.
Solution is simple of course, you just assign a editor=”mx.controls.TextArea” in the datagrid ‘s column definition.
That might work , if you are creating a columns in mxml.
I however create columns dynamically..It turns out you can’t assign TextArea to a columns editor directly:
dataGridCol.itemEditor = "mx.controls.TextArea"
will not work as the itemEditor must implement IFactory , which TextArea (or other similar components) do not!
So what can you do in this case ? Well, you could build a custom class component that does implement IFactory and give’s you a newInstance method that returns the component you need..
or..
there’s much simpler solution.You put your component definition in the fx:declarations block like this :
<fx:Declarations>
<fx:Component id="inlineEditor">
<mx:TextArea />
</fx:Component>
</fx:Declarations>
and then in your code define itemEditor refering to the id attribute of fx:Component :
datagridCol.itemEditor = inlineEditor;
Simple, isn’t it.
June 3rd, 2010 at 3:43 pm
Why don’t you just use a class factory in a simple one-liner?
dataGridCol.itemEditor = new ClassFactory(TextArea);
Entering a string value for the class name in MXML when statically defining your columns is only a shortcut to creating the factory.
June 3rd, 2010 at 4:49 pm
why ? Well , quite simply, because I didn’t know about the existence and usage of the ClassFactory class !
So thanks for pointing it out.. It really works!
(Strangely, none of the Flex books I consulted about this or online articles mentions this method?)
I guess my way of doing it is better when you want to create a more complex drop in editor, (not just a simple / single component) and keep it in the same MXML file as grid.
I imagine one could create a custom component in a new file and then refer to it’s class name in ClassFactory constructor as well.
June 6th, 2010 at 6:42 pm
I try to use the ClassFactory() but I get the following error
Type Coercion failed: cannot convert ColorSizesFormRenderer@2a42b479 to mx.controls.listClasses.IListItemRenderer.
This is the code I use:
var column:DataGridColumn = new DataGridColumn(dataField);
column.headerText = headerText;
column.width = 20;
column.editable = true;
column.itemEditor = new ClassFactory(ColorSizesFormRenderer);
June 6th, 2010 at 7:37 pm
Tolis, you are not telling us which component is extending your colorSizesFormRenderer?
Mine is extending (or “based on”) s:MXDataGridItemRenderer and it works fine..
June 6th, 2010 at 8:15 pm
Hmmm it seems I have to use the mx components as itemEditors…
June 6th, 2010 at 8:15 pm
I used the s:NumericStepper and it didn’t work