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>
