Posted by: edsyrett | 23 October 2010

Multi-type Item Editor


We’re all familiar with the way renderers and editors work in grids ok? You set a renderer and/or editor for a column and it all just works.

But what happens if you need to change the way an editor works based on the content of a line?

That’s the requirement I had recently. I have lines in a grid where I want the column to show a list of possible values, and some lines where that column shouldn’t be edited at all. This all has to work with the limitation that a DataGridColumn will only allow you to have one item editor.

So I had to create an item editor that changes it’s functionality based on the data it gets.  It’s actually not that difficult – it’s just a canvas with two child controls – a TextInput and and a ComboBox.

I had to solve the problem of how to get the items into the ComboBox.  My solution was simply to add it to the data for the grid:

private var gridData:XML = <rows> <row type="TEXT" value="This is text"/> <row type="LIST" value="Item Two"> <listdata> <item id="1" label="Item One"/> <item id="2" label="Item Two"/> <item id="3" label="Item Three"/> </listdata> </row> <row type="NONE" value="This cannot be edited."/> </rows>

My test app simply looks for specific elements in the XML to populate the combo, but you could enhance this by telling the renderer which elements to look for etc. This would actually become a necessity if you needed more than one multi-type editor on a grid line.

Also I have added a custom ComboItemEditor component that uses a minimal skin – using a standard combo here just looked ugly due to the border with rounded corners.

Lastly, you’ll see that the last item in the list has a type of “NONE”, which should prevent any editing at all in cells using the multi-type item editor. For my test app, I have just added a handler for the itemEditBegin event that checks the data for that line and prevents editing.

private function onItemEditBegin(event:DataGridEvent):void { if (event.itemRenderer.data.@type == "NONE") event.preventDefault(); }

Right now, this will prevent any editing on the line, but if you only need to prevent editing on columns where you’re using the multi-type editor, you will need to check which column is being edited.

Click on the screenshot above to check out my test app. The usual caveats apply.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Categories

%d bloggers like this: