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

Set readonly RadAutoCompleteBox

26 Answers 329 Views
AutoCompleteBox
This is a migrated thread and some comments may be shown as answers.
Charles Goh
Top achievements
Rank 1
Charles Goh asked on 08 Mar 2013, 11:09 AM
Dear All,
How can I set RadAutoCompleteBox readonly. I can not find which function support that.
Thank you very much. 

26 Answers, 1 is accepted

Sort by
0
Princy
Top achievements
Rank 2
answered on 11 Mar 2013, 05:16 AM
Hello Charles,

I am not clear with your requirement. The RadAutoCompleteBox does not have a Read Only property. Suppose if you want to prevent editing the token you can set the AllowTokenEditing property to false. Please have a look at the following mark-up.

ASPX:
<telerik:RadAutoCompleteBox ID="RadAutoCompleteBox1" runat="server" EmptyMessage="Enter Name"
    InputType="Token" DataSourceID="SqlDataSource2"DataTextField="ContactName">
    <TokensSettings AllowTokenEditing="false" />
</telerik:RadAutoCompleteBox>

Thanks,
Princy.
0
Charles Goh
Top achievements
Rank 1
answered on 11 Mar 2013, 05:30 AM
Dear Princy,
I used RadAutoCompleteBox instead of RadTextBox because I want to show my recipients list in token and I don't allow user type in  RadAutoCompleteBox directly. Users have to use other tool to find recipients.
0
Nencho
Telerik team
answered on 13 Mar 2013, 09:08 AM
Hi Charles,

I can suggest you, to disable the RadAutoCompleteBox, since you want to prevent the end user to add, edit or delete entries. You could use the Enabled property set to False.

Please note that with the usage of the aforementioned property, the appearance of the control would be slightly changed. If you want to persist the standard rendering, I can suggest you to use the property and remove the applied css class (racDisabled) with jquery in the following manner :

<script>
       function pageLoad() {
           $telerik.$(".racTokenList").removeClass("racDisabled");
       }
   </script>



Kind regards,
Nencho
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
0
Charles Goh
Top achievements
Rank 1
answered on 13 Mar 2013, 09:58 AM
Dear Nencho,
Thank you for support me, It goes perfectly. But I still have one concern, Is it possible to delete token when we set RadAutoCompleteBox's properties to false. As I saw It is impossible.
0
Nencho
Telerik team
answered on 15 Mar 2013, 04:19 PM
Hello Charles,

As you well guessed - it is impossible to delete any token when the suggested approach is implemented. Therefor, I can suggest you a slightly different approach. You could disable only the input area of the RadAutoCompleteBox using jquery and the OnClientLoad  client-side event of the control . Thus you could persist the ability to delete the entries. Consider the following implementation:

<script type="text/javascript">
 
       function OnClientLoad(sender) {
 
           $telerik.$(".racInput").attr("disabled", "disabled");
       }
 
   </script>



Greetings,
Nencho
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
0
Albert Shenker
Top achievements
Rank 1
Veteran
Iron
answered on 21 Jan 2014, 03:12 PM
i too am using the Autocomplete box as a token container and do not want users to be able to type in the box and search. It would be nice if disabling the input were done through a property instead of a fragile jQuery call. Also, I might add, the provided solution appears to break the EmptyMessage property of the control.

Autocompletebox may not be the most suitable control for a token container, but until such time as RadList has a "token" mode it is the only option.
0
Nencho
Telerik team
answered on 24 Jan 2014, 12:01 PM
Hello Albert,

You could use the set_enabled(bool value) client-side method of the RadAutoCompleteBox, in order to manage its Enabled state.


Regards,
Nencho
Telerik
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
0
Albert Shenker
Top achievements
Rank 1
Veteran
Iron
answered on 24 Jan 2014, 01:11 PM
Like Charles, I don't want the autcompletebox to be disabled. I still want users to be able to remove tokens. I just don't want them to be able to add tokens using the input and search. Tokens are added through a separate process.
0
Nencho
Telerik team
answered on 29 Jan 2014, 09:57 AM
Hello Albert,

I was able to replicate the described issue and it originates from the implementation of the previously provided custom approach.  Therefore, I had forwarded your suggestion about managing the Enabled state only of the input of the control, by a property.

