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>
