Flex 3 Expand AdvancedDataGrid by Clicking Anywhere in the Row
ActionScript , Flex - Author:John Gag at 2:39 PM Add commentsOne 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{ |
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.
Jan 12, 2009 at 8:51 AM nothing
Jan 12, 2009 at 11:11 AM @med - Nothing...?
Jan 14, 2009 at 2:40 PM Great Tutorial. Thanks John
Jan 20, 2009 at 7:14 PM 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.
Jan 30, 2009 at 11:44 AM 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); }
Mar 18, 2009 at 10:25 PM How can I get the Label of that top level item when clicked? Alert.show(item.label.text) doesn't work for me
Mar 20, 2009 at 4:29 PM I found my answer item["GroupLabel"]. Great blog! Thanks!
Apr 30, 2009 at 3:24 PM 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...
May 13, 2009 at 1:46 AM 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?
Aug 4, 2009 at 1:36 PM 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
Aug 16, 2009 at 6:28 PM 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
Nov 4, 2009 at 2:09 AM Hello, Its nice and very excellent. Please keep on posting some kind of solutions Regards, Sreenivasa Rao. Banfalore
Nov 7, 2009 at 1:51 AM How to get particular cell in selected row?
Nov 7, 2009 at 2:03 AM I want to get cell/column in selected row.
Jan 4, 2010 at 9:58 PM Nice solution. It worked for me. Thanks.