Item should select with TAB and ENTER Key and fire the TextChange Event

7 posts, 0 answers
  1. Anand T
    Anand T avatar
    4 posts
    Member since:
    Jul 2009

    Posted 08 Aug 2013 Link to this post

    Hi Telerik Team,

         i'm using ASP>NET AJAX RadAutoCompleteBox. I set the DatasourceId its working fine. I can go through the filtered items with "UP" and "Down" keys, but I want to select an item with "TAB" and "ENTER" Key. When I hit TAB or ENTER on dropdown item it should select that item and the OnTextChanged Event should fire.
         I checked the Demo there its selecting when I hit TAB & Enter. But on my screen its not working. Is I missed or messed something.

    My code for your reference.

    Thanks,


    <telerik:RadAutoCompleteBox ID="txtPolicyNo" runat="server" Width="100px" DropDownWidth="98px" DropDownHeight="200px"       DataSourceID="edsPolicy" DataTextField="PolicyNumber" Filter="StartsWith" InputType="Text"   OnTextChanged="txtPolicyNo_TextChanged" TextSettings-SelectionMode="Single">
              <TokensSettings AllowTokenEditing="true" />
    </telerik:RadAutoCompleteBox>
                                  
     <asp:EntityDataSource ID="edsPolicy" runat="server" ConnectionString="name=PSSContainer" DefaultContainerName="PSSContainer"
               EnableFlattening="false" EntitySetName="tblPolicies" OrderBy="it.[PolicyNumber]" Select="it.[PolicyNumber]"
               GroupBy="it.[PolicyNumber]"
               Where="it.Chapter = @ChapterCode and it.IsPolicy = @IsPolicyOrProcedure">
               <WhereParameters>
                          <asp:ControlParameter ControlID="ddlChapter" DbType="String"
                               DefaultValue="" Name="ChapterCode" PropertyName="Text" />
                           <asp:ControlParameter ControlID="hfServiceType" DbType="Boolean"
                               DefaultValue="" Name="IsPolicyOrProcedure" PropertyName="Value" />
                </WhereParameters>
     </asp:EntityDataSource>



    protected void txtPolicyNo_TextChanged(object sender, Telerik.Web.UI.AutoCompleteTextEventArgs e)
    {
         try
             {
                   string PolicyNo = txtPolicyNo.Text;

                    if (PolicyNo.Length > 0)
                    {
                        //PolicyNo = PolicyNo.Substring(0, PolicyNo.Length - 2);
                        PolicyNo = PolicyNo.Replace("; ", "");
    '
    '
    '
    '
                    }
                     
              }
              catch (Exception ex)
              {
                   
              }
    }
  2. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 09 Aug 2013 Link to this post

    Hi Anand,

    Please try the following code I wrote which works fine at my end.

    ASPX:
    <telerik:RadAutoCompleteBox ID="RadAutoCompleteBox1" runat="server" Width="100px"
        DropDownWidth="98px" DropDownHeight="200px" DataSourceID="SqlDataSource1" DataTextField="ContactName"
        Filter="StartsWith" InputType="Text" TextSettings-SelectionMode="Single" OnTextChanged="RadAutoCompleteBox1_TextChanged">
        <TokensSettings AllowTokenEditing="true" />
    </telerik:RadAutoCompleteBox>
    <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
        SelectCommand="select ContactName from [Customers]"></asp:SqlDataSource>

    Hope this helps,
    Shinu.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Anand T
    Anand T avatar
    4 posts
    Member since:
    Jul 2009

    Posted 09 Aug 2013 Link to this post

    Hi Shinu,
      
        Thanks for your interested to help me. But your code seems like my code only thing is "SqlDataSource" only changed. So you trying to say my SqlDataSource is incorrect. But I can getting data from that. It's working fine. But what I need is, If I'm go through the filtered items with "UP" and "Down" keys on one of item I'm hitting "TAB" OR "ENTER" Key it's not selecting that particular item in RadAutoCompleteBox. 

       I used the below javascript code its selecting the Top item on field when i hit Tab/Enter. But I want exactly on which item I'm hitting Tab/Enter should select.

    Select Top Item On Field Enter / Tab

    <script type="text/javascript">
    var
    originalHandler = Telerik.Web.UI.RadAutoCompleteBox.prototype._onBlur;
    Telerik.Web.UI.RadAutoCompleteBox.prototype._onBlur = function(e) {
        if (!this._dropDown._shouldBlurAutoComplete) {
            return;
        }
                 
        var item = this._dropDown.getItem(0);
                 
        if (item) {
            this.get_inputElement().value = "";
            this._addEntryFromItem(item);
        }
                 
        originalHandler.apply(this, [e]);
    }
    </script>
  5. BesT LoLo
    BesT LoLo avatar
    11 posts
    Member since:
    Dec 2013

    Posted 10 Apr 2014 Link to this post

    Hi Anand:
    I'm facing your same problem about firing textchanged event after pressing ENTER key, so did you found any solution?
  6. Plamen
    Admin
    Plamen avatar
    2730 posts

    Posted 11 Apr 2014 Link to this post

    Hi,

    Would you please elaborate a little bit the scenario you are trying to achieve and why to you need the client text changed event so we could inspect the scenario and be more helpful.

    Please share the exact mark up of the control that you are using so we could inspect it too.

    Regards,
    Plamen
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  7. BesT LoLo
    BesT LoLo avatar
    11 posts
    Member since:
    Dec 2013

    Posted 12 Apr 2014 in reply to Plamen Link to this post

    Hi Plamen:
    Thanks for replaying to my post....
    I'm using RadAutoCompleteBox inside RadGrid, when user hits TAB key it's okay, but i need to include ENTER key too.
    I tried to make some js scripts but i didn't work out, any way below you'll find my control:
     <telerik:GridTemplateColumn HeaderText="اسم المادة" UniqueName="ArName" ItemStyle-HorizontalAlign="Center" HeaderStyle-HorizontalAlign="Center" FooterStyle-HorizontalAlign="Center"><br>                                <ItemTemplate><br>                                    <telerik:RadAutoCompleteBox ID="MatterName_Txt" runat="server" DataSourceID="Matter_DS" DataTextField="ArName" DataValueField="ID" InputType="Text" Width="300px" TokensSettings-AllowTokenEditing="false" AutoPostBack="true" TextSettings-SelectionMode="Single" EnableClientFiltering="true" DropDownWidth="280px"><br>                                    </telerik:RadAutoCompleteBox><br>                                </ItemTemplate><br>                            </telerik:GridTemplateColumn>
    JS Script:
    <script type="text/javascript"><br>        var handler = Telerik.Web.UI.RadAutoCompleteBox.prototype._onKeyDown;<br>        Telerik.Web.UI.RadAutoCompleteBox.prototype._onKeyDown = function (e) {<br>            handler.apply(this, [e]);<br>            if (e.keyCode == Sys.UI.Key.enter) {<br>                this._onBlur();<br>            }<br>        }<br>    </script>
    Thanks for trying to help me :)
  8. Plamen
    Admin
    Plamen avatar
    2730 posts

    Posted 17 Apr 2014 Link to this post

    Hi BesT,

    Unfortunately at the moment the control does not support such functionality on Enter key down so in your case I would recommend you to override the default KeyDown function and add a trigger function for the textchanged event as in the code below so you don't loos from the current implemented functionality:
    <script type="text/javascript">
               function OnClientTextChanged(sender, args) {
                   console.log("OnClientTextChanged   -"+args.get_text());
               }
     
               Telerik.Web.UI.RadAutoCompleteBox.prototype._onKeyDown = function (e) {
                 
                   var that = this,
                       dropDown = this._dropDown,
                       activeItem,
                       appendEntryCallback = function(that, isScrollingDown) {
                           that._appendEntryText(activeItem.get_text(), false);
                           activeItem.ensureVisible(isScrollingDown);
                           that._dropDown.position(that._getDropDownPositionInfo());
                       };
     
                   if (e.keyCode != Sys.UI.Key.backspace && this._selectedToken) {
                       this._clearTokenSelection();
                   }
     
                   setTimeout(function() { that._updateInputSize(); }, 1);
     
                   switch(e.keyCode) {
                       case Sys.UI.Key.up:
                           {
                               e.preventDefault();
                               dropDown.highlightPrev();
                               activeItem = dropDown.get_activeItem();
     
                               if (activeItem) {
                                   appendEntryCallback(this, false);
                               }
                           }
                           break;
                       case Sys.UI.Key.down:
                           {
                               e.preventDefault();
                               dropDown.highlightNext();
                               activeItem = dropDown.get_activeItem();
                            
                               if (activeItem) {
                                   appendEntryCallback(this, true);
                               }
                           }
                           break;
                       case Sys.UI.Key.enter:
                           {
                               var item = this._dropDown.select(),
                                   input = this.get_inputElement(),
                                   entry;
     
                               e.preventDefault();
                            
                               if (item) {
                                   this._addEntryFromItem(item);
                               } else {
                                   var newText = this.get_searchString();
     
                                   if (newText.length == 0) {
                                       return ;
                                   }
                                    
                                   if (this.get_allowCustomEntry() && !this._isInSingleSelectionMode()) {
                                       if (this._isInTokenMode()) {
                                           entry = this.createEntry(newText);
                                           this._addEntry(entry);
                                       } else {
                                           var endsWidthDelimiter = false,
                                               delimiter = this.get_delimiter(),
                                               text = this.get_text();
                    
                                           if (this._getIsDoubleSymbolDelimiter()) {
                                               endsWidthDelimiter = this._endsWith(text, delimiter.charAt(0)) ||
                                                                   this._endsWith(text, delimiter.charAt(1));
     
                                               if(!endsWidthDelimiter) {
                                                   input.value += delimiter.charAt(0) + " ";
                                               }
                                           }
                                           else {
                                               input.value += delimiter;
                                           }
                                       }                                
                                   }
                               }
     
                               this._updateInputSize();
     
                               this.clear();
                          
                               this._onTextChanged(input.value);
                           }
                           break;
                       case Sys.UI.Key.backspace:
                           {
                               var text = this.get_inputElement().value,
                                   textLength = text.length;
                                
                               if (textLength == 0) {
                                   if (this._selectedToken) {
                                       entryToRemove = $(this._selectedToken).data()["entry"];
                                       this._removeEntry(entryToRemove);
                                       this._selectedToken = null;
                                   } else if(this._isInTokenMode() || !this.get_allowCustomEntry()) {
                                       var tokenClassName = this._isInTokenMode() ? ".racToken" : ".racTextToken",
                                           tokenSelectedClassName = "racTokenSelected",
                                           $lastToken = $(this.get_element()).find(tokenClassName).last();
     
                                       $lastToken.addClass(tokenSelectedClassName);
                                       this._selectedToken = $lastToken.get(0);
                                   }                               
                               }
                           }
                           break;
                   }           
               }
     
           </script>

    Hope this will help you solve the issue.


    Regards,
    Plamen
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017