5 Replies Latest reply on Mar 30, 2007 2:31 PM by BillHeit2

    Editable DataGrid tabbing problem

    jpwrunyan Level 1
      I have a problem with editable DataGrids in Flex 2.0.
      When I tab through the DataGrid, everything works fine. Focus cycles through all the components. However, when I tab through holding down the shift key, I cannot tab to components prior to the first editable cell in the grid. The grid loses focus, then the application loses focus. I am trying to find a work-around for this. I have tried using the focusOut event for both the application and the datagrid hoping that I can just use UIComponent.setFocus() to fix the focus but can't capture the focus event when the DataGrid loses focus on shift-tab. Has anyone seen this problem? Is there a work around? Please try the code below to see the problem clearly.

      <?xml version="1.0" encoding="utf-8"?>
      <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml" layout="vertical" >
      <mx:Script>
      <![CDATA[
      private function test(e:FocusEvent):void {
      debug.text = "shiftKey: "+e.shiftKey+"\n"+(new Date().getUTCMilliseconds());
      if (e.target == grid && e.shiftKey) {
      //this doesn't work... what on Earth will???
      //prevText.setFocus();
      }
      }
      ]]>
      </mx:Script>
      <mx:TextArea id="debug" />
      <mx:ArrayCollection id="receive_dp">
      <mx:Object page="1/5" image="P001.jpg" split="false" />
      <mx:Object page="2/5" image="P002.jpg" split="false" />
      <mx:Object page="3/5" image="P003.jpg" split="false" />
      <mx:Object page="4/5" image="P004.jpg" split="false" />
      <mx:Object page="5/5" image="P005.jpg" split="true" />
      </mx:ArrayCollection>
      <mx:TextInput id="prevText" focusThickness="5" text="you can't get to me using SHIFT-TAB" />
      <mx:DataGrid id="grid" dataProvider="{receive_dp}" editable="true" focusOut="test(event)">
      <mx:columns>
      <mx:DataGridColumn headerText="Page" dataField="page" resizable="false" editable="false" width="45" />

      <mx:DataGridColumn headerText="Split" dataField="split" editorDataField="selected" rendererIsEditor="true">
      <mx:itemRenderer>
      <mx:Component>
      <mx:CheckBox selected="{data.split}" label="{data.image}" />
      </mx:Component>
      </mx:itemRenderer>
      </mx:DataGridColumn>

      <mx:DataGridColumn headerText="branch" dataField="branch" editorDataField="selectedIndex" rendererIsEditor="true">
      <mx:itemRenderer>
      <mx:Component>
      <mx:ComboBox selectedIndex="{data.branch}">
      <mx:dataProvider>
      <mx:String>b1</mx:String>
      <mx:String>b2</mx:String>
      <mx:String>b3</mx:String>
      <mx:String>b4</mx:String>
      </mx:dataProvider>
      </mx:ComboBox>
      </mx:Component>
      </mx:itemRenderer>
      </mx:DataGridColumn>
      </mx:columns>
      </mx:DataGrid>
      <mx:TextInput focusThickness="5" />
      </mx:Application>
        • 1. Re: Editable DataGrid tabbing problem
          jpwrunyan Level 1
          I know I am not the only one out there using editable datagrids with inline cell renderers/editors.
          Hasn't anyone else had to deal with this problem?
          • 2. Re: Editable DataGrid tabbing problem
            jpwrunyan Level 1
            One more thing I have found:

            The tabbing works fine when the .swf is run locally without an .html wrapper. This problem appears when using a browswer (at least it does for MIE 6.0).
            • 3. Editable DataGrid tabbing problem
              BillHeit2
              I am also having this problem. The grid does not seem to keep the focus...even in a simple case like this:

              <mx:DataGrid id="dg" width="100%" height="100%" rowCount="5" dataProvider="{employees}" editable="true" >
              <mx:columns>
              <mx:DataGridColumn dataField="name" headerText="Name" />
              <mx:DataGridColumn dataField="phone" headerText="Phone" />
              <mx:DataGridColumn dataField="email" headerText="Email" />
              </mx:columns>
              </mx:DataGrid>


              Also, in a more complex case, when I try to set the errorString or the toolTip on the itemEditor control, the focus is lost.

              I can't use the grid because of this.

              Bill
              • 4. Re: Editable DataGrid tabbing problem
                jpwrunyan Level 1
                Well, I reported this as a bug last year. I wonder if it is fixed with 2.0.1.

                One thing I would like to know is what browser you are using? I was using MIE 6.0 and it appears that the focus problem is specific to the IE version of flash player. I *think* it worked fine with firefox. And using the stand-alone flash player also worked. You might double check that this is the case. If you are using 2.0.1 and IE and this bug still hasn't been fixed, maybe you could put in a bug report / feature request. Like I said, I already reported it once, so if someone new does as well, maybe they will take it more seriously.

                Finally, on a side note, I changed my application so that if the user pressed Enter while a row in the datagrid is highlighted, it opens up a popup on top of the row in the datagrid with editable controls. The popup also changes position and display data in response to keyboard events like up and down so it "feels" like you are manipulating the datagrid. This solution was actually preferable to our customer than the stander excel-like cell editors. Also, it completely circumnavigated the tab-focus problem.
                • 5. Editable DataGrid tabbing problem
                  BillHeit2 Level 1
                  I had the same problem an found a solution:
                  First, add the DataGrid control to your project:
                  - Create an mx/controls folder and copy the file from the installed SDK source files.

                  Second, make the following changes to the focusInHandler:

                  override protected function focusInHandler(event:FocusEvent):void
                  {
                  // trace(">>DGFocusIn ", selectedIndex);

                  if (event.target != this)
                  {
                  // trace("subcomponent got focus ignoring");
                  // trace("<<DGFocusIn ");

                  // Begin Change - Fixed tabbing bug
                  addEventListener(FocusEvent.KEY_FOCUS_CHANGE, keyFocusChangeHandler);
                  addEventListener(MouseEvent.MOUSE_DOWN, mouseFocusChangeHandler);
                  // End Change
                  ...