This is a migrated thread and some comments may be shown as answers.

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

6 Answers 151 Views
AutoCompleteBox
This is a migrated thread and some comments may be shown as answers.
Anand T
Top achievements
Rank 1
Anand T asked on 08 Aug 2013, 07:15 PM

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)
          {
               
          }
}

6 Answers, 1 is accepted

Sort by
0
Shinu
Top achievements
Rank 1
answered on 09 Aug 2013, 11:10 AM
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.
0
Anand T
Top achievements
Rank 1
answered on 09 Aug 2013, 01:52 PM
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>
0
BesT LoLo
Top achievements
Rank 2
answered on 10 Apr 2014, 05:44 PM
Hi Anand:
I'm facing your same problem about firing textchanged event after pressing ENTER key, so did you found any solution?
0
Plamen
Telerik team
answered on 11 Apr 2014, 11:41 AM
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.

 
0
BesT LoLo
Top achievements
Rank 2
answered on 12 Apr 2014, 12:44 PM
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 :)
0
Plamen
Telerik team
answered on 17 Apr 2014, 06:24 AM
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.

 
Tags
AutoCompleteBox
Asked by
Anand T
Top achievements
Rank 1
Answers by
Shinu
Top achievements
Rank 1
Anand T
Top achievements
Rank 1
BesT LoLo
Top achievements
Rank 2
Plamen
Telerik team
Share this question
or