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

[Anand T]

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

[Shinu]

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.

[Anand T]

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>

[BesT LoLo]

Hi Anand:
I'm facing your same problem about firing textchanged event after pressing ENTER key, so did you found any solution?

[Plamen]

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

 

 

[BesT LoLo]

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 :)

[Plamen]

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