Telerik Forums
UI for ASP.NET AJAX Forum
15 answers
1.1K+ views
How to set this,Thanks!
JeffSM
Top achievements
Rank 2
Iron
Veteran
Iron
 answered on 21 Nov 2022
4 answers
200 views

Hi,

 

I'm using the RadAutoCompleteBox in one of our web forms and I'm having an issues with it on Microsoft Edge Mobile.

As it has problems with my OnClientLoad js function and only if I remove the OnClientLoad="OnClientLoad" binding from the control declaration the autocomplete will work.

In the desktop version of edge all is well same for chrome and chrome mobile,

the error:

 

"OnClientLoad is not defined"

"ReferenceError: OnClientLoad is not defined at Array.<anonymous> (https://my-domain.com/syllabisearch/he/pages/default.aspx:272:176322) at https://my-domain.com/syllabisearch/Scripts/WebForms/MsAjax/MicrosoftAjax.js:6:51370 at Sys._Application._raiseInit (https://my-domain.com/syllabisearch/Scripts/WebForms/MsAjax/MicrosoftAjax.js:6:72276) at Sys._Application.initialize (https://my-domain.com/syllabisearch/Scripts/WebForms/MsAjax/MicrosoftAjax.js:6:69772) at b (https://my-domain.com/syllabisearch/Scripts/WebForms/MsAjax/MicrosoftAjax.js:6:71512) at HTMLDocument.a (https://my-domain.com/syllabisearch/Scripts/WebForms/MsAjax/MicrosoftAjax.js:6:71786)"
and the breakpoint is on the following code (attached in 'code-snippet-1.zip').

Here is my  OnClientLoad JavaScript Function

01.function OnClientLoad(sender, args) {
02.                $(".racToken").attr('tabindex', 0);
03.                var autoCompleteBox = $find("<%= RadAutoCompleteSearchBox.ClientID %>");
04.                var entryGeneralTitle = '<%=Idc.Yedion.SyllabiSearch.Helpers.Util.getLocalizedValue("AccessibilityGeneralSearchAutoCompleteBoxClear", CurrentLanguage)%>';
05.                var selectedEntryTitle = entryGeneralTitle.replace('{0}', autoCompleteBox.get_entries()?.getEntry(0)?.get_text());
06.                $(".racRemoveTokenLink").attr('title', selectedEntryTitle);
07.                $(".racToken").attr('title', selectedEntryTitle);
08.                $(".racRemoveTokenLink").attr('aria-label', selectedEntryTitle);
09.                $(".racToken").attr('aria-label', selectedEntryTitle);
10.                $(".racToken").on('keypress', function (e) {
11.                    var key = e.which;
12.                    if (key == 13) {
13.                        e.preventDefault();
14.                        autoCompleteBox.get_entries().clear();
15.                        $("#<%= BtnClearSearch.ClientID %>").click();
16.                    }
17. 
18.                });
19.                $(".racToken").on('keydown', function (e) {
20.                    var key = e.which;
21.                    if (key == 8 || key == 46) {
22.                        e.preventDefault();
23.                        autoCompleteBox.get_entries().clear();
24.                        $("#<%= BtnClearSearch.ClientID %>").click();
25.                }               
26.            });
27.                $telerik.$(sender.get_inputElement()).on('keypress', function (e) {
28.                    if (sender.get_entries().get_count() > 0) {
29.                        e.preventDefault();
30.                    }
31.                });
32.

             

33.            }

 

And this is my control declaration

1.<telerik:RadAutoCompleteBox ID="RadAutoCompleteSearchBox" AllowCustomEntry="false" EnableAriaSupport="true" InputType="Token" ItemType="Idc.Yedion.Internet.ObjectsModels.GeneralSearchResult" runat="server" MinFilterLength="2" TextSettings-SelectionMode="Single" TokensSettings-AllowTokenEditing="false" OnClientLoad="OnClientLoad" DropDownPosition="Static" RenderMode="Lightweight" EnableScreenBoundaryDetection="true" EnableDirectionDetection="true" ZIndex="1" OnEntryAdded="RadAutoCompleteSearchBox_EntryAdded" OnEntryRemoved="RadAutoCompleteSearchBox_EntryRemoved" EnableClientFiltering="true" Skin="Bootstrap" Width="100%"></telerik:RadAutoCompleteBox>

 

Please advice,

Thanks,

Hagai.

Atanas
Telerik team
 updated answer on 21 Jun 2022
26 answers
493 views
Dear All,
How can I set RadAutoCompleteBox readonly. I can not find which function support that.
Thank you very much. 
David
Top achievements
Rank 1
Veteran
Iron
 updated answer on 31 Mar 2022
0 answers
62 views

I've created  AutoCompleteBox in code behind and I'm using AutoCompleteBox.DataSourceSelect to get suggested values into a dropdown. By using up & down arrow keys I can move through the suggest list.

When I'm at:
- the last element in the list and I'm pressing down arrow key I do not want the list to go back to the first element - I want the list to stop at the last element no matter what,
- the first element in the list and I'm pressing up arrow key I do not want the list to go back to the last element - I want the list to stop at the first element no matter what.

