Set readonly RadAutoCompleteBox

[Charles Goh]

Dear All,
How can I set RadAutoCompleteBox readonly. I can not find which function support that.
Thank you very much. 

[Princy]

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.

[Charles Goh]

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.

[Nencho]

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

[Charles Goh]

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.

[Nencho]

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

[Albert Shenker]

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.

[Nencho]

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

[Albert Shenker]

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.

[Nencho]

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

[Albert Shenker]

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.

[Nencho]

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

[Albert Shenker]

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?

[Nencho]

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

[Albert Shenker]

How does the release history tell me when I can expect this feature to be implemented?

[Boyan Dimitrov]

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

[Albert Shenker]

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?

[Nencho]

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

 

 

[Mickael]

Is it possible to have

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

 for a specific RadAutoCompleteBox instead of all of them?

 

 

[Nencho]

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

[Michal]

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

 

[Nencho]

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

[Vasssek]

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

[Marin Bratanov]

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

[venkat]

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.

[Albert Shenker]

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. 

[David]

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>