How to limit that the user can select only one item

[Oscar]

How to set this,Thanks!

[Kalina]

Hello Oscar,

The RadAutoCompleteBox is a multi-select control by design.
That is why limiting the user selection to only one entry is not a supported scenario.

You can optionally try handling the OnClientEntryAdding event in this way:

<script type="text/javascript">
function OnClientEntryAddingHandler(sender, eventArgs)
{

    if(sender.get_entries().get_count() > 0)
    {
        eventArgs.set_cancel(true);
        alert("You can select only one entry");
    }

}

</script>

<telerik:RadAutoCompleteBox runat="server"
    ID="RadAutoComplete1" Width="300"
    OnClientEntryAdding="OnClientEntryAddingHandler"
    DropDownWidth="300"
    DataSourceID="SqlDataSource1"
    DataTextField="CategoryName"
    DataValueField="CategoryID">
</telerik:RadAutoCompleteBox>

<asp:SqlDataSource ID="SqlDataSource1" runat="server"
    ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString1 %>"
    SelectCommand="SELECT [CategoryID], [CategoryName], [Description] FROM [Categories]">
</asp:SqlDataSource>

Regards,
Kalina
the Telerik team

[Oscar]

I used your handle,it worked fine!
Thanks a lot!

[Javier]

Hi, Do you know how to prevent firing  OnEntryAdded="racbUCBAds_EntryAdded".

Thanks in advance

[Nencho]

Hello Javier,

Generally, when canceling the event propagation with the set_cancel(true) function the server-side event should not be triggered. However, currently it is and I have forwarded this behavior to our developer team for further consideration and fixing. As for how, I would suggest you to use the following workaround:

<script type="text/javascript">
            function OnClientEntryAddingHandler(sender, eventArgs) {
                var shouldCancel = true;

                if (shouldCancel) {
                    sender._postBackOnAdd = false;
                    eventArgs.set_cancel(true);
                }
                else
                    sender._postBackOnAdd = true;
            }
        </script>

Regards,
Nencho
Telerik

 

 

[Javier]

Thanks for your response.

I fixed it with this

instead of using 
OnClientEntryAdded ="OnClientEntryAddingHandler"
I used
OnClientDropDownOpening="OnClientEntryAddingHandler"  regards.

[Jon]

I believe that if the Mode parameter is text (token is default) then you can restrict to one entry by setting the SelectionMode parameter to Single. Example is give in Demo... http://demos.telerik.com/aspnet-ajax/autocompletebox/examples/default/defaultcs.aspx

[Jon]

I believe that if you set the Mode parameter to Text (default is Token) then you can limit the selection to 1 by setting the SelectionMode parameter to Single.

Demo give at http://demos.telerik.com/aspnet-ajax/autocompletebox/examples/default/defaultcs.aspx

[Nencho]

Hello Jon,

You are absolutely correct. However, if some other predicate is needed to prevent adding some entry - for example the value of the entry which is about to be selected is from a list of entries that should not be selected - the previously demonstrated approach could be used. You just need to fit the shouldCancel parameter to the business logic that is required for the given scenario.

Regards,
Nencho
Telerik

 

 

[DogBizPro]

That kind of works. I can add: <TextSettings SelectionMode="Single" /> and it will really only allow me to enter one single value, but once the first is selected it allows me to continue typing which will be VERY confusing to my clients. Is there not a setting to disallow that. I cannot believe that is not an option. I used the AJAX similar control years ago and that was an option.

[Peter Milchev]

Hello Stephanie,

In order to disable the described behavior, my suggestion is to prevent the keypress event of the input DOM element, if there is an entry. Here is a sample implementation relying on the onClientLoad event of the RadAutoCompleteBox.

function onLoad(sender, args) {
    $telerik.$(sender.get_inputElement()).on('keypress', function (e) {
        if (sender.get_entries().get_count() > 0) {
            e.preventDefault();
        }
    });
}

Regards,
Peter Milchev
Telerik

[DogBizPro]

Sorry for the long delay. I have been working on a million other projects as well....

I added that javascript and called it as follows in the RadAutoCompleteBox:

OnClientLoad="onLoad(this,e)" 

The trouble is now it doesn't search when I type anything. I just want to be able to have only one item 'selected'.

Thanks!

[Peter Milchev]

Hello Stephanie,

When using OnClient properties to call JavaScript function, you should give only the function name as the value. In this case it should be OnClientLoad="onLoad".

Regards,
Peter Milchev
Telerik

[DogBizPro]

Duh. Thanks I knew I was doing something stupid :)

That does not allow you to type another name in, which is GREAT! Is there a way to not have the cursor show in the box still so it looks like you can still type?

[Peter Milchev]

Hi Stephanie,

If the input type is "Text" there are no suitable events which would help you achieve this. On the other hand, if the used input type is "Token" then you could easily show/hide the cursor in the OnClientEntryAdded and OnClientEntryRemoved event handlers. Here is a sample implementation of a RadAutoCompleteBox with InputType="Token" that allows a single input: 

<telerik:RadAutoCompleteBox RenderMode="Lightweight" runat="server" ID="RadAutoCompleteBox1"
    OnClientLoad="onLoad"
    OnClientEntryAdded="hideCursor"
    OnClientEntryRemoved="showCursor"
    EmptyMessage="Please type here"
    DataSourceID="SqlDataSource1" DataTextField="FirstName"
    InputType="Token"
    Width="350" DropDownWidth="150px">
</telerik:RadAutoCompleteBox>

<asp:SqlDataSource runat="server" ID="SqlDataSource1" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
    ProviderName="System.Data.SqlClient" SelectCommand="SELECT [FirstName] FROM [Employees]"></asp:SqlDataSource>

<script>
    function showCursor(sender, args) {
        if (sender.get_entries().get_count() == 0) {
            sender.get_inputElement().style.color = "black"
        }
    }

    function hideCursor(sender, args) {
        if (sender.get_entries().get_count() > 0) {
            sender.get_inputElement().style.color = "transparent"
        }
    }

    function onLoad(sender, args) {
        $telerik.$(sender.get_inputElement()).on('keypress', function (e) {
            if (sender.get_entries().get_count() > 0) {
                e.preventDefault();
            }
        });
    }
</script>

Update: A KB article with the solution was created: Allow to select only one text item or a single token item in RadAutoCompleteBox

Regards,
Peter Milchev
Telerik

[JeffSM]

Please Telerik,

this should be an Property of the control "AllowMaxItensSelection=[X]";

Thanks,

Jefferson

[Rumen]

Please request it in the feedback portal - https://feedback.telerik.com/aspnet-ajax.