14 Replies Latest reply on Oct 18, 2010 11:37 AM by alinator11

    DataGrid Tab Order Problems

    alinator11 Level 2

      Please bear with me as I'm a total newbie to Flex (my experience has always been on the server side writing Java and working with the DB primarily). I have implemented a DataGrid table, provided several custom Renderers and Editors for the cells and loaded data to the grid and displayed it successfully. Then, when I try tabbing in it, I get some bad results.

       

      My DataGrid has 9 columns. The first colum (item 0) is not editable nor is item 1. Item 2 is a TextInput Renderer. Item 3 is a TextArea Renderer. Items 4, 5, and 6 are all Spark components encapsulatede in an MX tag so that they display in the DataGrid. They are all NumericSteppers. Items 7 to n are all TextInput Renderers. All Renderers I've built are in components wrapped by the s:MXDataGridItmeRenderer tags.

       

      Since I can't edit 0 or 1, I start my cursor in 2. I edit that cell and tab to the next cell. I then edit that but can't seem to get the tab to go to item 4, 5 or 6 (my numericsteppers). The cursor skips to the next TextInput field (when it behaves at all).

       

      I tried forcing the code by adding a DataGridEvent Listener and moving the cursor as follows:

       

                  protected function datagridEvent(event:DataGridEvent):void {
                      if(event.reason == DataGridEventReason.NEW_COLUMN) {
                          columnIndex:int = event.columnIndex;
                          rowIndex:int = event.rowIndex;       
                          movieEntryGrid.editedItemPosition(columnIndex + 1, rowIndex);

           }}

       

      That seems to ensure that at least my tabs run horizontally (I'll deal with new rows next) but it still skips the NumericSteppers and only moves the cursor to any editable column that is not a NumericStepper. Can someone help me understand how to make this work?

        • 1. Re: DataGrid Tab Order Problems
          Flex harUI Adobe Employee

          Show the code for the NS editor.  And the DataGridColumn definition for

          those columns

          • 2. Re: DataGrid Tab Order Problems
            alinator11 Level 2

            Thanks for the reply. Here's the code for the NumericSteppers AND the DataGridColumn declaration relevant to them:

             

                        <mx:DataGridColumn dataField="length"
                                           headerText="Seconds"                              
                                           rendererIsEditor="true">           
                            <mx:itemRenderer>
                                <fx:Component>
                                    <s:MXDataGridItemRenderer height="100">
                                        <s:NumericStepper minimum="1" maximum="72000"
                                                          width="75"
                                                          horizontalCenter="5"
                                                          verticalCenter="5"/>
                                    </s:MXDataGridItemRenderer>
                                </fx:Component>
                            </mx:itemRenderer>
                        </mx:DataGridColumn>

             

            While you did not ask for it, here's more info just in case there are implications therein. The columns that do not have a NumericStepper and which seem to work with my tab order look like this:

             

                        <mx:DataGridColumn dataField="description"
                                           headerText="Description"
                                           editable="true"
                                           itemRenderer="tv.socialkast.upload.DescriptionRenderer"
                                           rendererIsEditor="true"/>

             

            Here is an example of a currenty very simple editor for cases that are not NS:

             

            <s:MXDataGridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
                                      xmlns:s="library://ns.adobe.com/flex/spark"
                                      xmlns:mx="library://ns.adobe.com/flex/mx"
                                      focusEnabled="true">
                <s:TextArea editable="true" width="100" height="100"/>
            </s:MXDataGridItemRenderer>

             

            If not the NS renderer or the TextArea renderer, it's a TextInput in a differnet renderer.

            • 3. Re: DataGrid Tab Order Problems
              alinator11 Level 2

              I noticed something else strange about it. It seems that perhaps the tabs are moving, but the focus is not. Here's why I say that.

               

              • Put cursor in item 2 which is a TextInput, edit it and hit tab.
              • Cursor moves to column 3 which is a TextArea. Edit it and hit tab.
              • Cursor stays in column 3 (used to disappear). Should go to column 4 which is a stepper.
              • Hit tab again and cursor will still be in column 3 appearing to wait for an edit when it should now be in column 5 which is also a stepper.
              • Hit tab again and the cursor will now be in column 6 and waiting for editing of the TextInput in that column.

               

              Thanks again for any help you can give.

               

              Cheers,

              Al

              • 4. Re: DataGrid Tab Order Problems
                Flex harUI Adobe Employee

                Again, it would help to see your code.  MXDataGridItemRenderer expects the

                focusable control to have the id="editor"

                • 5. Re: DataGrid Tab Order Problems
                  alinator11 Level 2

                  Sorry. I thought I had provided what you asked for. Thanks for your help. After much fiddling, here's the entire code for the DataGrid.

                   

                  <?xml version="1.0" encoding="utf-8"?>
                  <s:Group 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[
                              import flash.events.Event;
                             
                              import mx.controls.Alert;
                              import mx.events.DataGridEvent;
                              import mx.events.DataGridEventReason;

                   

                              private function releaseDateFormat(item:Object, column:DataGridColumn):String {
                                  return releaseDateFormatter.format(item[column.dataField]);
                              }
                              /*
                              commented in and out for debugging - doubt this method is needed based on forum help
                              protected function datagridEvent(event:DataGridEvent):void {
                                  var totalColumns:int = movieEntryGrid.columnCount;
                                  var totalRows:int = movieEntryGrid.rowCount;
                                  if(event.reason == DataGridEventReason.NEW_COLUMN) {
                                      var columnIndex:int = event.columnIndex;
                                      var rowIndex:int = event.rowIndex;               
                                     
                                      movieEntryGrid.editedItemPosition(columnIndex + 1, rowIndex);
                                  }
                                  if(event.reason == DataGridEventReason.NEW_ROW) {
                                      columnIndex = event.columnIndex;
                                      rowIndex = event.rowIndex;
                                      //implement once I figure out the movement in columns...
                                  }
                              }
                              */
                          ]]>       
                      </fx:Script>   
                         
                      <fx:Declarations>
                          <!-- Temp data object until I load the xml from server via SOAP call -->
                          <s:ArrayCollection id="arrayCollection">
                              <s:source>               
                                  <fx:Array>                   
                                      <fx:Object name="01234.mp4" title="" description="" length="1" bitrate="1" releaseDate="" ageRestriction="0" size=""/>
                                      <fx:Object name="43210.mp4" title="" description="" length="1" bitrate="1" releaseDate="" ageRestriction="0" size=""/>                   
                                  </fx:Array>
                              </s:source>
                          </s:ArrayCollection>
                         
                          <mx:DateFormatter id="releaseDateFormatter"
                                            formatString="YYYY/MM/DD"/>       
                      </fx:Declarations>   
                      <s:layout>
                          <s:VerticalLayout/>
                      </s:layout>
                      <s:Label text="Video Data" styleName="addHeader"/>
                      <mx:DataGrid id="movieEntryGrid" dataProvider="{arrayCollection}"                        
                                           sortableColumns="false"
                                           editable="true" fontSize="11">
                          <mx:columns>
                              <mx:DataGridColumn id="idColumn" dataField="id"
                                                 headerText="Movie ID"                              
                                                 editable="false"/>           
                              <mx:DataGridColumn id="nameColumn" dataField="name"
                                                 headerText="Movie Name"
                                                 editable="false"/>
                                                
                              <mx:DataGridColumn id="titleColumn" dataField="title"
                                                 headerText="Movie Title"
                                                 editable="true" />
                             
                              <mx:DataGridColumn id="descriptionColumn" dataField="description"
                                                 headerText="Movie Description"
                                                 editable="true"
                                                 itemRenderer="tv.socialkast.upload.DescriptionRenderer"
                                                 rendererIsEditor="true" />
                             
                              <mx:DataGridColumn id="durationColumn" dataField="length"
                                                 headerText="Seconds"                              
                                                 rendererIsEditor="true"
                                                 editable="true">           
                                  <mx:itemRenderer>
                                      <fx:Component>
                                          <s:MXDataGridItemRenderer height="100">
                                              <s:NumericStepper id="secStepper" minimum="1" maximum="72000"
                                                                width="75"
                                                                horizontalCenter="5"
                                                                verticalCenter="5"/>
                                          </s:MXDataGridItemRenderer>
                                      </fx:Component>
                                  </mx:itemRenderer>
                              </mx:DataGridColumn>   
                             
                              <mx:DataGridColumn id="bitColumn" dataField="bitrate"
                                                 headerText="Bit Rate"
                                                 rendererIsEditor="true"
                                                 editable="true">
                                  <mx:itemRenderer>
                                      <fx:Component>
                                          <s:MXDataGridItemRenderer height="100">
                                              <s:NumericStepper id="bitStepper" minimum="1" maximum="5000"
                                                                width="75"
                                                                horizontalCenter="5"
                                                                verticalCenter="5"/>
                                          </s:MXDataGridItemRenderer>
                                      </fx:Component>
                                  </mx:itemRenderer>       
                              </mx:DataGridColumn>

                   

                              <mx:DataGridColumn id="releaseDateColumn" dataField="releaseDate"
                                                 headerText="Release Date"
                                                 editable="true"
                                                 labelFunction="releaseDateFormat"/>
                             
                              <mx:DataGridColumn id="ageRestrictColumn" dataField="ageRestriction"
                                                 headerText="Minimum Age"
                                                 rendererIsEditor="true"
                                                 editable="true">
                                  <mx:itemRenderer>
                                      <fx:Component>
                                          <s:MXDataGridItemRenderer height="100">
                                              <s:NumericStepper id="ageStepper" minimum="1" maximum="125"
                                                                width="75"
                                                                horizontalCenter="5"
                                                                verticalCenter="5"/>
                                          </s:MXDataGridItemRenderer>
                                      </fx:Component>
                                  </mx:itemRenderer>
                              </mx:DataGridColumn>
                                                
                              <mx:DataGridColumn id="sizeColumn" dataField="size"
                                                 headerText="Size in MB"
                                                 editable="true"/>                              
                             
                          </mx:columns>
                      </mx:DataGrid>
                  </s:Group>

                   

                  I have removed all TextInput custom Renderers, leaving only the inline Renderers you see here plus one custom Renderer (below) until I get this tabbing and editing function working. This is "DescriptionRenderer.mxml":

                   

                  <?xml version="1.0" encoding="utf-8"?>
                  <s:MXDataGridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
                                            xmlns:s="library://ns.adobe.com/flex/spark"
                                            xmlns:mx="library://ns.adobe.com/flex/mx"
                                            focusEnabled="true">
                      <s:TextArea id="editor" editable="true" width="100" height="100" focusEnabled="true" enabled="true"/>
                  </s:MXDataGridItemRenderer>

                  • 6. Re: DataGrid Tab Order Problems
                    alinator11 Level 2

                    Still no answer... I'm trying something different now with different results.

                     

                    In the following code, I tab once and get the first editable column (yippee!). I tab again and get the entire row selected. Why will it not tab to the next tab index? It tabs to 1 fine, but then all subsequent tabs just highlight the row. This has taken days. I would think that just writting these rows in line would be enough to get tabs working as expected. But, even as I've tried to brute force it to tab, I can't get focus to change.

                     

                        <mx:DataGrid id="movieEntryGrid" dataProvider="{arrayCollection}"                        
                                             sortableColumns="false"
                                             editable="true" fontSize="11">
                            <mx:columns>
                                <mx:DataGridColumn id="idColumn" dataField="id"
                                                   headerText="Movie ID"                              
                                                   editable="false"/>           
                                <mx:DataGridColumn id="nameColumn" dataField="name"
                                                   headerText="Movie Name"
                                                   editable="false"/>
                                                  
                                <mx:DataGridColumn id="titleColumn" dataField="title"
                                                   headerText="Movie Title"
                                                   editable="true"
                                                   rendererIsEditor="true"
                                                   editorDataField="value">
                                    <mx:itemRenderer>
                                        <fx:Component>
                                            <s:MXDataGridItemRenderer>                       
                                                <s:TextArea id="titleRend" height="100" width="100" editable="true" focusEnabled="true" tabEnabled="true" tabIndex="1"/>
                                            </s:MXDataGridItemRenderer>
                                        </fx:Component>
                                    </mx:itemRenderer>
                                </mx:DataGridColumn>
                               
                                <mx:DataGridColumn id="descriptionColumn" dataField="description"
                                                   headerText="Movie Description"
                                                   editable="true"                              
                                                   rendererIsEditor="true" editorDataField="value">           
                                    <mx:itemRenderer>
                                        <fx:Component>
                                            <s:MXDataGridItemRenderer>                       
                                                <s:TextArea id="descriptRend" height="100" width="100" editable="true" focusEnabled="true" tabEnabled="true" tabIndex="2"/>
                                            </s:MXDataGridItemRenderer>
                                        </fx:Component>
                                    </mx:itemRenderer>
                                </mx:DataGridColumn>
                            </mx:columns>
                        </mx:DataGrid>

                    • 7. Re: DataGrid Tab Order Problems
                      Flex harUI Adobe Employee

                      The id's of your numericstepper and textareas are not "editor"

                      • 8. Re: DataGrid Tab Order Problems
                        alinator11 Level 2

                        I tried that (again) and still the same result.

                         

                         

                         

                                    ...<mx:DataGridColumn id="titleColumn" dataField="title"
                                                       headerText="Movie Title"
                                                       editable="true"
                                                       rendererIsEditor="true"
                                                       editorDataField="value">
                                        <mx:itemRenderer>
                                            <fx:Component>
                                                <s:MXDataGridItemRenderer>                       
                                                    <s:TextArea id="editor" height="100" width="100" editable="true" focusEnabled="true" tabEnabled="true" tabIndex="1"/>
                                                </s:MXDataGridItemRenderer>
                                            </fx:Component>
                                        </mx:itemRenderer>
                                    </mx:DataGridColumn>
                                   
                                    <mx:DataGridColumn id="descriptionColumn" dataField="description"
                                                       headerText="Movie Description"
                                                       editable="true"                              
                                                       rendererIsEditor="true" editorDataField="value">           
                                        <mx:itemRenderer>
                                            <fx:Component>
                                                <s:MXDataGridItemRenderer>                       
                                                    <s:TextArea id="editor" height="100" width="100" editable="true" focusEnabled="true" tabEnabled="true" tabIndex="2"/>
                                                </s:MXDataGridItemRenderer>
                                            </fx:Component>
                                        </mx:itemRenderer>
                                    </mx:DataGridColumn>...

                        • 9. Re: DataGrid Tab Order Problems
                          Flex harUI Adobe Employee

                          Looks like our documentation and examples are in error.  You have to add

                           

                          implements="mx.managers.IFocusManagerComponent"

                           

                          To each MXDataGridItemRenderer tag

                          • 10. Re: DataGrid Tab Order Problems
                            alinator11 Level 2

                            Thanks I tried that too and got the same result. I've also added other tag attributes to this latest rendition to try to get it to work. No matter what I do, it focuses on the first editable column (as expected) and then when I tab off that column, it just highlights the row without moving the cursor out of the editable cell and to the next editable cell. Along with the IFocusManagerComponent, I also declared implementation of IDropInListItemRenderer when that did not work. With or without any of these declarations, I get the same result: a blinking cursor sitting in the first editable cell and a highlight of the row I'm on when I hit tab and that's the best I can seem to do.

                             

                            ...            <mx:DataGridColumn id="titleColumn" dataField="title"
                                                           headerText="Movie Title"                              
                                                           rendererIsEditor="true"
                                                           editorDataField="value">
                                            <mx:itemRenderer>   
                                                <fx:Component>                   
                                                    <s:MXDataGridItemRenderer implements="mx.controls.listClasses.IDropInListItemRenderer,mx.managers.IFocusManagerComp onent" hasFocusableChildren="true">                       
                                                        <s:TextArea id="editor" height="100" width="100" editable="true" focusEnabled="true" tabEnabled="true" tabIndex="1"/>
                                                    </s:MXDataGridItemRenderer>
                                                </fx:Component>
                                            </mx:itemRenderer>
                                        </mx:DataGridColumn>...

                            • 11. Re: DataGrid Tab Order Problems
                              Flex harUI Adobe Employee

                              Attached is the test case I tried. It worked as expected.

                              • 12. Re: DataGrid Tab Order Problems
                                alinator11 Level 2

                                Thanks. I don't see any attachment. I am excited to see an example that

                                works though!

                                 

                                Cheers,

                                Al

                                • 13. Re: DataGrid Tab Order Problems
                                  Flex harUI Adobe Employee

                                  <?xml version="1.0" encoding="utf-8"?>

                                  <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"

                                                 xmlns:s="library://ns.adobe.com/flex/spark"

                                                 xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955"

                                  minHeight="600">

                                      <fx:Script>   

                                          <![CDATA[

                                              import flash.events.Event;

                                               

                                              import mx.controls.Alert;

                                              import mx.events.DataGridEvent;

                                              import mx.events.DataGridEventReason;

                                               

                                              private function releaseDateFormat(item:Object,

                                  column:DataGridColumn):String {

                                                  return releaseDateFormatter.format(item[column.dataField]);

                                              }

                                              /*

                                              commented in and out for debugging - doubt this method is needed

                                  based on forum help

                                              protected function datagridEvent(event:DataGridEvent):void {

                                              var totalColumns:int = movieEntryGrid.columnCount;

                                              var totalRows:int = movieEntryGrid.rowCount;

                                              if(event.reason == DataGridEventReason.NEW_COLUMN) {

                                              var columnIndex:int = event.columnIndex;

                                              var rowIndex:int = event.rowIndex;

                                               

                                              movieEntryGrid.editedItemPosition(columnIndex + 1, rowIndex);

                                              }

                                              if(event.reason == DataGridEventReason.NEW_ROW) {

                                              columnIndex = event.columnIndex;

                                              rowIndex = event.rowIndex;

                                              //implement once I figure out the movement in columns...

                                              }

                                              }

                                              */

                                          ]]>       

                                      </fx:Script>  

                                       

                                      <fx:Declarations>

                                          <!-- Temp data object until I load the xml from server via SOAP call

                                  -->

                                          <s:ArrayCollection id="arrayCollection">

                                              <s:source>

                                                  <fx:Array>

                                                      <fx:Object name="01234.mp4" title="" description=""

                                  length="1" bitrate="1" releaseDate="" ageRestriction="0" size=""/>

                                                      <fx:Object name="43210.mp4" title="" description=""

                                  length="1" bitrate="1" releaseDate="" ageRestriction="0" size=""/>

                                                  </fx:Array>

                                              </s:source>

                                          </s:ArrayCollection>

                                           

                                          <mx:DateFormatter id="releaseDateFormatter"

                                                            formatString="YYYY/MM/DD"/>

                                      </fx:Declarations>

                                      <s:layout>

                                          <s:VerticalLayout/>

                                      </s:layout>

                                      <s:Label text="Video Data" styleName="addHeader"/>

                                      <mx:DataGrid id="movieEntryGrid" dataProvider=""

                                                   sortableColumns="false"

                                                   editable="true" fontSize="11">

                                          <mx:columns>

                                              <mx:DataGridColumn id="idColumn" dataField="id"

                                                                 headerText="Movie ID"

                                                                 editable="false"/>

                                              <mx:DataGridColumn id="nameColumn" dataField="name"

                                                                 headerText="Movie Name"

                                                                 editable="false"/>

                                               

                                              <mx:DataGridColumn id="titleColumn" dataField="title"

                                                                 headerText="Movie Title"

                                                                 editable="true" />

                                               

                                              <mx:DataGridColumn id="descriptionColumn"

                                  dataField="description"

                                                                 headerText="Movie Description"

                                                                 editable="true"

                                                                 rendererIsEditor="true" >

                                                  <mx:itemRenderer>

                                                      <fx:Component>

                                                          <s:MXDataGridItemRenderer

                                  implements="mx.managers.IFocusManagerComponent">

                                                              <s:TextArea id="editor" editable="true"

                                  width="100" height="100" focusEnabled="true" enabled="true"/>

                                                          </s:MXDataGridItemRenderer>

                                                      </fx:Component>

                                                  </mx:itemRenderer>

                                              </mx:DataGridColumn>

                                               

                                              <mx:DataGridColumn id="durationColumn" dataField="length"

                                                                 headerText="Seconds"

                                                                 rendererIsEditor="true"

                                                                 editable="true">

                                                  <mx:itemRenderer>

                                                      <fx:Component>

                                                          <s:MXDataGridItemRenderer height="100"

                                  implements="mx.managers.IFocusManagerComponent">

                                                              <s:NumericStepper id="editor" minimum="1"

                                  maximum="72000"

                                                                                width="75"

                                                                                horizontalCenter="5"

                                                                                verticalCenter="5"/>

                                                          </s:MXDataGridItemRenderer>

                                                      </fx:Component>

                                                  </mx:itemRenderer>

                                              </mx:DataGridColumn>

                                               

                                              <mx:DataGridColumn id="bitColumn" dataField="bitrate"

                                                                 headerText="Bit Rate"

                                                                 rendererIsEditor="true"

                                                                 editable="true">

                                                  <mx:itemRenderer>

                                                      <fx:Component>

                                                          <s:MXDataGridItemRenderer height="100"

                                  implements="mx.managers.IFocusManagerComponent">

                                                              <s:NumericStepper id="editor" minimum="1"

                                  maximum="5000"

                                                                                width="75"

                                                                                horizontalCenter="5"

                                                                                verticalCenter="5"/>

                                                          </s:MXDataGridItemRenderer>

                                                      </fx:Component>

                                                  </mx:itemRenderer>

                                              </mx:DataGridColumn>

                                               

                                              <mx:DataGridColumn id="releaseDateColumn"

                                  dataField="releaseDate"

                                                                 headerText="Release Date"

                                                                 editable="true"

                                                                 labelFunction="releaseDateFormat"/>

                                               

                                              <mx:DataGridColumn id="ageRestrictColumn"

                                  dataField="ageRestriction"

                                                                 headerText="Minimum Age"

                                                                 rendererIsEditor="true"

                                                                 editable="true">

                                                  <mx:itemRenderer>

                                                      <fx:Component>

                                                          <s:MXDataGridItemRenderer height="100"

                                  implements="mx.managers.IFocusManagerComponent">

                                                              <s:NumericStepper id="editor" minimum="1"

                                  maximum="125"

                                                                                width="75"

                                                                                horizontalCenter="5"

                                                                                verticalCenter="5"/>

                                                          </s:MXDataGridItemRenderer>

                                                      </fx:Component>

                                                  </mx:itemRenderer>

                                              </mx:DataGridColumn>

                                               

                                              <mx:DataGridColumn id="sizeColumn" dataField="size"

                                                                 headerText="Size in MB"

                                                                 editable="true"/>

                                               

                                          </mx:columns>

                                      </mx:DataGrid>

                                  </s:Application

                                  • 14. Re: DataGrid Tab Order Problems
                                    alinator11 Level 2

                                    Once I got rid of the web formatting, this worked great. I have not gone through it line by line to see what is different yet but, something must be as this works while every other attempt did not. Thanks so much!