How to make a grid cell uneditable without messing up tabbing
I'm using an AdvancedDataGrid in ActionScript 3/Flex 4. The grid has 5 columns: Caller Intent, Labels, Strategy, Confirmation Mode, and Confirmation Promptlet. All columns are editable except for Labels. However, if you change the Confirmation Mode value to NEVER, the next column Confirmation Promptlet becomes uneditable and is set with the value 'n/a' (this is the desired functionality).
Unfortunately, the image is not clear. In the second row, I changed the Confirmation Mode value to NEVER. This is what happens when I start tabbing out of the Confirmation Mode cell: 1st Tab: Confirmation Promptlet populated with 'n/a'. I don't see anything in focus. 2nd Tab: The 5th tab from the left in the view stack (dark grey) is in focus. 3rd Tab: I don't see anything in focus. 4th Tab: The button with the green '+' (top left) is in focus. 5th Tab: The grid it开发者_开发技巧self is in focus. 6th Tab: Finally I get to the Caller Intent cell of the next row (when this image was captured)
I tried setting tabEnabled="false" and tabFocusEnabled="false" for the button. I set only tabFocusEnabled="false" for the AdvancedDataGrid. But then the Tab focus starts moving to the components in the upper right panel and lower right panel.
I need to accomplish 2 things: 1. Have tabbing be contained in the grid, in the upper right panel, and in the lower right panel. Meaning tabbing should not cross from one area to another. 2. Have an uneditable field not mess up the normal tabbing behaviour.
SIMPLE SOLUTION: Use ENTER to transverse down a grid.
COMPLEX SOLUTION: Use a combination of event listners, and locking /unlocking of other columns.
Whithin the MXML file, you can edit the DataGridColumn (or do it with code), to do your setup.
<mx:DataGridColumn ... id='col1' editable='false' ... />
Though i know you said this does not work, you can when a user, selects a column, lock out ALL OTHER COLUMNS and make them uneditable (via code + DataGridColumn's with id). As a result, all tab events goes 'one step down'. However make sure to catch the exiting edit event, when all edits are canceled. To 'unlock' all the other collumns. As a proof of concept, try creating a table with only 1 editable collumns
Use event listner to intercept the edits start and end (hence ignores it / etc)
//...
datagrid.addEventListner( DataGridEvent.ITEM_EDIT_END, editEvent );
function editEvent( e.DataGridEvent ):void {
if(e.reason == DataGridEventReason.CANCELLED) {
e.preventDefault();
}
if(e.dataField == 'collumn name i dun want to edit') {
e.preventDefault();
}
//...
//CODE TO LOCK / UNLOCK EDIT IN OTHER COLLUMNS
//...
//you may want to add an ignore, if both before / after values are the same
//If you really need that code : i can dig it up (just let me know)
}
In this way, you can just transverse down the grid, by entering the ENTER key. (and ignore edits when not needed). And catch the event needed to lock out the other grids.
I have done a lot of focus work around the AdvancedDataGrid. Check out my presentation at http://squaredi.blogspot.com/2011/04/taming-beast-advanceddatagrid.html and http://squaredi.blogspot.com/2011/04/taming-beast-advanceddatagrid-code.html
to see if those examples get you closer to your needs
精彩评论