AutoSizingAdvancedDataGrid that fixes the variableRowHeight issues with mx.controls.AdvancedDataGrid May 9, 2008
Posted by khurram in Adobe, Flex, workday.Tags: AdvancedDataGrid, AutoSizingAdvancedDataGrid, variableRowHeight
trackback
When variableRowHeight is set to true on AdvancedDataGrid,
(a) mx.controls.AdvancedDataGrid ignores attributes such as rowCount.
(b) there is no way to figure out the height of the AdvancedDataGrid instance because we don’t know how much height we will need to show the rows of data in our dataProvider. We can set the height to maxHeight but what of the sum of heights of all rows in our grid is less than the maxHeight, we need our grid to adjust itself to the shorter height but the AdvancedDataGrid does not.
(c) When opening/closing trees in hierarchical data inside the grid, we need the grid to automatically adjust its height. AdvancedDataGrid does not do that when variableRowHeight == true
The AutoSizingAdvancedDataGrid fixes this issues. It does this by dynamically increasing the height of the array until (a) all the rows in the dataProvider have been displayed or (b) maxHeight has been reached.
Click the image or here to see the example app. You can right-click and view source as well.
User Interface at Workday Inc. 
This is just what I wanted. Thanks a lot for posting it. I had nested advanced datagrids as in master detail relationship and had the variableRowHeight issue.
[…] miserably, I extended the List component. As I was doing this, I found another post about an AutoSizingAdvancedDataGrid by the guys at WorkDay in which they had the same issue with the AdvancedDataGrid. Since the […]
thanks for such a wonderful stuff.. I was working around to fix the variableRowheight for a long time.
Thanks a million, great work, i was looking for this, you really helped me a lot.
I think the DataGrid and the AdvancedDataGrid needs a lot of enhancements, they are missing really basic functionality that should be available without the need to customize them, specially the AdvancedDataGrid , because we pay a lot of money to get it as part of Flex Data Visualization Components
This doesn’t work if you use custom item renderers in your rows
[…] row height item renderers. The closest I came to finding such a work was a blog post citing some work done by the people at Workday on the AdvancedDataGrid class. The author of the first post mentioned […]
Thanks a lot! it works perfect! AdvancedDataGrid is enough poor..
I have need of this, but the version provided is not behaving the way I need it to. Is there a way to make the new grid expand to the full height of its sub-components, including setting the .height property of the grid in question when its done? The way it is now it still shows scrollbars. I need an accurate height so I can re-size the application itself. any scroll bars need to be in the HTML browser itself.
my setup:
1.) panel surrounding ADG
2.) ADG which has hierarchal data. column 1 is just text, column 2 is a custom renderer which has 2 columns, both of which use another custom renderer. all custom renderers are ADG’s themselves.
3.) when user clicks on column 1 text, it should open up column 2 (which physically sits below it and spans the same length as the text) and re-size the entire grid to fit. It does this but then adds scrollbars.
Derek, you can get rid of the logic that checks for maxHeight inside the measureHeight method. Or you can specify a maxHeight that is a very large number. Also if you never want to see scrollbars on your grid, set horizontalScrollPolicy and verticalScrollPolicy to false. Lemme know how ti goes.
Nikos, the code should work for you for custom itemRenderers too. I have used it with custom renderers and that was a primary requirement for this piece of code anyway. Could you please be more specific about the issue you are seeing?
khurram, I definitely tried all those solutions. The problem is that when the the user triggers AdvancedDataGridEvent.ITEM_OPEN, my app is not resizing correctly. I’m using this function to re-size my app (‘this’ refers to the Application object, xml_data is a heirarchal data structure):
private function changeAppHeight(a:AdvancedDataGridEvent):void {
if (a.type == AdvancedDataGridEvent.ITEM_OPEN) { // Item is opening
terminates_report_panel_g.height = terminates_report_panel_g.measureHeightOfItems(-1, xml_data.length) + terminates_report_panel_g.headerHeight;
}
else { // Item is closing
terminates_report_panel_g.height = terminates_report_panel_g.measureHeightOfItems(-1, xml_data.length) + terminates_report_panel_g.headerHeight;
}
this.height = terminates_report_panel_g.height + app_panel.borderMetrics.top + app_panel.borderMetrics.bottom;
if (ExternalInterface.available) {
try {
ExternalInterface.call(“EC.Project_Reports.setReportHeight”, this.height);
}catch (error:SecurityError) {
//output.appendText(“A SecurityError occurred: ” + error.message + “\n”);
}catch (error:Error) {
//output.appendText(“An Error occurred: ” + error.message + “\n”);
}
}
}
Sorry, to expand on how it’s not correctly resizing, it’s cutting off the bottom of the grid, as if it can’t be bothered to render anything above the number of itemRenderers originally visible or something
I found a suitable solution where I didn’t even need to use this class. ‘terminates_report_panel_g’ and ‘quota_report_panel_g’ are ADGs stored in local MXML files.
1.) set your data
2.) set a local variable this.total_rows = YOUR_DATA.length;// this gets the amount of rows at depth 1
For HierarchalData, do the following:
3.) Set an event handler for your event with code similar to this:
var new_height:Number;
if (a.itemRenderer != null) {
if (a.type == AdvancedDataGridEvent.ITEM_OPEN) { // Item is opening
this.total_rows++;
}
else { // Item is closing
this.total_rows–;
}
}
terminates_report_panel_g.rowCount = this.total_rows;
new_height = terminates_report_panel_g.measureHeightOfItems(0, terminates_report_panel_g.rowCount);
new_height += terminates_report_panel_g.headerHeight;
// Finalize the heights
terminates_report_panel_g.height = new_height;
this.height = new_height + app_panel.borderMetrics.top + app_panel.borderMetrics.bottom;
FOR SIMPLE ARRAYCOLLECTION DATA, do the following:
3.) Set an event handler for your event with code similar to this:
var new_height:Number;
if (a.itemRenderer != null) {
var item:IListItemRenderer = a.itemRenderer;
if (a.type == AdvancedDataGridEvent.ITEM_OPEN) { // Item is opening
this.total_rows += item.data.children.length;
}
else { // Item is closing
this.total_rows -= item.data.children.length;
}
}
quota_report_panel_g.rowCount = this.total_rows;
// Show all groupLabels by default, plus all the rows under each open group
var num_visible_rows:int = quota_report_panel_g.gc.grouping.fields.length + quota_report_panel_g.rowCount;
new_height = quota_report_panel_g.measureHeightOfItems(0, num_visible_rows);
new_height += quota_report_panel_g.headerHeight;
if (quota_report_panel_g.gc.summaries != null) {
new_height += quota_report_panel_g.rowHeight;
}
// Finalize the heights
quota_report_panel_g.height = new_height;
this.height = new_height + app_panel.borderMetrics.top + app_panel.borderMetrics.bottom;
@13. Derek – January 22, 2009
Hi derek.. could you please give us a working example of your code hint
Many thanks
Hello, can’t find the definition of DEFAULT_MAX_HEIGHT.
Me again. I’ve implemented this solution and it definitely works, however for large result sets I’m losing the default styling on the ADG. i.e. No alternating row colors, no skins on the headers, etc. Any suggestions?
Great solution…. i converted the code to work on Lists objects as well!!! thank you for the post!
This is a very useful extension to the AdvancedDataGrid. However, I’ve noticed that the rendering performance deteriorates significantly when using large volumes of Data within a grid with custom renderers. e.g. 500 rows in one of the nested levels. Has anyone else experienced something like this? Have you managed to overcome it/suggestions on how to improve performance?
I am also running into the same issue with performance – it looks measureHeight gets callled multiple times when expanding/collapsing.. Is there a way to prevent this?
I made slight modifications that have resulted in better performance atleast for my scenario: just in case someone finds it helpful….
Add below code :
private var calculatedHeight:int=0;
private var calculatedListContentHeight:int=0;
private var calculatedHeightChanged:Boolean=false;
override protected function commitProperties():void{
super.commitProperties();
if(calculatedHeightChanged){
verticalScrollPosition=0;
calculatedHeightChanged=false;
height=calculatedHeight;
listContent.height=calculatedListContentHeight;
if ( height >= maxHeight ) {
this.verticalScrollPolicy = “auto”;
}
else this.verticalScrollPolicy = “off”;
}
}
Change measure height to:
protected function measureHeight():void
{
var buffer:int = ((this.horizontalScrollBar!=null)?this.horizontalScrollBar.height:0);
var maxContentHeight:int = maxHeight – (headerHeight + buffer);
var listContentHeight:int = this.headerHeight + buffer + getMeasuredHeight(maxContentHeight);
var hh:int = listContentHeight + 2;
if ( hh == this.height ) return;
calculatedListContentHeight = listContentHeight;
calculatedHeight = hh;
calculatedHeightChanged=true;
invalidateProperties();
}
Hi,
I am using this code and this is my problem. The height of the grid gets calculated perfectly fine, but the number of rows in the data grid is coming extra. Extra rows are being appended in the end, because of which data in some of the earlier rows is not being displayed entirely.
Any help would be great. Thanks.
Hi,
Thanks a ton 🙂 ..I am exectly looking for it because i am using nested grid(master grid and children grid concept). but there is a problem. when i expand childen grid of first row. horizontal and verticle lines of master grid are not overlapped by children grid on last low of children grid. It means lines are still visible onto children grid. It continue with 2nd row but after expanding 2-3 rows it disappeared.
Please let me know how i could handle it?
if you send your email id then i can send you the snapshot?
Thanks
Devsachin
Sachindevtripathi@gmail.com
3rd point is not working with me?
(c) When opening/closing trees in hierarchical data inside the grid, we need the grid to automatically adjust its height. AdvancedDataGrid does not do that when variableRowHeight == true
Thanks a lot. variableRowHeight = true solved the problem.
In case of custom ADG itemrenderer we can override measure() operation of itemrenderer and change measuredHeight . And dont forget to set variableRowHeight = true property on AdvancedDataGrid mx tag.
As mentioned below, I tried using the AutoSizingAdvancedDataGrid with vertical scroll bar turned off but there are certain issues which I am facing :
1) There is a flickering occurring(showing vertical scroll bar) while rendering of the grid.
2) In case I am explicitly setting the headerHeight, the grid is not resized properly(showing less number of rows).
I debugged the code as well but not able to resolve these issues.
Please help