Flex 3 Expand AdvancedDataGrid by Clicking Anywhere in the Row

ActionScript , Flex - Author:John Gag at 2:39 PM Add comments

One thing that has been bothering me for awhile about AdvancedDataGrid's in Flex 3 is that you have to click the little triangle to expand a row.  A user, (Vice President), came to me wondering where all the data was located cause he didnt realize that you have to click the triangle (users have had worse questions).  I decided to find a solution so that all you have to do is click anywhere in the row for it to expand.

Below is the actionscript private function that can be called by any AdvancedDataGrid:

private function adg_itemClick(e:ListEvent):void{
                var item:Object = AdvancedDataGrid(e.currentTarget).selectedItem;
                event.target.expandItem(item, !event.target.isItemOpen(item), true);
            }

Now all you have to do is add an itemClick event in your AdvancedDataGrid mxml that calls the function.  Add the appropriate AdvancedDataGrid id where you want this feature called (this example i used the id="testGrid".  This is cool if you have multiple datagrids where you want to apply this feature.)  Here is code:

<mx:AdvancedDataGrid id="testGrid" width="100%" height="100%"  itemClick="adg_itemClick(event);" >

Make sure you use "itemClick" instead of "click" because click event is considered a mouse event and the function does not work.  It should also be noted that you should type the private function out by hand so flex builder will create your import statements for you.  Thought this was a userful little function.

15 responses to “Flex 3 Expand AdvancedDataGrid by Clicking Anywhere in the Row”

  1. med Says:
    nothing
  2. John Gag Says:
    @med - Nothing...?
  3. Brian Says:
    Great Tutorial. Thanks John
  4. kurt Says:
    Been wanting to do this for a long time, just never got around to it. Now there is no reason not to added this much needed feature. Nice work.
  5. Nabdika Says:
    Nice nice work. Thanks for all. Ah! the adg parameter is not necesary: private function adg_itemClick(e:ListEvent):void{ var item:Object = AdvancedDataGrid(e.currentTarget).selectedItem; e.target.expandItem(item, !e.target.isItemOpen(item), true); }
  6. Troy Says:
    How can I get the Label of that top level item when clicked? Alert.show(item.label.text) doesn't work for me
  7. Troy Says:
    I found my answer item["GroupLabel"]. Great blog! Thanks!
  8. Gregg Says:
    I used this neat little function on an advanced datagrid but I found one problem. When you click on the child datagrid (anywhere on it) once it got expanded, it will collapse the item. It seems that by default the child datagrid is still considered like an item of the advanced datagrid so when you click on it (ie. sorting data on the child datagrid), it still calls the itemClick event. Is there a way to prevent it? I've been messing with some action script for a while and cannot find a solution...
  9. Vincent Says:
    Hi Gregg, have you tried to use itemRenderer on the event to detect if the click event is actually happening on the child grid renderer?
  10. Rob Says:
    This is great, nice work. Would love to see how you modify it to just expand by clicking on the first column, rather than the entire row. That way, if you have text inputs or numeric steppers in succeeding columns, it doesnt toggle while working in them
  11. Matthew Rhoden Says:
    This tutorial wouldn't work until you changed it from event -> "event.target.expandItem(item, !event.target.isItemOpen(item), true);" to e -> "e.target.expandItem(item, !e.target.isItemOpen(item), true);" this was a great tutorial though
  12. sreenivas Says:
    Hello, Its nice and very excellent. Please keep on posting some kind of solutions Regards, Sreenivasa Rao. Banfalore
  13. Alfa Says:
    How to get particular cell in selected row?
  14. Alfa Says:
    I want to get cell/column in selected row.
  15. thara Says:
    Nice solution. It worked for me. Thanks.

Leave a Reply

Leave this field empty:



Powered by Mango Blog. Design and Icons by N.Design Studio