Hey all, I have a datagrid where I want to show a dialog (confirmation) box before the selection has changed. I have developed the following code which intercepts the change event. The basics of my method are:
- save selectedIndices on selection "change" - intercept "change" event and show confirmation if doPreventChange variable is true - if user clicks OK, then proceed with new selection, otherwise revert to previous selection Even though this code "works", I'm hoping someone might be able to give me pointers on how to make it "better" (cleaner, more OO). Cheers, Adam <?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"; layout="absolute" creationComplete="init()"> <mx:Script> <![CDATA[ import mx.controls.Alert; import mx.collections.ArrayCollection; import mx.events.CloseEvent; [Bindable] public var doPreventChange:Boolean = true; [Bindable] public var dataProvider:ArrayCollection; [Bindable] public var debug:String = ""; public var dg_selectedIndices:Array = []; public var dg_selectedIndices_capture:Array; public function init():void { dataProvider = new ArrayCollection(); dataProvider.addItem({col1:'My',col2:'data',col3:'goes'}); dataProvider.addItem({col1:'in',col2:'here',col3:'as'}); dataProvider.addItem({col1:'a',col2:'demonstration',col3:'grid'}); dg.addEventListener("customChange",customChange); } public function dataChange(event:Event):void { if (doPreventChange){ // make a copy of selected indices in case the user clicks OK dg_selectedIndices_capture = event.target.selectedIndices.slice(); // set selected indices back to what it was before the change event.target.selectedIndices = dg_selectedIndices.slice(); var strAlert:String = "Really change the selection?"; Alert.show(strAlert, "Alert", Alert.OK | Alert.CANCEL, this, confirmSelectionChange, null, Alert.OK); } else { // make a backup of the selected indices in case we need to revert dg_selectedIndices = event.target.selectedIndices.slice(); dg.dispatchEvent(new Event("customChange")); } } public function confirmSelectionChange(event:CloseEvent):void { if (event.detail == Alert.OK){ // set the selected indices back to what the user intended dg.selectedIndices = dg_selectedIndices_capture.slice(); dg.dispatchEvent(new Event("customChange")); } } public function customChange(event:Event):void { debug += "Datagrid selection change\n"; } ]]> </mx:Script> <mx:DataGrid id="dg" x="14" y="11" width="409" height="309" dataProvider="{dataProvider}" allowMultipleSelection="true" change="dataChange(event)"> <mx:columns> <mx:DataGridColumn headerText="Column 1" dataField="col1"/> <mx:DataGridColumn headerText="Column 2" dataField="col2"/> <mx:DataGridColumn headerText="Column 3" dataField="col3"/> </mx:columns> </mx:DataGrid> <mx:Button x="442" y="10" label="Toggle Prevent Change" click="doPreventChange =! doPreventChange" width="175"/> <mx:Label x="442" y="40" text="Prevent Change = {doPreventChange}"/> <mx:TextArea x="442" y="66" width="194" height="254" text="{debug}"/> </mx:Application>
