0 Replies Latest reply on Oct 14, 2009 10:40 AM by masterbuilder42

    Tabbing into editable DataGrid

    masterbuilder42

      I have been able to find nothing on a solution to this issue in the web although I did find one person that indicated the problem is with flex.

       

      When you create an Editable DataGrid in which not all the columns are editable, it is necessary to mouse-click into one of the editable fields before you can tab through the fields.  Here is some code:

       

            <mx:HBox horizontalGap="10">
       
              <!--=======================================-->
              <!-- Payment Type. Enables Check           -->
              <!-- Number/Name input if type is "Check". -->
              <!--=======================================-->
              <mx:VBox verticalGap="0">
                <mx:Label text="Payment Type" fontWeight="bold" textAlign="left"/>
                <csm:ComboBox id="cbxPaymentType" width="95" showDisabled="false"
                              dataProvider="{DP_PAYMENT_TYPES}" change="onPaymentTypeChange()"/>
              </mx:VBox>
       
              <!--=====================================-->
              <!-- Check Number - Check payments only. -->
              <!--=====================================-->
              <mx:VBox id="vbxCheckNumber" verticalGap="0">
                <mx:Label text="Check Number" fontWeight="bold"/>
                <csm:TextInput id="txtCheckNumber" width="125"/>
              </mx:VBox>
       
              <!--======================================-->
              <!-- Name on Check - Check payments only. -->
              <!--======================================-->
              <mx:VBox id="vbxCheckName" verticalGap="0">
                <mx:Label text="Name on Check" fontWeight="bold"/>
                <csm:TextInput id="txtCheckName" width="390"/>
              </mx:VBox>
       
              <!--==================================================-->
              <!-- Payment Amount - Invalid amount translates to 0. -->
              <!--==================================================-->
              <mx:VBox verticalGap="0">
                <mx:Label text="Amount" fontWeight="bold"/>
                <csm:AmountField id="amtPaymentAmt" text="0.00" textAlign="right"/>
              </mx:VBox>
            </mx:HBox>

            <!--===============================-->
            <!-- Add/Remove Payment(s) Buttons -->
            <!--===============================-->
            <mx:HBox width="100%">
              <mx:Spacer width="100%"/>
              <mx:Button label="Add Payment"       click="addPayment()"/>
              <mx:Button label="Remove Payment(s)" click="removePayments()"/>
              <mx:Spacer width="100%"/>
            </mx:HBox>
          </mx:VBox> 

          <!--========================-->
          <!-- Payment Item Data Grid -->
          <!--========================-->
          <mx:DataGrid id="dgPayments" dataProvider="{paymentList}" width="100%" height="100%"
                       editable="true" allowMultipleSelection="true" focusEnabled="false"
                       itemFocusOut      = "updateAmounts()"
                       dataChange        = "updateAmounts()"
                       itemEditBeginning = "itemEditBegin(event)">
            <mx:columns>
              <mx:DataGridColumn dataField="type"   headerText="Payment Type"  width="100" editable="false" labelFunction="paymentTypeLabel"/>
              <mx:DataGridColumn dataField="number" headerText="Check Number"  width="130"/>
              <mx:DataGridColumn dataField="name"   headerText="Name on Check" width="400"/>

              <!--==========================================-->
              <!-- Amount field is editable and is rendered -->
              <!-- to format the input as a dollar amount.  -->
              <!--==========================================-->
              <mx:DataGridColumn dataField="amount" headerText="Amount" width="136" textAlign="right"
                                 itemEditor="csm.controls.AmountField" editorDataField="amount">
                <mx:itemRenderer>
                  <mx:Component>
                    <mx:Label textAlign="right" text="{outerDocument.amtFormatter.format(data.amount)}"/>
                  </mx:Component>
                </mx:itemRenderer>
              </mx:DataGridColumn>
            </mx:columns>
          </mx:DataGrid>

      Until the mouse is clicked in a field in any of the 2nd, 3rd, or 4th columns, tabbing from the buttons above the DG will tab to the DG but not into the editable fields.  Once a field in the DG is clicked, then the editable fields will be included in the tab order.

       

      Does anyone know how to make the tabbing work without having to click on an editable column?