Skip navigation
Currently Being Moderated

DataGrid Data Entry - Make Enter Behave Like Tab

Feb 18, 2010 11:32 AM

I have a DataGrid with some editable rows and some uneditable rows. What I need is for data entry to happen across the editable columns before advancing down a row. Just like how the DataGrid behaves when the Tab button is used.

 

Basically, I want the Enter key to behave just like the Tab key.

 

How do I go about achieving this?

 
Replies
  • Currently Being Moderated
    Feb 18, 2010 2:51 PM   in reply to F.Bowman

    Add a high priority listener for KEY_DOWN.  Call stopImmediatePropagation.

    Display a FocusEvent.KEY_FOCUS_CHANGE event instead.

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 18, 2010 5:19 PM   in reply to F.Bowman

    Set a breakpoint on keyFocusChangeHandler and see what is in the event and

    mimic it.  You may need to dispatch from itemEditorInstance

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 18, 2010 10:21 PM   in reply to F.Bowman

    Open DataGrid.as, put a breakpoint on keyFocusChangeHandler, run the app,

    hit Tab, you can examine the event.  You want to dispatch a similar event.

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 19, 2010 10:29 AM   in reply to F.Bowman

    Yeah, so create the same event and dispatch it off the itemEditorInstance

    and see what happens.

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 14, 2011 5:24 PM   in reply to Flex harUI

    I used the code that F.Bowman came up with and was able to get it to work on my dataGrid just fine.  However, the dataGrid in my form is only part of the form.  I'd like to be able to use this on things like text inputs, combo boxes, and my dataGrid all in the same form.  If I change the code posted above to attach the event handler to and dispatch the event from the stage, I can use the Enter key to move from text box to text box to combo box to whatever just fine, but then when it focuses on the dataGrid, the dataGrid no longer uses Enter in place of Tab, nor does it default back to moving down one row either.  Here is my current code:

     

    public function applicationCompleteHandler():void {
      stage.addEventListener(KeyboardEvent.KEY_DOWN, keyHandlerStage, true, -10000);
    }
    
    private function keyHandlerStage(e:KeyboardEvent):void {
      if(e.keyCode == 13) {
        e.stopImmediatePropagation();
        stage.dispatchEvent(new FocusEvent("keyFocusChange",true,true,null,false,9));
      }
    }
    

     

    I tried setting one event listener on the stage and then one on the DataGrid, with different priorities for each, and got nothing.  Also, if I use a trace to display the keyCode of the button pressed in the stage's event Handler, it displays "13", which is normal.  But, if I trace the keyCode of the dataGrid's event handler, it doesn't display "13" when the Enter key is pressed, but it will display the keyCodes of every other key I press in the dataGrid.

     

    Any idea what I'm doing wrong?

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 14, 2011 11:08 PM   in reply to Justin Daily

    By calling from the stage stopImmediatePropagation, you are blocking the

    DataGrid from getting the event.

     

    You could add a test to see if the event.target is the DataGrid or its

    editor and not call stopImmediatePropagation.

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 15, 2011 12:09 PM   in reply to Flex harUI

    Okay, well, I'm closer.   With this code, I can use the Enter key just like the tab key both in  and out of the DataGrids, except when I hit a custom itemEditor in the  dataGrid.  Here's what I have now:

     

    public function applicationCompleteHandler():void {
      stage.addEventListener(KeyboardEvent.KEY_DOWN, keyHandlerStage, true, -10000);
    }
    
    private function keyHandlerStage(e:KeyboardEvent):void {
      if(e.keyCode == 13) {
        var focused:Object = e.target.parent.parent.parent;
        var check:Boolean = focused is DataEntryDataGrid;
        if(check == false) {
          e.stopImmediatePropagation();
          stage.dispatchEvent(new FocusEvent("keyFocusChange",true,true,null,false,9));
        } else {
          focused.dispatchEvent(new FocusEvent("keyFocusChange",true,true,null,false,9));
        }
      }
    }
    

     

    DataEntryDataGrid on line 8 is a subclass of mx:DataGrid.  If I trace e.target while an editable cell of the datagrid is selected, I get this:

     

    HerringSurveySpawn2.ApplicationSkin2._ApplicationSkin_Group1.contentGroup.Group6.crewGrid.ListBaseContentHolder105.HerringSurveySpawn2InnerClass0_364.UITextField366
    

     

    In the above line, "crewGrid" is the id of the dataGrid that is focused on when the Enter key is pressed. This is what led me to the e.target.parent.parent.parent idea in the code block above.  But, when I hit a custom itemEditor, like a comboBox or something, the whole thing breaks.  There are three levels after "crewGrid" in a regular textInput-style cell, but only two levels after "crewGrid" when tracing from a comboBox itemEditor cell.  What I'd really like is to be able to check if e.target is a child of a dataGrid at any level, but I'm not sure how to accomplish that.  I'm sure that if I could get that figured out, it would work like a charm.

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 15, 2011 1:53 PM   in reply to Justin Daily

    Try:

        var check:Boolean = focusManager.getFocus() is DataEntryDataGrid

     

    I think even if you're in an item editor, the focusManager thinks that the

    focused component is the DataGrid

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 15, 2011 3:04 PM   in reply to Flex harUI

    Tried that and it didn't work.  It broke the Enter key for the regular textInputs inside the dataGrid as well.  When I traced the output of focusManager.getFocus() while a datagrid cell was selected, I got:

     

    HerringSurveySpawn2.ApplicationSkin2._ApplicationSkin_Group1.contentGr oup.Group6.crewGrid.ListBaseContentHolder105.HerringSurveySpawn2InnerC lass0_364

     

    When what I think I was looking for was simply:

     

    HerringSurveySpawn2.ApplicationSkin2._ApplicationSkin_Group1.contentGr oup.Group6.crewGrid

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 15, 2011 3:13 PM   in reply to Justin Daily

    How many of these datagrids do you have?

     

    If you only have one, you can special case the test to use contains().  You

    could also build a list of them to check against, or you can do a parent

    walk to see if they are contained in a grid.

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 15, 2011 4:12 PM   in reply to Flex harUI

    The form has two different dataGrids in it, both used for data entry.  How would a "parent walk" work?

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 15, 2011 4:41 PM   in reply to Justin Daily

    Var check:Boolean = event.target is DataGrid;

    If (!check)

    {

        Var o:DisplayObjectContainer = event.target.parent

        while (o != this.stage)

        {

            if (o is DataGrid)

            {

                check = true;

                break;

            }

            o = o.parent;

        }

    }

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 15, 2011 4:53 PM   in reply to Flex harUI

    That's perfect.  It works like a Swiss clock now.  Here's the final code, for anyone else who might find this thread and need it:

     

    // Call this function in your application's "applicationComplete" event
    public function applicationCompleteHandler():void {
      stage.addEventListener(KeyboardEvent.KEY_DOWN, keyHandlerStage, true, -10000);
    }
    
    private function keyHandlerStage(e:KeyboardEvent):void {
      if(e.keyCode == 13) {
        var focused:Object;
        var check:Boolean = e.target is DataEntryDataGrid;
        if (!check)
        {
          var o:DisplayObjectContainer = e.target.parent
          while (o != this.stage)
          {
            if (o is DataEntryDataGrid)
            {
              check = true;
              focused = o;
              break;
            }
            o = o.parent;
          }
        }
        if(check == false) {
          e.stopImmediatePropagation();
          stage.dispatchEvent(new FocusEvent("keyFocusChange",true,true,null,false,9));
        } else {
          focused.dispatchEvent(new FocusEvent("keyFocusChange",true,true,null,false,9));
        }
      }
    }
    

     

    Thanks, Flex!

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points