You may need to detect that you're at the last row and column and not call preventDefault. You can always call setFocus on those controls as well.
________________________________ From: flexcoders@yahoogroups.com [mailto:[EMAIL PROTECTED] On Behalf Of Pratima Rao Sent: Thursday, May 22, 2008 3:06 PM To: flexcoders@yahoogroups.com Subject: RE: [flexcoders] Datagrid cell editing question Alex - I got the tabbing/enter key to work in the datagrid with your suggestion. It took me a while to make it work. One last problem (hopefully) - I have an Ok and Cancel button below the datagrid and when I tab in the datagrid it never gets to these buttons. It's due to the fact that event.preventDefault method is called to prevent editing of the cell. How do I work around this? I am sending you sample code where you can reproduce this behavior. I wouldn't have made it this far without your suggestions. I appreciate all your help. Pratima <?xml version="1.0"?> <!-- itemRenderers\events\EndEditEventPreventEdit.mxml --> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"; width="100%" height="100%"> <mx:Script> <![CDATA[ import mx.events.DataGridEvent; import mx.collections.ArrayCollection; import mx.controls.Alert; private var lastEditedItem:Object = new Object(); [Bindable] private var initDG:ArrayCollection = new ArrayCollection([ {Artist:'Pavement', Album:'Slanted and Enchanted', Price:11.99}, {Artist:'Sting', Album:'Brighten the Corners', Price:11.99}, {Artist:'Madonna', Album:'Brighten the Corners', Price:11.99} ]); // Define event listener for the cellEdit event // to prohibit editing of the Album column. private function disableEditing(event:DataGridEvent):void { var selectedDType:String = myGrid.dataProvider[myGrid.selectedIndex].Price; if(event.columnIndex==2 && selectedDType == '11.99') { event.preventDefault(); myGrid.editedItemPosition = {columnIndex:event.columnIndex-2, rowIndex:event.rowIndex+1}; } } ]]> </mx:Script> <mx:VBox width="100%" height="100%" horizontalScrollPolicy="auto"> <mx:DataGrid id="myGrid" tabEnabled="false" dataProvider="{initDG}" itemEditBeginning="disableEditing(event);" editable="true" width="100%" height="100%" > <mx:columns> <mx:DataGridColumn dataField="Artist"/> <mx:DataGridColumn dataField="Album"/> <mx:DataGridColumn dataField="Price"/> </mx:columns> </mx:DataGrid> <mx:HBox width="100%" verticalAlign="middle" horizontalAlign="right"> <mx:Button id="okbtn" label="OK"/> <mx:Spacer height="3"/> <mx:Button id="cancelbtn" label="Cancel"/> <mx:Spacer height="5"/> </mx:HBox> </mx:VBox> </mx:Application> ________________________________ From: flexcoders@yahoogroups.com [mailto:[EMAIL PROTECTED] On Behalf Of Alex Harui Sent: Tuesday, May 20, 2008 2:31 PM To: flexcoders@yahoogroups.com Subject: RE: [flexcoders] Datagrid cell editing question Maybe if you keep track of the last editedItemPosition you can tell if the user is tabbing or not. ________________________________ From: flexcoders@yahoogroups.com [mailto:[EMAIL PROTECTED] On Behalf Of Pratima Rao Sent: Tuesday, May 20, 2008 1:20 PM To: flexcoders@yahoogroups.com Subject: RE: [flexcoders] Datagrid cell editing question I have one more question - I changed the code in the disableEditing function and added another condition (in bold below). This breaks when you enter the return key in the datagrid. I know why this is happening. Is there another way to handle cell editing where tab and return key works when you enable or disable specific cells? The reason I ask is that I built a database query tool in Flex and I have a Create Table GUI where a user can insert column name, data type, length, precision, scale, primary key etc in the grid. Based on the datatype (VARCHAR, BIGINT, NUMERIC etc) the user selects I have to disable length, precision or scale. I used the approach below and it works fine as long as you don't tab or use the return key. Based on Alex's suggestion I got the tab to work but the return key doesn't work. I'm thinking that maybe this approach is not the right way to go but we are 2 weeks away from going into production and I don't want to redesign the GUI this late in the game. <?xml version="1.0"?> <!-- itemRenderers\events\EndEditEventPreventEdit.mxml --> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"; width="100%" height="100%"> <mx:Script> <![CDATA[ import mx.events.DataGridEvent; import mx.collections.ArrayCollection; [Bindable] private var initDG:ArrayCollection = new ArrayCollection([ {Artist:'Pavement', Album:'Slanted and Enchanted', Price:11.99}, {Artist:'Sting', Album:'Brighten the Corners', Price:11.99}, {Artist:'Madonna', Album:'Brighten the Corners', Price:11.99} ]); // Define event listener for the cellEdit event // to prohibit editing of the Album column. private function disableEditing(event:DataGridEvent):void { var selectedDType:String = myGrid.dataProvider[myGrid.selectedIndex].Artist; if(event.columnIndex==1 && selectedDType == 'Sting') { event.preventDefault(); myGrid.editedItemPosition = {columnIndex:event.columnIndex+1, rowIndex:event.rowIndex}; } } ]]> </mx:Script> <mx:VBox width="100%" height="100%" horizontalScrollPolicy="auto"> <mx:DataGrid id="myGrid" dataProvider="{initDG}" editable="true" width="100%" height="100%" itemEditBeginning="disableEditing(event);" > <mx:columns> <mx:DataGridColumn dataField="Artist"/> <mx:DataGridColumn dataField="Album"/> <mx:DataGridColumn dataField="Price"/> </mx:columns> </mx:DataGrid> <mx:HBox width="100%" verticalAlign="middle" horizontalAlign="right"> <mx:Button id="okbtn" label="OK"/> <mx:Spacer height="3"/> <mx:Button id="cancelbtn" label="Cancel"/> <mx:Spacer height="5"/> </mx:HBox> </mx:VBox> </mx:Application> ________________________________ From: flexcoders@yahoogroups.com [mailto:[EMAIL PROTECTED] On Behalf Of Pratima Rao Sent: Tuesday, May 20, 2008 10:19 AM To: flexcoders@yahoogroups.com Subject: RE: [flexcoders] Datagrid cell editing question Thanks - that worked!! ________________________________ size=2 width="100%" align=center tabIndex=-1> From: flexcoders@yahoogroups.com [mailto:[EMAIL PROTECTED] On Behalf Of Alex Harui Sent: Tuesday, May 20, 2008 7:52 AM To: flexcoders@yahoogroups.com Subject: RE: [flexcoders] Datagrid cell editing question You'd have to set editedItemPosition ________________________________ From: flexcoders@yahoogroups.com [mailto:[EMAIL PROTECTED] On Behalf Of pratima_jrao Sent: Monday, May 19, 2008 5:00 PM To: flexcoders@yahoogroups.com Subject: [flexcoders] Datagrid cell editing question Hi, I have an application where I prevent users from editing certain cells in a datagrid. I am using the itemEditBeggining event and when the event gets triggered I call the event.preventDefault() method if the cell should not be edited. The problem with this approach is that the tab functionality doesn't work. I am attaching a snippet of code from the adobe site from where I used this approach. Here is the link too if you want to play with the example datagrid. http://livedocs.adobe.com/flex/3/html/help.html?content=celleditor_8.htm l <http://livedocs.adobe.com/flex/3/html/help.html?content=celleditor_8.ht ml> Do you folks have an idea about how to make tab work in the datagrid? so it skips the cell that shouldn't be edited and jumps to the next cell that can be edited? Any suggestions or ideas on this will be highly appreciated. Thanks, Pratima <?xml version="1.0"?> <!-- itemRenderers\events\EndEditEventPreventEdit.mxml --> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml <http://www.adobe.com/2006/mxml> "> <mx:Script> <![CDATA[ import mx.events.DataGridEvent; import mx.collections.ArrayCollection; [Bindable] private var initDG:ArrayCollection = new ArrayCollection([ {Artist:'Pavement', Album:'Slanted and Enchanted', Price:11.99}, {Artist:'Pavement', Album:'Brighten the Corners', Price:11.99} ]); // Define event listener for the cellEdit event // to prohibit editing of the Album column. private function disableEditing(event:DataGridEvent):void { if(event.columnIndex==1) { event.preventDefault(); } } ]]> </mx:Script> <mx:DataGrid id="myGrid" dataProvider="{initDG}" editable="true" itemEditBeginning="disableEditing(event);" > <mx:columns> <mx:DataGridColumn dataField="Artist"/> <mx:DataGridColumn dataField="Album"/> <mx:DataGridColumn dataField="Price"/> </mx:columns> </mx:DataGrid> </mx:Application>
