How to limit that the user can select only one item

15 posts, 1 answers
  1. Oscar
    Oscar avatar
    2 posts
    Member since:
    Mar 2011

    Posted 20 Aug 2012 Link to this post

    How to set this,Thanks!
  2. Answer
    Kalina
    Admin
    Kalina avatar
    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Oscar
    Oscar avatar
    2 posts
    Member since:
    Mar 2011

    Posted 21 Aug 2012 Link to this post

    I used your handle,it worked fine!
    Thanks a lot!
  5. Javier
    Javier avatar
    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
  6. Nencho
    Admin
    Nencho avatar
    1457 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.

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




  8. Jon
    Jon avatar
    53 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
  9. Jon
    Jon avatar
    53 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
  10. Nencho
    Admin
    Nencho avatar
    1457 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.

     
  11. Stephanie
    Stephanie avatar
    139 posts
    Member since:
    Aug 2013

    Posted 13 May 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.
  12. Peter Milchev
    Admin
    Peter Milchev avatar
    135 posts

    Posted 18 May 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.
  13. Stephanie
    Stephanie avatar
    139 posts
    Member since:
    Aug 2013

    Posted 01 Jun 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!

  14. Peter Milchev
    Admin
    Peter Milchev avatar
    135 posts

    Posted 02 Jun 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.
  15. Stephanie
    Stephanie avatar
    139 posts
    Member since:
    Aug 2013

    Posted 02 Jun 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?

  16. Peter Milchev
    Admin
    Peter Milchev avatar
    135 posts

    Posted 07 Jun 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 an 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>


    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.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017