Programmatic datagrid itemEditors in Flash Builder / Flex 4

June 3rd, 2010 by Slav

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..


there’s much simpler solution.You put your component definition in the  fx:declarations block like this :

<fx:Component id="inlineEditor">
<mx:TextArea />

and then in your code define itemEditor refering to the id attribute of fx:Component :

datagridCol.itemEditor = inlineEditor;

Simple, isn’t it.

Posted in AS3, flash, Flex, Flex 4

10 Responses

  1. Jeff

    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.

  2. Slav

    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.

  3. Tolis

    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);

  4. Slav

    Tolis, you are not telling us which component is extending your colorSizesFormRenderer?
    Mine is extending (or “based on”) s:MXDataGridItemRenderer and it works fine..

  5. Tolis

    Hmmm it seems I have to use the mx components as itemEditors…

  6. Tolis

    I used the s:NumericStepper and it didn’t work

  7. Nemi

    Guys, he is talking about itemEditor not itemRenderer.
    For me, his example works.

    For itemRenderer I use: new ClassFactory(MyRenderer);
    and it works.

  8. go !! attic fan

    Hello! I could have sworn I’ve been to this site before but after browsing through some of the post I realized it’s new to me.
    Anyhow, I’m definitely delighted I found it and I’ll be
    book-marking and checking back frequently!

  9. free online psychic reading chat

    Greetings! Very useful advice within this
    article! It’s the little changes that make the biggest changes. Many thanks for sharing!

  10. this page with more tips

    Students find it uneasy to manage time as they are liable on it
    and it promotes a lonely environment since they study alone
    with the computer. The attempt to juggle work, classes, family and
    clinical hours can be overwhelming and discouraging.
    The course is under the same curriculum as the campus courses, but you do not have the professor in the class explaining things to you.