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

How to limit that the user can select only one item

15 Answers 1162 Views
AutoCompleteBox
This is a migrated thread and some comments may be shown as answers.
Oscar
Top achievements
Rank 1
Oscar asked on 20 Aug 2012, 07:02 PM
How to set this,Thanks!

15 Answers, 1 is accepted

Sort by
0
Accepted
Kalina
Telerik team
answered on 21 Aug 2012, 11:57 AM
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
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
Oscar
Top achievements
Rank 1
answered on 21 Aug 2012, 03:29 PM
I used your handle,it worked fine!
Thanks a lot!
0
Javier
Top achievements
Rank 1
answered on 24 Mar 2015, 05:00 PM
Hi, Do you know how to prevent firing  OnEntryAdded="racbUCBAds_EntryAdded".

Thanks in advance
0
Nencho
Telerik team
answered on 27 Mar 2015, 11:50 AM
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
 

See What's Next in App Development. Register for TelerikNEXT.

 
0
Javier
Top achievements
Rank 1
answered on 27 Mar 2015, 01:44 PM
Thanks for your response.

I fixed it with this

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




0
Jon
Top achievements
Rank 1
answered on 27 Mar 2015, 01:54 PM
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
0
Jon
Top achievements
Rank 1
answered on 27 Mar 2015, 01:56 PM
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
0
Nencho
Telerik team
answered on 01 Apr 2015, 05:49 AM
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
 

See What's Next in App Development. Register for TelerikNEXT.

 
0
DogBizPro
Top achievements
Rank 1
answered on 13 May 2016, 05:27 PM
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.
0
Peter Milchev
Telerik team
answered on 18 May 2016, 03:38 PM
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
Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
0
DogBizPro
Top achievements
Rank 1
answered on 01 Jun 2016, 06:08 PM

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!

0
Peter Milchev
Telerik team
answered on 02 Jun 2016, 01:22 PM
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
Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
0
DogBizPro
Top achievements
Rank 1
answered on 02 Jun 2016, 03:48 PM

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?

0
Peter Milchev
Telerik team
answered on 07 Jun 2016, 08:31 AM
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
Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
0
JeffSM
Top achievements
Rank 2
Iron
Veteran
Iron
answered on 21 Nov 2022, 03:47 PM

Please Telerik,

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

Thanks,

Jefferson

Rumen
Telerik team
commented on 21 Nov 2022, 10:52 PM

Please request it in the feedback portal - https://feedback.telerik.com/aspnet-ajax.
Tags
AutoCompleteBox
Asked by
Oscar
Top achievements
Rank 1
Answers by
Kalina
Telerik team
Oscar
Top achievements
Rank 1
Javier
Top achievements
Rank 1
Nencho
Telerik team
Jon
Top achievements
Rank 1
DogBizPro
Top achievements
Rank 1
Peter Milchev
Telerik team
JeffSM
Top achievements
Rank 2
Iron
Veteran
Iron
Share this question
or