Regards,
Nencho
Telerik
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the UI for ASP.NET AJAX, subscribe to the blog feed now.
0
Albert Shenker
Top achievements
Rank 1
Veteran
Iron
answered on 29 Jan 2014, 01:48 PM
Ok. Here's another suggestion. When the AutoCompleteBox has a fixed width, sometimes the width of a token is wider than the available space. In this case, I don't think there's anything that can or necessarily should be done to display the entire token, however, as it stands, the right-most part of the token is what gets clipped. The problem with this is the rightmost part of the token is where the "X" is, allowing users to remove the token. You need to either move the "X" to the left hand side so it is always visible even if the token is too wide, or provide some sort of scrolling capability in the autocomplete box, or make it so the right hand "X" remains visible even if the token text is clipped in order to fit in the available width. Of the three options, I imagine the first would be the easiest to implement.
0
Nencho
Telerik team
answered on 03 Feb 2014, 12:53 PM
Hello Albert,

Your suggestion is really valuable. I have to inform you, that we had already considered a possible implementation regarding this scenario and the inability of the user to click on the X button, when the Token is wider then the AutoCompleteBox. However, we deiced to implement a slight different approach : restrict the Width of any Token, which is lager then the AutoComplete to have equal width to the Control. In addition, the text which remains invisible will be  replaced by tree dots.

Regards,
Nencho
Telerik
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the UI for ASP.NET AJAX, subscribe to the blog feed now.
0
Albert Shenker
Top achievements
Rank 1
Veteran
Iron
answered on 03 Feb 2014, 01:08 PM
the 2013.3.1114.40 version of your controls doesn't include this functionality, as can be seen from the attached screen capture. Will this be in the next release, or am I missing something?
0
Nencho
Telerik team
answered on 06 Feb 2014, 10:54 AM
Hello Albert,

Your observations are absolutely correct. The feature is not yet implemented. The status of the feature is under implementation and you could use our release history here, in order to track the release of the feature.

Regards,
Nencho
Telerik
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the UI for ASP.NET AJAX, subscribe to the blog feed now.
0
Albert Shenker
Top achievements
Rank 1
Veteran
Iron
answered on 06 Feb 2014, 02:50 PM
How does the release history tell me when I can expect this feature to be implemented?
0
Boyan Dimitrov
Telerik team
answered on 11 Feb 2014, 03:29 PM
Hello Albert,

I would like to clarify that at this moment we are not able to provide you a specific release or a time span when this feature will be implemented. However you can review our road map that contains information about what is coming in the upcoming release or the release history that shows what was fixed and implemented in each release.

Please do not hesitate to contact us if you have any further questions.

Regards,
Boyan Dimitrov
Telerik
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the UI for ASP.NET AJAX, subscribe to the blog feed now.
0
Albert Shenker
Top achievements
Rank 1
Veteran
Iron
answered on 02 Sep 2014, 01:30 PM
I can see that this feature is not yet implemented, 9 months later.. And the roadmap tells me nothing about whether or not an individual feature change in a control will be implemented. As far as I'm concerned, this is a bug since it prevents the proper functioning of the control. If users can't remove a token, then the control doesn't work. Can you give me an indication as to when this bug will be fixed?
0
Nencho
Telerik team
answered on 05 Sep 2014, 10:49 AM
Hello Albert,

Indeed the feature is not yet implemented, this is why I had increased its priority. However, I would like to suggest you a custom implementation, which would fit the requirements of the previously mentioned feature with the three dots at the end of the token, if it exceeds the width of the control. Please find a sample page attached, where a couple of css style rules are used to achieve the needed behavior.

Regards,
Nencho
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
Mickael
Top achievements
Rank 1
answered on 16 Sep 2015, 01:51 AM

Is it possible to have

$telerik.$(".racTokenList").removeClass("racDisabled"); 

 for a specific RadAutoCompleteBox instead of all of them?

 


 
0
Nencho
Telerik team
answered on 18 Sep 2015, 07:53 AM
Hello Mickael,

Yes, you can achieve the desired functionality by simple modification of the selector, regarding the ID of the RadAutoCompleteBox on which you need to apply the removeClass method:

$telerik.$("#RadAutoCompleteBox1 .racTokenList").removeClass("racDisabled");

Regards,
Nencho
Telerik
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Michal
Top achievements
Rank 2
answered on 18 Jan 2016, 12:04 AM

Hi, I know this is old but could be still usefull, to make it RO use client side OnEntryRemoving function like this:

function RACB_MyControl_EntryRemoving(sender,args)
{
args.set_cancel(true);
}

 

0
Nencho
Telerik team
answered on 21 Jan 2016, 07:38 AM
Hello Michal,

