Max number of tokens

[Angie]

Is it possible to limit the number of tokens inputted into an autocomplete box via some sort of property or setting?

Thanks!

[MasterChiefMasterChef]

Hi Angie,

The 'maxlength' property should do what you are looking for. It works with both HTML5 input types and the RadComboBox.

<input id="Text1" type="text" maxlength="10"/>
<telerik:RadComboBox    maxlength="5" runat="server" AllowCustomText="True"></telerik:RadComboBox>

Hopefully this helps,
Master Chief

[Angie]

Hi.  I think you're talking about something different. 

I'm working with the RadAutoComplete box, using the Token input type.  http://demos.telerik.com/aspnet-ajax/autocompletebox/examples/default/defaultcs.aspx

I'm trying to limit the number of tokens a user can enter into the AutoComplete box.  The MaxLength property is not available in this control.

Thanks anyway, though. :)

[Princy]

Hi,

You can attach the OnClientDropDownOpening client event to the RadAutoCompleteBox and try the following JavaScript code.

JavaScript:

<script type="text/javascript">
    var limit = 5;  //Setting the maximum number of entries
    function OnClientDropDownOpening(sender, args) {
        if (sender.get_entries().get_count() == limit) {
            //Checking if the entries already added is equal to count, then cancel the operation.
            args.set_cancel(true);
        }
    }
</script>

Thanks,
Princy.

[Angie]

Hey Princy, thanks for the response.  I'm definitely headed in the right direction, but I changed the function to fire on the

OnClientEntryAdding event. The drop down event wasn't firing fast enough, or maybe it's because I also allow custom entries.

What I need to do now is figure out how to clear out the leftover text from the tag that won't be added.  It's not yet included in the token entry collection, so get_entries().remove does not work.  Any suggestions for clearing that last text value?

Thanks!

[Kate]

Hi Angie,

Can you provide more details on functionality that you are trying to achieve? What do you mean by the  leftover text from the tag that won't be added? A short video or an image file demonstrating the functionality would be very useful.

Kind regards,
Kate
the Telerik team

[Angie]

Hi Kate.  In my above response I attached an image showing what I mean by left over text.  Basically the text the someone tries to type after reaching the maximum number of tokens. 

However, perhaps there is a much better way of handling this issue. 

The real question is: how do I make sure a user can only enter a certain number of tokens within the radautocompletebox? 

Thanks.

<telerik:RadAutoCompleteBox id="radTags" Skin="Web20" Runat="server" Width="700px"  EnableViewState="true"  AllowCustomEntry="true" Delimiter="," InputType="Token"  />

[Bozhidar]

Hi Angie,

Could you try the following code patch and see if that's the behavior you're looking for:

var originalHandler = Telerik.Web.UI.RadAutoCompleteBox.prototype._onKeyPress;
Telerik.Web.UI.RadAutoCompleteBox.prototype._onKeyPress = function(e) {
    var code = e.keyCode ? e.keyCode : e.charCode;

    if (this.get_entries().get_count() >= 2 && code != Sys.UI.Key.backspace) {
        e.preventDefault();
    } else {
        originalHandler.call(this, e);
    }
}

 
Kind regards,
Bozhidar
the Telerik team

[Chaim]

I was trying to implement Bozhidar code, but there's a little problem, theres no "RadAutoCompleteBox" in Telerik.Web.UI.

Is there any other way to achieve the desired behaviour?

Thanks!

[Chaim]

Figured it out... I was getting a Undefined exception, but this is because when my page loads, there's no RadAutoCompleteBox loaded, it loads until I click Edit in my RadGrid

So I put the script inside my EditItemTemplate and now it doesn't throw an error and it works....

regards!

[David]

This worked better for me:

Telerik.Web.UI.RadAutoCompleteBox.prototype._onKeyPress = function (e) {
 var code = e.keyCode ? e.keyCode : e.charCode;
 if (this.get_entries().get_count() == 1 && code != Sys.UI.Key.backspace) {
 e.preventDefault();
 }