Auto Resizable AdvancedDataGrid
Posted by: Sameer on: August 6, 2007
- In: Actionscript | Flex
- Comment!
I like the auto-re sizable functionality of the columns in most of the grids.
Common applications include Windows Explorer and File Browser in Ubuntu.
So, I decided to write my own in AdvancedDataGrid.
Here, double-clicking the separator between the headers will resize the corresponding column to fit in the contents.
Check out the sample here
Try clicking the header separator between ‘Subject’ and ‘Date’ column. This will resize the ‘Subject’ column to adjust to the
data it is showing.
Source code here -
Application .mxml file
Resizable ADG .as file
35 Responses to "Auto Resizable AdvancedDataGrid"
March 29, 2008 at 3:48 am
It’s nice but not usable 
it’s hard to click on the separator and nobody know the functionality.
But I’m sure there is a usable solution with your nice code!
Whe must think about it.
March 30, 2008 at 11:49 am
You can try making the separators a bit more thicker.
People know that this functionality exists in many grids like Windows Explorer and File Browser in Ubuntu. So, they can expect a similar functionality in AdvancedDataGrid also 
November 27, 2008 at 8:15 pm
Hi very nice functionality…
really cool…
i’ve few questions for you..
first of all
is it possible to hide a single columns header from a data grid?
Second is it possible to insert horizontal rows between data groups?
for example
data1 data2 data3
3 4 5
….blank row…….
5 6 7
….blank row…….
Thanks in advance
Lorenzo
November 27, 2008 at 9:03 pm
Do you want to hide only the column header or the entire column?
For hiding the entire column, set visible=false on the column.
Hiding only the column header will be tricky as there will be something as the header. So, you can create your own header renderer and display nothing in it and set sortable=false.
For inserting horizontal rows, you need to add dummy rows in the dataProvider.
November 27, 2008 at 9:34 pm
Thanks for the reply..
no i want to to hide a single column header..
how to create my own header render?
to hyde the column header i set the headerTextField to empty string but the header always displays…
What is a dummy row?
a row without elements inside?
thanks a lot
November 28, 2008 at 12:12 pm
Can you explain what you exactly mean by hiding the column header. If the column header is not present, what do you expect to see at that place.
Also, the header will be present but you can make it such that it looks like there is no header and you can turn off sorting.
Yes, dummy row is just an empty Object – {}.
You can add it using the IList.addItemAt() method if your dataProvider implements IList (like ArrayCollection).
December 3, 2008 at 7:10 pm
Hy Sameer,
for example if i have a column like this
Text header
data1
data2
data3
…
i would hide name “Text header” and the field that contain it.
others question:
i have mycustomdatagrid class that extends
advanceddatagrid…
my class has various data rows..i would display the grid without a
scrollbar..so i would set the grid height equal to the number of rows
in the grid dinamically…
for example if the my grid contains 7 rows i would have a grid that has no scrollbar and displays all items at the creation…
second, in my datagrid class that extends advanceddatagrid i would have a fixed order of columns…
second my datagrid has dataprovider propertiy sets to an array of object..
for example
….
i create the equivalent array whit these object elements from as3..
when datagrid dipslays columns are not in this order: monday and tuesday..but first tuedsay and after monday…
how can i create a fixed order in my datagrid class?
thanks a lot and sorry for the english!i hope that you understand my problem…
Bye bye Lorenzo
December 3, 2008 at 7:14 pm
i missed the second example!!!
mydatagrid extends AdvancedDataGrid
public function mydatagrid(arrayCollection){
this.dataprovider=arraCollection
}
where array collection is an objects array…
var obj:Object = {monday=”value”, tuesday=”value”}
tahnks again
December 3, 2008 at 8:38 pm
I think a dummy headerRenderer should do the trick for you.
For displaying the grid without any scroll bar set the verticalScrollPolicy/ horizontalScrollPolicy to off. You can set the rowCount property of the Grid to display the number of rows you want. Set the rowCount to dataProvider.length.
For column ordering, you have to create columns in that order.
You can do that in MXML or ActionScript.
December 3, 2008 at 8:43 pm
thanks
how to create column in as3? can you send me a little example…i would create columns order from actionscript by retrieve headerfield by objects within the array…
monday tuesday …
thank you very much!!!
December 4, 2008 at 9:54 am
Here you go –
var col1:AdvancedDataGridColumn =
new AdvancedDataGridColumn();
col1.dataField = "monday";
col1.headerText = "Monday";
var col2:AdvancedDataGridColumn =
new AdvancedDataGridColumn();
col2.dataField = "tuesday";
col2.headerText = "Tuesday";
.....
adg.columns = [col1, col2.....];
December 9, 2008 at 7:25 pm
Hi Sameer,
thanks for the reply…
can you ask you the last question…
in your example “Auto Resizable AdvancedDataGrid” you resize columns at double click event…is it possible to modify it to create an advanceddatgrid where all the columns are perfectly resized (at datagrid creation)?How can i do this?
and is there a mechanism to retrieve single cell’s content?
thanks in advance
Regards
Lorenzo
December 9, 2008 at 11:03 pm
Yes, you can do that. After setting the dataProvider go through all the columns and calculate their widths. Add all the widths and set the Grid’s width to the final value.
The sample that I’ve provided calculate the width of just one column. You can use that code to calculate the width of all the columns.
March 30, 2009 at 10:25 am
Hi,
Great components. I have noticed that after double click flex throws a null pointer exception when column width becomes wide enough to go out of the bounds of ADG. Any ideas how to solve it?
March 30, 2009 at 9:16 pm
Can you give the steps to reproduce the exception? Use the sample posted here or please post your sample.
Also, you can check for the width of the grid while setting the column’s width in columnResizeDoubleClickHandler() in AutoResizableADG.as and avoid setting a width greater than the width of the grid.
April 21, 2009 at 12:53 pm
Hi Sameer
i have a problem regarding width of AdvancedDataGrid. i am creating column on runtime and also assign data to it at runtime.i am also resizing column depends on its data width. i am changing the data of AdvancedDataGrid depends on some criteria i.e. workorderNo,DateTill etc. so after reassigning of data to the AdvancedDataGrid, au-resize is called again but the width of DataGrid is chnged.This is my problem. Width of AdvancedDataGrid is automatically increasing, i think it causes by auto-size of columns or may be default behavior of the AdvancedDataGrid.
i also have tried to hard-code the width of GRID to 1200 in auto-size function but it is ignored.
Please let me know about the solution
Thx in advance
April 21, 2009 at 1:40 pm
Actually i need Horizontal scrollbar in the DataGrid but it appears in Application after re-assign of data to the Datagrid.So, this is my requirment..
April 26, 2009 at 3:46 pm
Horizontal scroll bar will come automatically when needed and if the horizontaolScrollPolicy is auto (by default) or on.
If you set the grid width to 1200 then the scroll bar will appear on the Application and the grid (if there are more columns than what can be accommodate within 1200 width).
April 27, 2009 at 5:41 pm
Hi Sameer,
Problem is solved..actually it was my mistake..i am setting GRID width to its .measuresWidthOfItem on single time(initialization)..but at that time it was excuting on each data assignment..so that was my mistake only.
Thanks for your response.
one another question is that-Can we add buttons after HscrollBar and border of GRID..Actually i want to make a GRID component with inbuilt button.i have add a button on createChildren but it is display out of the grid.
Please give me suggestion.
May 15, 2009 at 3:07 am
You have amazing examples !!
One question: what is the listItems property of the datagrid, I can’t find documentation and you use it in your resizing algorithm.
Thanks!
Mike Hemelberg
May 15, 2009 at 10:23 am
listItem is an Array of Arrays that contains the itemRenderer instances that render each data provider item. This is a two-dimensional row major array (array of rows that are arrays of columns).
So, if the grid is like – columns – name, company. And one row.
name company
Foo Bar
listItems[0][0] will give the item renderer corresponding to “Foo”
June 15, 2009 at 4:51 pm
Hi Sameer,
So if the ADG has a vertical scrollbar (which means that we don’t see all the rows) – will listItems hold only the visible items? So when I scroll the width won’t be correct?
I’ve tried to apply your great code to my application, and saw the following strange behavior: If I resize a column that doesn’t show all the rows (because of vertical scrollbar), when I scroll down I see the new rows with their labels outside of the ADG’s borders – and all the text gets messed up. Do you know what I’m talking about? Did it ever happen to you?
Thanks.
June 15, 2009 at 9:13 pm
Yes, listItems only have the visible items. When you scroll, the listItems will change and you’ve to double click the column separator again.
This is done to optimize the calculation as the number of rows can be large.
However, if you want to resize the column taking the whole dataProvider into account, you just need to change the method columnResizeDoubleClickHandler() in AutoResizableADG.as class.
Here, instead of having the for loop till listItems.length, have it till dataProvider.length. Don’t forget to remove the if check in the loop and ensure you pass the column text in measureText().
Let me know in case of doubts.
February 11, 2010 at 9:41 am
HI SAMEER
Very nice example.i Need help but there is only level 2 item rendere but i want it for multiple how is it possibel grid in grid.Please respond as early as possible.
thanking yOu
Reddy
July 8, 2010 at 10:48 am
Hi Sameer,
Not related to this post but I have a query , hope you could help.
I found this bug, that when i do a drag/drop in ADG , the Auto-scroll doesn’t happens like it happens in Datagrid or say TileList.
It’s like , if you try to take the feedback and drop at the end of the list, it doesnt scrolls and not allowing to drop beyond currently visible rows !!!!!!!!!
Any ideas how can i get this working
Thanks a ton
Singh
July 8, 2010 at 11:42 am
Please log this issue here – http://bugs.adobe.com/
The workaround is to override showDropFeedback and change this line –
if (collection)
dragScroll();
To
if (collection)
if (dragScrollingInterval == 0)
dragScrollingInterval = setInterval(dragScroll, 15);
July 8, 2010 at 5:13 pm
hi ,
thanks a lot for your suggestion. Also, i tried this approach, it works but 2 issues -
a) I can drag uptill last row, but i cannot drop after last row.
b) I cannot auto-scroll in upwards direction if i want to …
But i found that somebody has already logged a bug for this.
Thanks again for all your help,
July 8, 2010 at 5:15 pm
Sorry I just checked problem b) is not the issue only i need to drop in after the last row.
July 8, 2010 at 5:29 pm
I guess I got the issue , this is how all the List based controls behave . For drop after last row , we need to have a blank row after the last row.
Just confirm for this understanding , and you have been great help.
July 27, 2010 at 8:15 pm
Hi Sameer,
The links to get the sample & code are not working, Could you please send me the same?
Thanks.
July 29, 2010 at 1:11 pm
Click on the link. It’ll re-direct to google sites and give an option to download.
August 15, 2010 at 4:25 pm
Hi Sameer!
I have an ADG, 1 column, with an ArrayCollection as dataprovider; I create both dynamically, and populate the ArrayCollection with a single object.
The ADG has no header. The ADG displays the object data–it looks like a single row on the form.
ERROR–when I click on the row to edit it, it throws an error here:
AdvancedDataGridBaseEx.as:4854
var partialRow:int = (rowInfo[listItems.length - 1].y + rowInfo[listItems.length - 1].height > listContent.height) ? 1 : 0;
the listItems.length is 0 for some reason.
It’s confusing–the ADG displays the row, yet the ADG.rowCount is -1, while the AC.length is 1.
Can you help?
Thanks!
October 26, 2011 at 10:35 am
Thanks for the great post. I have one question. Does the measureText function considers the columns paddingLeft and paddingRight and gives the width or do we need to add these to the overall width.
FeedBurner
November 6, 2007 at 2:29 pm
I like the auto-re sizeable funktion too. It´s look like very nice.