3 Replies Latest reply on Jun 20, 2009 12:00 AM by leybniz

    Trying to focus a TextInput field in header renderer

    crissy84 Level 1

      Hello,

      I have an AdvancedDatagrid and a button that, when clicked, adds a new column to the end of the datagrid.  I have a custom header rendering in these new columns that contains a TextInput.  Everything is working good, except, I cannot get that TextInput in the header renderer to be automatically in focus after the column is added.

      Right after the 'add column' button is clicked, I want the user to be able to start typing in the header without having to click it with the mouse, but it doesn't work.  The cursor is not in the TextInput.  However, if I start typing (you don't see anyhting happening), I have confirmed that the field's value is actually taking the characters I'm typing.  Very weird. 

      I've tried everything I can think of.  I've tried setting focus with callLater, in diferent event handlers, validateNow(), etc.  

       

      One clue-

      The focus will work correctly after I add enough columns that they go off the edge of the frame and the horizontal scrollbar appears and scrolls over.

       

       

       

      <mx:headerRenderer>

           <mx:Component>

                <mx:VBox horizontalScrollPolicy="off" verticalScrollPolicy="off">

                     <mx:TextInput

                          width="100%"

                          id="headerInput"

                          creationComplete="headerInput.setFocus();"

                          />

                </mx:VBox>

           </mx:Component>

      </mx:headerRenderer>

       

       

       

       

       

          public function addCol():void

          {

          var col:MyCustomCol = new MyCustomCol();

          var cols:Array = this.grid.columns;

          cols.push(col);

          this.grid.columns = cols;

          this.grid.validateNow();

          // Scroll the horizontal bar to the right edge to ensure the newly added column is visible

          grid.horizontalScrollPosition = (grid.columns.length-1);

          }              

       

      Any ideas??

       

      Thank You

        • 1. Re: Trying to focus a TextInput field in header renderer
          leybniz Level 4

          put following script tag into your custom header renderer and you are done, as well you could remove redundant setFocus from creationcomplete.

           

          <mx:Script>
          <![CDATA[
           
            override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void {
             super.updateDisplayList(unscaledWidth, unscaledHeight);

             headerInput.setFocus();
            }
           
          ]]>
          </mx:Script>                 

           

          If you feel this message answers your question or helps, please mark it respectively

          • 2. Re: Trying to focus a TextInput field in header renderer
            crissy84 Level 1

            Thank you so much... that worked!

            Just FYI... it turns out I have to keep that redundant setFocus() in there.  It's odd, but having only your stuff gave me the opposite effect I was having before.  It would now work ONLY when the added column fit into the grid's frame without having to auto-scroll to the right.  When the column falls outside the viewable area and it scrolls over after the add, without the other setFocus(), then it doesn't focus correctly in that particular situation.  If I have the redundant  setFocus(), then it seems to work under all scenarios.  A little messy, but problem solved.

             

            Thanks again!

            • 3. Re: Trying to focus a TextInput field in header renderer
              leybniz Level 4

              Hmm, nice to know, thanks Crissy.