«
»

Hiding Flex DataGrid columns using a context menu in AIR

A Flex/AIR project I’m working on at the moment uses a DataGrid to display a lot of data. There needs to be lots of columns, but this means that the view can be a bit cluttered. What I wanted was an easy for the user to show or hide columns as they prefer. In Cocoa on Mac OS X you can right-click (or ctrl-click) to show a context menu to do this, which seems to be a good way. I thought there may be a way of doing this in Flex, but there didn’t appear to be. It was quite simple to implement and could be useful in lots of cases, so I thought I’d share the code. I put this in a creationComplete handler.

I’ve attached it as a context menu on the DataGrid, but you could also attach it to the header or to a button. I hope it helpful to someone.

var context:NativeMenu = new NativeMenu();
for each (var col:DataGridColumn in myDataGrid.columns){
	var menuI:NativeMenuItem = new NativeMenuItem(col.headerText);
	menuI.checked = col.visible;
	menuI.data = col;
	context.addItem(menuI);
}
context.addEventListener(Event.SELECT, function(e:Event):void {
	var t:NativeMenuItem = e.target as NativeMenuItem;
	t.checked = !t.checked;
	t.data.visible = t.checked;
});
 
myDataGrid.contextMenu = context;

This entry was posted on Thursday, August 28th, 2008 at 2:04 pm GMT and is filed under Actionscript, Adobe, Adobe AIR, AIR, AS3, Flex, tips. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

10 Responses to “Hiding Flex DataGrid columns using a context menu in AIR”

  1. blog Says:
    August 28th, 2008 at 2:18 pm GMT

    Hiding Flex DataGrid columns using a context menu ……

    Bookmarked your post over at Blog Bookmarker.com!…

  2. Sameer Says:
    August 4th, 2009 at 11:10 pm GMT

    Hi! Thanks for sharing it was pretty helpful..I was also looking for the same solution. I am also planning to add more items to the context menu like Add/Edit/Delete data from DataGrid.

  3. Saurav Says:
    September 15th, 2009 at 4:27 am GMT

    Hi, Thanks. Iwa trying to implement this for a lon time…

  4. Nick Says:
    October 29th, 2009 at 1:56 pm GMT

    Very cool! A lot simpler than I thought.

  5. Jim Says:
    December 21st, 2009 at 9:53 pm GMT

    Hi. I am new to Flex and would love to implement this in a project. Do you have any sample code for the complete application, or any help in where your code would live within the app?

    Thanks!

  6. Eric Says:
    January 9th, 2010 at 9:24 am GMT

    How do you attach the context menu to the header?

  7. Dong Duc Says:
    April 25th, 2010 at 6:52 am GMT

    Thanks.that’s useful info for me.

  8. MPS Says:
    April 29th, 2010 at 3:41 am GMT

    Thanks ! I would also like to know how to attach the context menu to the DataGrid header.

  9. nag Says:
    May 18th, 2010 at 5:15 am GMT

    Hi
    i want the same functionality in web application………
    and also i want to know how to add context menu to header

  10. matt Says:
    May 18th, 2010 at 6:43 am GMT

    This won’t work in web applications because AIR handles menus differently.

Leave a Reply