Home >
There are hardly any code example for how to use renderers for AdvancedDataGrid, and those that do exist are trivial. Apparently AdvancedDataGrid has issues, according to none other than the illustrious Doug McCune:
As a very general word of warning, I'd advise you to be more careful and expect more pain when working with the following classes (and all associated base classes, etc): AdvancedDataGrid, OLAPDataGrid, GroupingCollection.
I'll try to be extremely politically correct here, but I assume you'll catch my drift... These classes were written by a different part of the Flex team, in a different part of the world, and they are quite different than the standard Flex framework code base. They often don't follow the same coding standards, and in my opinion they are not up to the same quality level that I have come to expect from the Flex framework. I'll stop at that before I make too many Adobeans mad at me, but just know that I've learned to expect a whole new kind of pain when working with those classes.
My customer was not interested in excuses; he wanted me to produce working item and edit renderers for an AdvancedDataGrid, and soon. After some experimentation, I discovered an elegant solution that I would like to share with you, gentle reader.
One way that AdvancedDataGridColumn differs from DataGridColumn is that the default itemEditor will not activate if an itemRenderer is specified. The default values for the relevant AdvancedDataGridColumn properties do work, and I relied on that when figuring out how to make custom renderers work:
- dataField="data"
- rendererIsEditor="false"
- itemEditor="mx.controls.TextInput"
- itemRenderer="mx.controls.Label"
As you can see, the itemRenderer and editRenderer need not extend AdvancedDataGridItemRenderer; they may extend any UIComponent subclass.
In ActionScript, specify the AdvancedDataGridColumn renderers like this:
var column:AdvancedDataGridColumn = new AdvancedDataGridColumn();
column.dataField = "whatever";
column.headerText = "blah blah";
column.editable = true;
column.itemEditor = new ClassFactory(TextInput);
column.itemRenderer = new ClassFactory(CustomAdvancedDataGridItemRenderer);
The AdvancedDataGridColumn.rendererIsEditor property should only be set true when the same class is used for both types of renderers. As you can see, the default renderer classes are different from each other.
The secret to getting AdvancedDataGrid to behave when you want to spacify one of the renderers is to specify both of them. To illustrate this, I put together a short demo application that features an AdvancedDataGrid with two columns. The right-hand column uses the default itemEditor and itemRenderer classes (TextInput and Label). The left-hand column uses a custom AdvancedDataGridItemRenderer for the itemRenderer, and a TextInput for the itemEditor.
Going one step further, I wanted to change the default selection / edit mouse behavior. By default, when edit mode is enabled, DataGrid and AdvancedDataGrid both immediately enter edit mode with a single click. Instead, I wanted a single click to select a row, and a double-click to edit a cell. After providing a double-click event handler, I discovered that the double-click interval that Adobe provides was unusable. To solve this problem, I used flash.utils.Timer to implement my own double-click detection logic with only five lines of code. Because I did not use the default Flex double-click handler, I did not specify doubleClickEnabled="true".
Here is a demo web application that illustrates how this all works, with view source enabled. Check it out!
_______________________________
Mike Slinn
Independent full-service software contractor and author
http://slinnbooks.com
http://mslinn.com
Tag Cloud
Podcasts & Screencasts
@InsideRIA on Twitter
Follow InsideRIA on Twitter
Facebook Application Development
This article is very useful. On a relevant note, users can test custom renderers using an online flash builder called produle.com that provides a data table component (based off the advanced data grid) which supports item renderers, data grouping..., an example created with it http://tinyurl.com/cr98cu
Thanks for the article. Now I'll know what to do when presented with this case! One thing though, I believe that the sentence:
"The left-hand column uses a custom AdvancedDataGridItemRenderer for the itemEditor, and a TextInput for the itemEditor."
should read:
The left-hand column uses a custom AdvancedDataGridItemRenderer for the itemRenderer , and a TextInput for the itemEditor.
Thanks, Damian. I corrected the sentence.
This is a great article, but how would this apply to a headerrenderer? We are currently tackling a memory leak where we end up with hundreds of instances of our customer header by simply scrolling the grid left and right (using the Flex Profiler to see this) on a 32 column datagrid. We simply extended AdvancedDataGridHeaderRenderer to add our customizations. While debugging I noticed it never actually calls the newInstance method which we believe is used by the ClassFactory to create new instances. If you could perhaps give some guidance that would be great!
Thanks,
Dan
This is a great article, but how would this apply to a HeaderRenderer? We are currently tackling a memory leak where we end up with hundreds of instances of our custom header by simply scrolling the grid left and right (using the Flex Profiler to see this) on a 32 column datagrid. We simply extended AdvancedDataGridHeaderRenderer to add our customizations. While debugging I noticed it never actually calls the newInstance method which we believe is used by the ClassFactory to create new instances. If you could perhaps give some guidance that would be great!
Thanks,
Dan
Dan,
I'd have to look at your code to help. My contact info is here: http://www.mslinn.com/
Mike
Mark,
Actually turns out to be an Adobe bug. http://bugs.adobe.com/jira/browse/FLEXDMV-1968
I'm going to try and create a custom renderer from scratch without extending AdvancedDataGridHeaderRenderer.
Thanks,
Dan
Sorry, but i didn't see source on
http://www.mslinn.com/index.jsp?sites/flex/ADGEditTest/ADGEditTest.html
could you give some help?
Right-click on the application and select the "View Source" menu item. This is a common Flex feature.
hey, what if when editing you want to jump into the next cell with tab button, this solution prevents from that.
any workaround??
How well does these custom renderers work with Flex automation tools? I am not a Flex Developer, but an automation engineer trying to automate few clicks on a DataGrid that has custom renderes.
Our developers extended the class mx.controls.dataGridClasses.DataGridItemRenderer and added some simple customization. QTP (the automation tool with Flex addin supplied by Adobe), is really inconsistent in recognizing this object. It's supposed to recognize it as "FlexListLabel", but it's identifying it as "FlexLabel" and there by causing issues.
It worked fine once developers removed the customization. Any suggestions?
Thanks
Ram
Very informative article here, thankyou; it definitely helped me with the 2 AdvancedDataGrids I'm using in my app right now. And I had spent a day or so reading Doug's post (and the longer email trail that it is included in) when I was dealing with the AdvancedDataGridGroupItemRenderer and the AdvancedDataGridItemRenderer for other columns.
However, I'm having trouble performing my next task; that is when a row is collapsed, I want the row to collapse only halfway, not fully. When expanded, it displays a horizontal list of charts. On collapse, I want it to display the same row with half the height.
I was wondering, is this possible? Do I have to override displayItemsExpanded()? Can I use a dataProvider where some elements are groups and some are not?