Telerik Forums / UI for ASP.NET AJAX Forum / AutoCompleteBox /

How to limit that the user can select only one item

Telerik UI for ASP.NET AJAX
Resources Buy Try

15 posts, 1 answers

Oscar

2 posts

Member since:
Mar 2011

Posted 20 Aug 2012 Link to this post

How to set this,Thanks!
Answer
Kalina
Admin

918 posts

Posted 21 Aug 2012 Link to this post

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.
Oscar

2 posts

Member since:
Mar 2011

Posted 21 Aug 2012 Link to this post

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

16 posts

Member since:
Feb 2015

Posted 24 Mar 2015 Link to this post

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

Thanks in advance
Nencho
Admin

1881 posts

Posted 27 Mar 2015 Link to this post

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.
Javier

16 posts

Member since:
Feb 2015

Posted 27 Mar 2015 in reply to Nencho Link to this post

Thanks for your response.

I fixed it with this

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

73 posts

Member since:
Oct 2013

Posted 27 Mar 2015 Link to this post

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

73 posts

Member since:
Oct 2013

Posted 27 Mar 2015 Link to this post

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
Admin

1881 posts

Posted 01 Apr 2015 Link to this post

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.
DogBizPro

158 posts

Member since:
Aug 2013

Posted 13 May 2016 in reply to Jon Link to this post

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
Admin

898 posts

Posted 18 May 2016 Link to this post

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.
DogBizPro

158 posts

Member since:
Aug 2013

Posted 01 Jun 2016 in reply to Peter Milchev Link to this post

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
Admin

898 posts

Posted 02 Jun 2016 Link to this post

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.
DogBizPro

158 posts

Member since:
Aug 2013

Posted 02 Jun 2016 in reply to Peter Milchev Link to this post

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
Admin

898 posts

Posted 07 Jun 2016 Link to this post

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.

How to limit that the user can select only one item

Oscar

Kalina

Oscar

Javier

Nencho

Javier

Jon

Jon

Nencho

DogBizPro

Peter Milchev

DogBizPro

Peter Milchev

DogBizPro

Peter Milchev