3 Replies Latest reply: Mar 8, 2013 12:59 PM by adfg_jadaily RSS

    Changing Keyboard Shortcuts in Spark DataGrid

    adfg_jadaily

      What I'm trying to do seems like it should be pretty simple:  there are item editor shortcuts for the default item editor in a Spark DataGrid, such as Ctrl-Enter to save the edited data and move down one row within a column (like typing in a number in a cell in Excel and then pressing Enter).  I would like to change it so that instead of pressing Ctrl-Enter, the user only needs to press the down arrow.  However, I don't know whether I should be subclassing the DefaultGridItemEditor, or if I should be putting event handlers for KeyboardEvent.KEY_DOWN on the datagrid, or the application, or what. 

       

      I'm guessing I need to subclass GridItemEditor, so here's what I have so far:

       

       

      <?xml version="1.0" encoding="utf-8"?>
      <s:GridItemEditor xmlns:fx="http://ns.adobe.com/mxml/2009" 
                        xmlns:s="library://ns.adobe.com/flex/spark" 
                        xmlns:mx="library://ns.adobe.com/flex/mx">
          
          <fx:Script>
              <![CDATA[
                  // Override the prepare function to set an event listener
                  // on the KeyDown event, to listen for presses of the Down arrow
                  override public function prepare():void {
                      this.addEventListener(KeyboardEvent.KEY_DOWN,downArrowHandler,true,10000);
                  }
                  
                  private function downArrowHandler(event:KeyboardEvent):void {
                      if(event.keyCode == Keyboard.DOWN) {
                          event.target.dispatchEvent(new KeyboardEvent(KeyboardEvent.KEY_DOWN,true,true,0,13,KeyLocation.STANDARD,true));
                      }
                  }
                  
                  override public function set value(newValue:Object):void {
                      input.text = newValue as String;
                  }
                  
                  override public function get value():Object {
                      return input.text;
                  }
                  
                  override public function setFocus():void {
                      input.setFocus();
                  }
              ]]>
          </fx:Script>
          <s:TextInput id="input" width="100%"/>
      </s:GridItemEditor>
      
      

       

      What I'm trying to do is listen for a press of the Down arrow and dispatch a keyboard event for Ctrl-Enter, because I thought that might be easier with manually saving and then moving down to the next row in the same column.  This does not seem to be working, though.  Any ideas?

        • 1. Re: Changing Keyboard Shortcuts in Spark DataGrid
          adfg_jadaily Community Member

          Okay, I managed to figure it out.  I was just going way too complicated, when what I really needed was just a keyDown listener on the datagrid itself:

           

           

          protected function moveDown(event:KeyboardEvent):void
                         {
                              if(event.keyCode == Keyboard.DOWN) {
                                   dataGrid.endItemEditorSession();
                                   dataGrid.setSelectedCell(dataGrid.selectedCell.rowIndex + 1,dataGrid.selectedCell.columnIndex);
                                   dataGrid.startItemEditorSession(dataGrid.selectedCell.rowIndex,dataGrid.selectedCell.columnIndex);
                              } else if(event.keyCode == Keyboard.UP) {
                                   dataGrid.endItemEditorSession();
                                   dataGrid.setSelectedCell(dataGrid.selectedCell.rowIndex - 1,dataGrid.selectedCell.columnIndex);
                                   dataGrid.startItemEditorSession(dataGrid.selectedCell.rowIndex,dataGrid.selectedCell.columnIndex);
                              }
                         }

           

          So simple, I can't believe I've spent 2 days trying to puzzle this out! 

          • 2. Re: Changing Keyboard Shortcuts in Spark DataGrid
            DeanLoganBH Community Member

            You could simplify your code by using a switch statement, which would allow you to access whatever keyboard action you want to track without going through a bunch of "if else" statements.

             

            i.e.

             

            switch(event.keyCode) {
                  case Keyboard.DOWN:          
                       dataGrid.endItemEditorSession();
                       dataGrid.setSelectedCell(dataGrid.selectedCell.rowIndex + 1,dataGrid.selectedCell.columnIndex);
                       dataGrid.startItemEditorSession(dataGrid.selectedCell.rowIndex,dataGrid.selectedCell.columnIndex);
                  break;
                  case KeyBoard.UP:
                      dataGrid.endItemEditorSession();
                      dataGrid.setSelectedCell(dataGrid.selectedCell.rowIndex - 1,dataGrid.selectedCell.columnIndex);
                      dataGrid.startItemEditorSession(dataGrid.selectedCell.rowIndex,dataGrid.selectedCell.columnIndex);
                  break;
             }
            

             

            of course, more simplified would be this

             

             

             dataGrid.endItemEditorSession();
             
             switch(event.keyCode) {
                  case Keyboard.DOWN:          
                      dataGrid.setSelectedCell(dataGrid.selectedCell.rowIndex + 1,dataGrid.selectedCell.columnIndex);          
                  break;
                  case KeyBoard.UP:
                       dataGrid.setSelectedCell(dataGrid.selectedCell.rowIndex - 1,dataGrid.selectedCell.columnIndex);
                  break;
             }
             
             dataGrid.startItemEditorSession(dataGrid.selectedCell.rowIndex,dataGrid.selectedCell.columnIndex);
            
            
            • 3. Re: Changing Keyboard Shortcuts in Spark DataGrid
              adfg_jadaily Community Member

              Thanks, Dean.  Don't know why I didn't think of using a switch on that...