Indeed with the demonstrated approach you will disable the end user from the ability to remove any of the added entries. However, the ability to add new entries still persist. In addition, the visual indication (grey color) will also miss.

However, thank you for sharing your approach with the community.

Regards,
Nencho
Telerik
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Vasssek
Top achievements
Rank 1
answered on 08 Feb 2018, 04:12 PM

Hello,

I would like to ask, why RadAutoCompleteBox control doesn't have same CSS styles classes as RadTexbox or RadNumericTextBox ? I mean something like this:

<EnabledStyle CssClass="MyEnabledTextBox" />
<ReadOnlyStyle CssClass="MyReadOnlyTextBox" />
<DisabledStyle CssClass="MyDisabledTextBox" />
<EmptyMessageStyle CssClass="MyEmptyTextBox" />
<FocusedStyle CssClass="MyFocusedTextBox" />
<HoveredStyle CssClass="MyHoveredTextBox" />
<InvalidStyle CssClass="MyInvalidTextBox" />
<ClientEvents OnValueChanged="txt_zakazka_ValueChanged" OnKeyPress="OnKeyPress" />

Question is, how to overcome this issue and apply need classess ? 

Best regards

Vasssek


0
Marin Bratanov
Telerik team
answered on 12 Feb 2018, 03:00 PM

Hi Vasssek,

The autocomplete does not have all of those states and features to begin with, because it has a different purpose.

Setting a CssClass to the control and cascading through it will let you modify the hovered state for example. You can inspect the rendered HTML with the browser dev toolbar to see what classes are added to what elements in order to use them in the cascade.

Here is a basic example:

/*racTokenList is the contianer of the control without the popup*/
    .myCustomAppearance .racTokenList {
        border: 2px solid blue;
    }
 
        /*the .racHovered class is added by the control with JS when it is hovered, othewise you can use the :hover pseudoselector if you like*/
        .myCustomAppearance .racHovered {
            border: 2px solid red;
        }
 
        /*racDisabled is added when the Enabled property is set to false*/
        .myCustomAppearance .racDisabled {
            border: 2px solid green;
        }
 
        .myCustomAppearance .racFocused {
            border: 2px solid magenta;
        }
</style>
 
<telerik:RadAutoCompleteBox runat="server" ID="rau1" CssClass="myCustomAppearance"></telerik:RadAutoCompleteBox>
 
<telerik:RadAutoCompleteBox runat="server" ID="rau2"></telerik:RadAutoCompleteBox>


Regards,

Marin Bratanov
Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
venkat
Top achievements
Rank 1
answered on 09 Jun 2020, 06:52 AM

Hi albert

I am using RadAutoCompleteBox. when i type 3 letters on that textbox it will start searching for that email/Name. My issue was when request has went to the server then immediately i am removing those 3 letters and i am entering another 3 letters. at the end my dropdown is loding with first search result set (whatever i have searched for the first time). But i need latest dropdown values which ever i requested for second time.

kindly help me on this.

0
Albert Shenker
Top achievements
Rank 1
Veteran
Iron
answered on 09 Jun 2020, 11:56 AM
I’m not entirely sure I understand the functionality you’re trying to implement. In any case, you should submit a support ticket to Telerik. I’m sure they can be a lot more helpful than me. 
0
David
Top achievements
Rank 1
Veteran
Iron
answered on 31 Mar 2022, 01:13 PM | edited on 31 Mar 2022, 01:15 PM

It seems there is a mix of issues and desires in this thread. For those who initially wanted to use the AutoCompleteBox as a token container where the adds are performed programmatically and want to maintain the functionality of being able to click the x on the token to remove (no disable needed) use this CSS to keep user from typing in box:

 

<style>
    div.RadAutoCompleteBox .racInput {
        visibility: hidden
    }
</style>
Tags
AutoCompleteBox
Asked by
Charles Goh
Top achievements
Rank 1
Answers by
Princy
Top achievements
Rank 2
Charles Goh
Top achievements
Rank 1
Nencho
Telerik team
Albert Shenker
Top achievements
Rank 1
Veteran
Iron
Boyan Dimitrov
Telerik team
Mickael
Top achievements
Rank 1
Michal
Top achievements
Rank 2
Vasssek
Top achievements
Rank 1
Marin Bratanov
Telerik team
venkat
Top achievements
Rank 1
David
Top achievements
Rank 1
Veteran
Iron
Share this question
or