How can I implement this 'prevention' in the OnClientLoad() event?

Here's a fragment of my code:

var autoCompleteBox = new Telerik.Web.UI.RadAutoCompleteBox
{
	AllowCustomEntry = true,
	AutoPostBack = false,
	Delimiter = ",;\n",
	DropDownPosition = Telerik.Web.UI.RadAutoCompleteDropDownPosition.Static,
	EnableClientFiltering = false,

	Filter = Telerik.Web.UI.RadAutoCompleteFilter.StartsWith,

	HighlightFirstMatch = true,
	InputType = Telerik.Web.UI.RadAutoCompleteInputType.Token,

	MinFilterLength = 0,
	MaxResultCount = 100,	
};

autoCompleteBox.OnClientEntryAdded = "AutoCompleteBox_OnClientEntryAdded";
autoCompleteBox.OnClientRequesting = "AutoCompleteBox_OnClientRequesting";
autoCompleteBox.OnClientLoad = "AutoCompleteBox_OnClientLoad";	


Kamil
Top achievements
Rank 1
Iron
 asked on 05 Jan 2022
1 answer
115 views

I would like to have a button with arrow image inside AutoCompleteBox (this control will be created in code behind), so after pressing it the dropdownlist with current text matching items would show up (if no text is present, then the first X number of items). I have the control already made in Winforms (using your Winforms components, attachment shows the winform's control look), so I was wondering if the same can be made in ASP.NET?

 

(btw: if you want to see the code of my Winform's control then you can see in this thread: https://www.telerik.com/forums/click-event-not-firing-for-autocompletesuggesthelper-popup-of-raddropdownlist )

Doncho
Telerik team
 answered on 14 Dec 2021
1 answer
344 views

I have a RadAutoCompleteBox.  Many times I fill it dynamically with a SQL Query.

But on an occasion, I need to fill it with "N/A" and Select "N/A" Automatically.

Is there a way to do this?

 

Thanks,

Rog

Attila Antal
Telerik team
 answered on 27 Jul 2021
3 answers
73 views

I have this code that only allows the user to type a single word. Therefore the blank space (32) is taken as the end of the word.

I can GET the typed text and trim it this way:

var typed = $find('<%= RadAutoCompleteBox1.ClientID %>').get_inputElement().value.trim();

So if the client type "mytext   " it will be converted to "mytext"

Now I need to know how to replace what user typed back with the trimmed text.

Thanks in advance!

Yan Moura
Top achievements
Rank 1
Veteran
Iron
 answered on 29 May 2021
1 answer
90 views

Hello,

I'd like to know how to clear items and force close dropdown in AutoCompleteBox from client side (Javascript)...

Thanks!

Yan Moura
Top achievements
Rank 1
Veteran
Iron
 answered on 29 May 2021
1 answer
139 views

How to set focus to AutoCompleteBox?

I tried the following but it doesn't work:

var autoComplete = $find("<%= RadAutoCompleteBox1.ClientID %>");
autoComplete.focus();

Error: autoComplete.focus is not a function

Yan Moura
Top achievements
Rank 1
Veteran
Iron
 answered on 29 May 2021
0 answers
83 views

Hi!

I am using AutoCompleteBox and I would like to know how to get the very first value of the dropdown list (client side) with Javascript.

Thanks!

 

EDIT: I figured how to do this using the event dropDownItemDataBound in case someone else needs it:

        

var typed = ""; var current = ""; function requesting(sender, eventArgs) { var acbox = $find('<%= RadAutoCompleteBox1.ClientID %>'); var acboxcontents = acbox.get_inputElement(); typed = acboxcontents.value; } function dropDownItemDataBound(sender, args) { if (current != typed) { if (typed.substr(typed.length-1, 1) == " ") { var acbox = $find("<%= RadAutoCompleteBox1.ClientID %>"); var newEntry = acbox.createEntry(args.get_item().get_text(), args.get_item().get_text()); var entries = acbox.get_entries(); entries.add(newEntry); current = typed; typed = "";
} } }

Right after the client types a blank space (for instances "mysearch ") the code above gets the first value of the dropdown list, converts it into a token, ignores all the rest of the values in the list and clear up the typed string.

Now I just need to know how to set focus back to AutoCompleteBox... Telerik controls are like puzzles and everything is so hard to achieve. :(

Yan Moura
Top achievements
Rank 1
Veteran
Iron
 updated question on 27 May 2021
Narrow your results
Selected tags
Tags
+? more
Top users last month
horváth
Top achievements
Rank 2
Iron
Iron
Steve
Top achievements
Rank 2
Iron
Erkki
Top achievements
Rank 1
Iron
Mark
Top achievements
Rank 2
Iron
Iron
Veteran
Jakub
Top achievements
Rank 1
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
horváth
Top achievements
Rank 2
Iron
Iron
Steve
Top achievements
Rank 2
Iron
Erkki
Top achievements
Rank 1
Iron
Mark
Top achievements
Rank 2
Iron
Iron
Veteran
Jakub
Top achievements
Rank 1
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?