[flexcoders] Re: Datagrid Tabbing breaks when itemrenderer is added to one cell

[Mike_Robinson_98]

--- In flexcoders@yahoogroups.com, "jfournet" <[EMAIL PROTECTED]> wrote:
>
> When I add a custom itemrenderer to a cell of my datagrid, the tabbing 
> order of my screen is broken, i.e., the cell with the itemrenderer is 
> skipped over in the tab order.  Any ideas on how to fix this?
>
What you need to do in this situation is handle your own tabbing
through the DataGrid. This can be accomplished by adding a
'keyFocusChange' handler to the grid.

The handler will have to listen for tab character. If it finds there
was one, then depending on the current row and column, it moves the
focus to the next cell desired. In this way you can skip cells you do
not want to have focused.

Here is a sample piece of code I used to manage tabbing in a grid that
has a renderer and editor in it.

// handler for request to move focus to next column when using tab key
in the DataGrid
private function handleKeyFocusChange(event:FocusEvent):void{
// make sure it is a focus change envent and the tab character
if(event.type == FocusEvent.KEY_FOCUS_CHANGE && event.keyCode == 9){
 var eip:Object; // used to set the focus at a row and column
 if((DataGrid(event.currentTarget)).editedItemPosition != null){
  var colPosition : int =
   (DataGrid(event.currentTarget)).editedItemPosition.columnIndex;
  var rowPosition : int =
   (DataGrid(event.currentTarget)).editedItemPosition.rowIndex;
   if(rowPosition >= 0){ 
     // going backwards off the datagrid
     if(rowPosition == 0 && colPosition ==0 && event.shiftKey == true)
        cb_manufacturer.setFocus(); // somewhere on the page
     // going forward off the datagrid
     else if(rowPosition == (receiptItems.length -1) && colPosition ==
2 && event.shiftKey == false)
        ti_heat_number.setFocus(); // somewhere else on the page             //
going forward/backward in grid
     else{
        switch(colPosition){
          case COLUMN_QUANTITY: // QUANTITY
             colPosition = event.shiftKey ? COLUMN_LOCATION : COLUMN_LENGTH;
             rowPosition = event.shiftKey ? rowPosition - 1 : rowPosition;
             break;
          case COLUMN_LENGTH:   // LENGTH
             colPosition =  event.shiftKey ? COLUMN_QUANTITY : COLUMN_LOCATION;
             break;
          case COLUMN_LOCATION: // PACKAGE
             colPosition =  event.shiftKey ? COLUMN_LENGTH : COLUMN_QUANTITY;
             rowPosition = event.shiftKey ? rowPosition : rowPosition + 1;
             break;
        } // end switch
        eip = {columnIndex:colPosition, rowIndex:rowPosition};
        // focusColumn method sets the focus on the proper column
        callLater(focusColumn,[eip]);                   
      } // end else     
     }  // end if
   }    // end if
 }
}

### example of focusColumn method
private function focusColumn(eip:Object):void{
   // dg_receivedLength is my DataGrid id
   dg_receivedLength.editedItemPosition=eip;
}