Sure, here you go. It's a bit messy, but I've stripped out everything except for the bare essentials. There is one bug, it won't work correctly on Safari on the Mac (not sure of other browsers). It is because of the characters I use to denote the 'visible status' when the context menu is displayed.
Cheers, Adam <?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"; layout="vertical" creationComplete="initApplication()"> <mx:Script> <![CDATA[ import flash.ui.ContextMenu; import flash.ui.ContextMenuItem; public var emptyContextMenu:ContextMenu; public var columnsContextMenu:ContextMenu; public function initApplication() : void { initContextMenu(); } public function initContextMenu():void { columnsContextMenu = new ContextMenu(); emptyContextMenu = new ContextMenu(); columnsContextMenu.hideBuiltInItems(); emptyContextMenu.hideBuiltInItems(); addCustomMenuItems(); dg.addEventListener("mouseMove",datagridMouseMove); } public function datagridMouseMove(event:MouseEvent):void { if (dg.contentMouseY <= dg.headerHeight){ dg.contextMenu = columnsContextMenu; } else { dg.contextMenu = emptyContextMenu; } } private function addCustomMenuItems():void { var item:ContextMenuItem, col:String; for (var i:int=0;i<dg.columnCount;i++){ col = dg.columns[i].headerText; if (dg.columns[i].visible){ col = '» '+col; } else { col = '- '+col; } item = new ContextMenuItem(col); item.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT,clickMe); columnsContextMenu.customItems.push(item); } } public function clickMe(e:ContextMenuEvent):void { var t:String = e.target.caption; for (var i:int=0;i<dg.columnCount;i++){ if ('- '+dg.columns[i].headerText == t || '» '+dg.columns[i].headerText == t){ dg.columns[i].visible = !dg.columns[i].visible; break; } } initContextMenu(); } ]]> </mx:Script> <mx:DataGrid id="dg" width="100%" height="100%"> <mx:columns> <mx:DataGridColumn headerText="Column 1" /> <mx:DataGridColumn headerText="Column 2" /> <mx:DataGridColumn headerText="Column 3" /> <mx:DataGridColumn headerText="Column 4" visible="false" /> <mx:DataGridColumn headerText="Column 5" visible="false" /> </mx:columns> </mx:DataGrid> </mx:Application> ----- Original Message ----- From: sanjaypmg To: flexcoders@yahoogroups.com Sent: Monday, February 12, 2007 4:27 PM Subject: [flexcoders] Re: Show/Hide Column of Grid using Context Menu Hi Adam, Can you send me the source? if possible. It'll be a great support for me to complete my assignment. Thanks, Sanjay sharma --- In flexcoders@yahoogroups.com, "Adam Royle" <[EMAIL PROTECTED]> wrote: > > Hi Sanya, > > I have done this in my app successfully, however with a different technique. My context menu shows all of the columns in the datagrid, with a prefix that denotes whether it is visible or not. Once clicked, it figured out which column was clicked and toggle's the visibility. It works well. > > I have a function which creates two ContextMenu objects, one that contains all of the column names, and one that is empty. Since the ContextMenu has to be associated with the datagrid before the right- click occurs, I dynamically assign it within a mouseMove event (based on the value of the .contentMouseY property). > > This means the context menu with column names only show when you right-click on the headers. I don't mind showing code except it's a bit of a mess at the moment and might confuse the matter rather than explaining it. > > Sorry I didn't run your example files so I'm not sure if I'm addressing your specific problem or not. > > Cheers, > Adam > > ----- Original Message ----- > From: sanjaypmg > To: flexcoders@yahoogroups.com > Sent: Friday, February 09, 2007 10:54 PM > Subject: [flexcoders] Show/Hide Column of Grid using Context Menu > > > Hi all, > > Am making a function of show/hide column of dataGrid using Context > Menu. > > Contextmenu comes when user clicks right button of mouse on header. > > I have made a mxml component and added in headerRender of the > dataGrid Column. But when I click on my hide column button of > context menu it doesnt hide my clickd coloum. > > Here in case of Filter in my files, If I enable sorting of the same > column, it overrides my filter functionality. can anyone let me know > the solution of it? > > In testCombo.mxml, currently I have populated Combo box using > hardcoded array. I want to populate this array dynamically so that I > can use the same file for multiple filters. Kindly do let me know > how can I populate combo box dynamically? > > I am atteching my code pls have a look n help me. > > Thanks in Advance, > Sanjay sharma > > File # 1 :::: contMenuOnGrid.mxml > > <?xml version="1.0" encoding="utf-8"?> > <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"; > layout="absolute" initialize="doInit()" > xmlns:local="*" xmlns:gridCode="*" > > <mx:Script> > <![CDATA[ > import mx.controls.Alert; > import mx.collections.*; > > > public var filterVar:String; > > [Bindable] > public var authorsDataProvider : ArrayCollection = new > ArrayCollection( [ > { Selection: "", Country: "USA", Gold: 35, > Status:"Active", URL:"http://www.google.com"; }, > { Selection: "", Country: "China", Gold: 32, > Status:"Deactive",URL:"http://www.yahoo.com"}, > { Selection: "", Country: "Russia", Gold: > 27,Status:"Deactive", URL:"http://www.hotmail.com"; }, > { Selection: "", Country: "India", Gold: 12, > Status:"Active",URL:"http://www.gmail.com"}, > {Selection: "", Country: "Russia", Gold: 27, > Status:"Deleted",URL:"http://www.hotmail.com"; }, > {Selection: "", Country: "Russia", Gold: 27, > Status:"Deleted",URL:"http://www.hotmail.com"; }, > { Selection: "", Country: "China", Gold: 32, > Status:"Deactive",URL:"http://www.yahoo.com"}, > { Selection: "", Country: "Russia", Gold: > 27,Status:"Deactive", URL:"http://www.hotmail.com"; }, > { Selection: "", Country: "India", Gold: 12, > Status:"Active",URL:"http://www.gmail.com"}, > {Selection: "", Country: "Russia", Gold: 27, > Status:"Deleted",URL:"http://www.hotmail.com"; }, > {Selection: "", Country: "Russia", Gold: 27, > Status:"Deleted",URL:"http://www.hotmail.com"; }, > { Selection: "", Country: "China", Gold: 32, > Status:"Deactive",URL:"http://www.yahoo.com"}, > { Selection: "", Country: "Russia", Gold: > 27,Status:"Deactive", URL:"http://www.hotmail.com"; }, > { Selection: "", Country: "India", Gold: 12, > Status:"Active",URL:"http://www.gmail.com"}, > {Selection: "", Country: "Russia", Gold: 27, > Status:"Deleted",URL:"http://www.hotmail.com"; }, > {Selection: "", Country: "Russia", Gold: 27, > Status:"Deleted",URL:"http://www.hotmail.com"; } ]); > > > > public function doInit():void{ > /*var gridSnippet:gridCode = null; > gridSnippet = new gridCode(); > gridSnippet.addEventListener( > gridCode.HIDE_COLUMN, hideCol ); > addChild(gridSnippet); > gridSnippet.visible = false;*/ > } > > public function filterFnc(item:Object):Boolean { > return item.Gold == 27 ; > } > public function filterFnc1(item:Object):Boolean { > //Alert.show("item: "+item.toString > ()); > //Alert.show("item.Gold.toString()") > return item.Status == "Deactive" ; > } > public function hideCol( event:Event ):void > { > Alert.show("hideCol") > } > > ]]> > </mx:Script> > <mx:Panel title="Header Filter" width="100%" height="100%"> > <gridCode:gridCode dataProvider="{authorsDataProvider}" /> > </mx:Panel> > </mx:Application> > > File # 2 :::: gridCode.mxml > <?xml version="1.0" encoding="utf-8"?> > <mx:DataGrid xmlns:mx="http://www.adobe.com/2006/mxml"; > > > > <mx:Script> > <![CDATA[ > import mx.core.UIComponent; > import mx.controls.Alert; > import mx.events.DataGridEvent; > > public var curColumn:String; > > public function showColumn( event:Event ):void > { > Alert.show("showColumn"); > Selection.visible = true; > Country.visible = true; > Status.visible = true; > Gold.visible = true; > } > private function headerPressed > (evt:DataGridEvent):void{ > > curColumn = evt.dataField; > > } > private function gridSelected(event:Event):void{ > Alert.show > ("event.selectedItem"+event.target.selectedItem); > } > private function btPressed(col:String):void{ > Alert.show("col "+col); > this[col].visible = false; > } > private function pPressed():void{ > > this[curColumn].visible = true; > } > ]]> > </mx:Script> > <mx:columns> > <mx:Array> > <mx:DataGridColumn id="Selection" > headerRenderer="contMenu" headerText="Selected" > itemRenderer="MyContactEditable" resizable="false" > dataField="Selection" width="80" /> > <mx:DataGridColumn id="Country" > headerRenderer="contMenu" width="300" headerText="Country" > dataField="Country" /> > <mx:DataGridColumn id="Status" width="300" > headerText="Status" dataField="Status" headerRenderer="testCombo" > sortable="false"/> > <mx:DataGridColumn id="Gold" width="300" > headerText="Gold" dataField="Gold" /> > </mx:Array> > </mx:columns> > </mx:DataGrid> > > File # 3 :::: contMenu.mxml > > <?xml version="1.0" encoding="utf-8"?> > <mx:TextArea xmlns:mx="http://www.adobe.com/2006/mxml"; > enabled="false" height="100%" width="100%" > preinitialize="doCreationComplete( event )" alpha="100" > backgroundAlpha="0" borderThickness="0"> > <mx:Metadata> > [Event( name="hideColumn", > type="flash.events.Event" )] > </mx:Metadata> > <mx:Script> > <![CDATA[ > import mx.core.UIComponent; > import mx.controls.Alert; > import > mx.controls.dataGridClasses.DataGridListData; > import > mx.controls.dataGridClasses.DataGridColumn; > > import mx.managers.PopUpManager; > > public static const HIDE_COLUMN:String > = "hideColumn"; > public static const SHOW_ALL:String > = "showAll"; > > private var menu:ContextMenu = null; > public var curColumn:String; > > private function showWindow():void { > var showHideWindow:shPanel = shPanel > (PopUpManager.createPopUp( this, shPanel , true)); > } > > public function doCreationComplete > (event:Event):void{ > > var item:ContextMenuItem = null; > var items:Array = new Array(); > > > menu = new ContextMenu(); > > item = new ContextMenuItem( "Hide > Column" ); > item.addEventListener( > ContextMenuEvent.MENU_ITEM_SELECT, hideColumn ); > items.push( item ); > > menu.customItems = items; > > item = new ContextMenuItem( "Show > All Columns" ); > item.addEventListener( > ContextMenuEvent.MENU_ITEM_SELECT, showColumn ); > items.push( item ); > menu.customItems = items; > menu.hideBuiltInItems(); > > contextMenu = menu; > } > public function hideColumn( event:Event ):void > { > //myListData. > //showWindow() > var myListData:DataGridListData = > DataGridListData(listData); > var myCol:DataGridColumn = DataGridColumn > (myCol); > //myCol.visible = false; > //myCol.width = 300 > Alert.show("second:: "+ > myListData.dataField); > } > > public function showColumn( event:Event ):void > { > //showColumn() > //Selection.visible = true; > //Country.visible = true; > //Status.visible = true; > //Gold.visible = true; > } > ]]> > </mx:Script> > </mx:TextArea> > > File # 4 :::: shPanel.mxml > > <?xml version="1.0" encoding="utf-8"?> > <mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml"; > title="Show/Hide Column" x="350" y="86" > showCloseButton="true" close="closePOP()" height="200" > width="314" verticalAlign="middle" horizontalAlign="center"> > > <mx:Script> > <![CDATA[ > import mx.managers.PopUpManager; > import mx.controls.Text; > import mx.controls.Alert; > > // A reference to the TextInput control in which to put > the result. > public var loginName:Text; > > // Event handler for the OK button. > private function returnName(evt:Event):void { > > // loginName.text="Name entered: " + userName.text; > PopUpManager.removePopUp(this); > } > private function closePOP():void{ > PopUpManager.removePopUp(this); > } > private function cntCheck():void{ > //Alert.show(this.toString()); > > //parentDocument.parentDocument.parentDocument.parentDocument > .parentDocument.showColumn() > } > ]]> > </mx:Script> > > <mx:Form id="addUserForm" width="266" height="150" > paddingTop="0" paddingBottom="0" > paddingLeft="0" paddingRight="0"> > <mx:HBox width="260" horizontalGap="0"> > <mx:FormItem label="selection:" > width="111"/> > <mx:Spacer width="10" /> > <mx:CheckBox id="select_ch"/> > </mx:HBox> > <mx:HBox width="260" horizontalGap="0"> > <mx:FormItem label="Coutntry:" > width="111"/> > <mx:Spacer width="10" /> > <mx:CheckBox id="cnt_ch" click="cntCheck()" /> > </mx:HBox> > > <mx:HBox width="260" horizontalAlign="center"> > <mx:Button id="mySubmitButton" label="Submit"/> > <mx:Button label="Cancel" click="closePOP()"/> > </mx:HBox> > </mx:Form> > </mx:TitleWindow> > > File # 5 :::: testCombo.mxml > > <?xml version="1.0" encoding="utf-8"?> > <mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml"; > preinitialize="init()"> > <mx:Script> > <![CDATA[ > import mx.controls.listClasses.ListData; > import mx.controls.Alert; > import > mx.controls.dataGridClasses.DataGridColumn > import flash.events.Event; > import mx.events.DataGridEvent; > > > public var Listener:Object = new Object(); > public var myListData:DataGridColumn = > DataGridColumn(myListData); > > [Bindable] > public var statusArray:Array = ["All", > "Active", > "Deactive", > "Deleted"]; > > public function init():void{ > //Alert.show(myListData.toString()); > addEventListener("initialize", > handleDataChanged); > } > public function initi():void{ > cboAuthorsStatusFilter.selectedItem > = parentDocument.filterVar > headLabel.text = > parentDocument.filterVar > } > public function handleDataChanged > (event:Event):void { > //var ttext:String ="row index: " + > String(myListData.rowIndex) + " column index: " > + String(myListData.columnIndex); > //Alert.show > ("ttext:: "+event.eventPhase); > > } > public function changeCombo(evt:Event):void{ > > parentDocument.filterVar = > cboAuthorsStatusFilter.selectedItem.toString(); > if(cboAuthorsStatusFilter.selectedItem == "All"){ > > parentDocument.authorsDataProvider.filterFunction = > null; > }else{ > > parentDocument.authorsDataProvider.filterFunction = > filterFnc; > } > parentDocument.authorsDataProvider.refresh(); > > } > public function filterFnc(item:Object):Boolean { > return item.Status == > cboAuthorsStatusFilter.selectedItem ; > } > ]]> > </mx:Script> > <mx:ComboBox width="100%" id="cboAuthorsStatusFilter" > dataProvider="{statusArray}" change="changeCombo(event)" > creationComplete="initi()" /> > <mx:Label id="headLabel" /> > > </mx:HBox> > > File # 6 :::: myContactEditable.mxml > > <?xml version="1.0"?> > <!-- MyContactEditable.mxml --> > <mx:CheckBox change="boxClicked()" preinitialize="init()" > xmlns:mx="http://www.adobe.com/2006/mxml";> > > <mx:Script> > <![CDATA[ > import mx.controls.Alert; > import mx.events.DataGridEvent; > // Define a property for returning the new value to the > cell. > public var newContact:String=new String(); > // public var girdColIndex:DataGridEvent; > public function init():void{ > this.x = 20; > > > } > public function boxClicked():void{ > Alert.show("x: "+this) > } > ]]> > </mx:Script> > > </mx:CheckBox> >
