3 Replies Latest reply on May 11, 2010 2:54 AM by uzairseedat

    Problem with textInput ItemRenderer

    uzairseedat

      I have created a custom renderer for DataGridColumn  which is built on a VBox and a TextInput inside it. The renderer displays fine on the datagrid but as soon as I type a character in the textInput, the character displays and the focus (with caret) is shifted out of the textInput (maybe to the grid's row.

      Why am I not using the textInput directly as renderer is because of some sizing issue in DataGrid row.

       

      This is the code for renderer:

       

      ////////////////////////////////////////////////////////////////////////////////////////// ////////////////////////////////////////////////////////////////////////////////////////// ////////////

       

      <?xml version="1.0" encoding="utf-8"?>
      <mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" implements="mx.managers.IFocusManagerComponent"
          width="100%" height="100%"
          horizontalAlign="center" verticalAlign="middle"
          paddingLeft="5" paddingRight="5"
          horizontalScrollPolicy="off" verticalScrollPolicy="off">
         
          <mx:Script>
              <![CDATA[
                  [Bindable]
                  public var text:String;
                 
                  [Bindable]
                  public var inputData:Object;
                 
                  override public function set data(value:Object):void
                  {
                      this.inputData = value;
                      this.text = value.label;
                  }
                 
                  override public function get focusEnabled():Boolean
                  {
                      return true;
                  }
                 
                  override public function get mouseFocusEnabled():Boolean
                  {
                      return true;
                  }
                 
                  override public function setFocus():void
                  {
                      this.txtLabel.setFocus();
                  }
                 
                  protected function updateValue():void
                  {
                      this.inputData.label = txtLabel.text;
                      this.text = txtLabel.text;
                  }
              ]]>
          </mx:Script>
         
          <mx:TextInput id="txtLabel" width="80%"
              text="{this.text}" change="updateValue()"
              textAlign="left" />
         
      </mx:VBox>

       

      ////////////////////////////////////////////////////////////////////////////////////////// ////////////////////////////////////////////////////////////////////