4 Replies Latest reply on Dec 22, 2010 7:10 AM by mstacey01

    Custom TextInput itemEditor not getting focus.

    mstacey01

      I have an AdvancedDataGrid that has a custom itemEditor on an amounts field. If I do an inline textInput itemEditor everything works fine, but if I separate out the textInput itemEditor into it's own component then when I click on the amounts column it doesn't seem to get focus. What happens is I click once and it appears like the text box has appeared, but there is not cursor, so I can't start typing my amount. I need to click a second time in the cell for the cursor to appear.

       

      Here are my datagrid columns:

       

      <datagrids:columns>
              <mx:AdvancedDataGridColumn dataField="Customer" headerText="Cust" editable="false"/>
              <mx:AdvancedDataGridColumn dataField="Balance" headerText="Bal" editable="false"/>
              <mx:AdvancedDataGridColumn dataField="paymentAmountString" headerText="Amount"
                                 editable="true" textAlign="right"
                                 editorDataField="amountText" itemEditor="com.ihcfs.flex.renderers.AdvancedAmountTextInputRenderer">
              </mx:AdvancedDataGridColumn>
          </datagrids:columns>

       

      Here is my custom renderer/editor, I've tried both a spark TextInput and an mx:TextInput. They both have the same behavior.

       

      <?xml version="1.0" encoding="utf-8"?>
      <s:MXAdvancedDataGridItemRenderer 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">
          <fx:Script>
              <![CDATA[
                  public var amountText:String;
              ]]>
          </fx:Script>
          <s:TextInput id="amountTextInput"
                       width="100%" height="100%"
                       textAlign="right"
                       change="amountText = amountTextInput.text;"
                       focusEnabled="true"
                       editable="true"
                       restrict="[0-9][.]"/>
      </s:MXAdvancedDataGridItemRenderer>

       

      If I do an inline item editor it works just fine, it's when I move it out to a reusable component that this behavior happens.

      Inline:

       

      <datagrids:columns>
              <mx:DataGridColumn dataField="customer" headerText="Cust"
                                 editable="false" textAlign="center"/>
              <mx:DataGridColumn dataField="balance" headerText="Bal"
                                 editable="false" textAlign="center"/>
              <mx:DataGridColumn dataField="paymentAmountString" headerText="Amount"
                                 editable="true" editorDataField="text" textAlign="right">
                  <mx:itemEditor>
                      <fx:Component>
                          <mx:TextInput width="100%" height="100%" textAlign="right"
                                        focusOut="textinput1_focusOutHandler(event)"
                                        focusIn="textinput1_focusInHandler(event)">
                              <fx:Script>
                                  <![CDATA[
                                      import mx.controls.Alert;
                                      import mx.controls.Text;
                                      import mx.events.FlexEvent;
                                      import mx.formatters.CurrencyFormatter;
                                     
                                      [Bindable]
                                      private var originalAmount:Number;
                                      private var amountFormatter:CurrencyFormatter = new CurrencyFormatter();
                                     
                                      protected function textinput1_focusOutHandler(event:FocusEvent):void
                                      {
                                          var e:TextEvent = new TextEvent("amountEntered", true);
                                          var textField:TextField = event.target as TextField;

       

                                          var newAmount:Number = 0;
                                          if(!isNaN(parseFloat(textField.text))){
                                              newAmount = parseFloat(textField.text);
                                          }
                                         
                                          e.text = new String((newAmount - originalAmount) + "");
                                         
                                          dispatchEvent(e);
                                      }

       

                                      protected function textinput1_focusInHandler(event:FocusEvent):void
                                      {
                                          var textfield:TextField = event.target as TextField;
                                          if(!isNaN(parseFloat(textfield.text))){
                                              originalAmount = parseFloat(textfield.text);
                                          } else {
                                              originalAmount = 0;
                                          }
                                      }

       

                                  ]]>
                              </fx:Script>
                          </mx:TextInput>
                         
                      </fx:Component>
                  </mx:itemEditor>
              </mx:DataGridColumn>
          </datagrids:columns>

       

      Thanks for the help!