Limit selectable items client side

8 posts, 1 answers
  1. Paul J
    Paul J avatar
    101 posts
    Member since:
    Nov 2008

    Posted 27 May 2011 Link to this post

    Does not look like the RadListBox (SelectionMode="Multiple) has a "max # of allowable selected items" attribute, so how may I programmatically limit it client side?

    I've got the following so far. But how do I basically say if the # of selectable items is greater than 5, then remove the last selected item?

    Thanks! (fyi, I did an extensive search of the forums, and documentation but could not find something that shows me how to do this).
    How do i set "item" to the last selected item of the listbox? sounds like
    listbox.get_selectedItem();

    in a multi select listbox gets the first selected, not the "last selected".


    function onSelectedIndexChanged(sender, args) {
        var listbox = $find("<%= MyListBox.ClientID %>");               
        var items = listbox.get_selectedItems();
     
        if (items.length > 5) {
            // var item = get last selected item ??
            listbox.trackChanges();
            listbox.get_items().remove(item);
            listbox.commitChanges();
             
        }
  2. Answer
    Gimmik
    Gimmik avatar
    170 posts
    Member since:
    May 2011

    Posted 27 May 2011 Link to this post

    Hi Paul,

    Rather then counting the selected items after a new item is selected, then trying to cancel the latest selection, let's try it a slightly different way. Have you tried to wire-up the OnClientSelectedIndexChanging event? Since this event is fired before the item is selected, you can cancel the selection. Here's a link to the documentation page.

    http://www.telerik.com/help/aspnet-ajax/listbox-onclientselectedindexchanging.html

    Let me know if this works for you,
    -Gimmik
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Paul J
    Paul J avatar
    101 posts
    Member since:
    Nov 2008

    Posted 27 May 2011 Link to this post

    Gimmik,

    Good call! Thanks for the help. Works great when using the Control key to select multiple items.

    how can i adjust this so that it takes into account when the user selects items using the shift key? I mean, on the onClientSelectedIndexChangingHandler event how can I count the # of items the user is trying to select (i.e. versus already selected, which is what i'm currently checking.
  5. Gimmik
    Gimmik avatar
    170 posts
    Member since:
    May 2011

    Posted 27 May 2011 Link to this post

    Hi Paul,

    That actually is a more complicated situation. The only object sent into the the event is the item clicked on, because that represents the index of the last item selected (if that makes any sense.) The perfect method would be OnClientSelected, which isn't implemented for the RadListBox. I would submit a ticket to Telerik to see if there is an easy way to do this. Otherwise, I think you may have to do something along the lines of what you were thinking originally. Maybe there is a way of disabling the shift key?

    -Gimmik
  6. Paul J
    Paul J avatar
    101 posts
    Member since:
    Nov 2008

    Posted 27 May 2011 Link to this post

    Thanks for the response. I probably won't venture into a way to handle it right now. I have other checks in place that do not allow the form to submit if the user's selected more than 5 items from the listbox. I also have a label on screen that informs the user of the 5 item limit (not that users ever read what's in front of them). But these things should suffice to not have to take the time/effort to code to simply handle the case of them using the shift key. Besides, for my situation, because of what data they select within the ListBox, it'll be rare that they use the shift key in a way to select more than the alloted 5 items.

    Again, thanks for your help though.
  7. Gimmik
    Gimmik avatar
    170 posts
    Member since:
    May 2011

    Posted 27 May 2011 Link to this post

    If end-users knew how to read and follow directions, us developers would be out of business. Good luck with your project my friend.

    -Gimmik
  8. Harshil
    Harshil avatar
    1 posts
    Member since:
    Jul 2011

    Posted 18 Jul 2011 Link to this post

    Can i know the aspx code also?
    On which event I can call this Javascript function?

    OnselectIndexChanges it throws an error.
  9. Paul J
    Paul J avatar
    101 posts
    Member since:
    Nov 2008

    Posted 18 Jul 2011 Link to this post

    you should be using the : OnClientSelectedIndexChanging event

    here's the full code:

    function onClientSelectedIndexChangingHandler(sender, e) {
                   var listbox = $find("<%= RadListBox1.ClientID %>");
                   var items = listbox.get_selectedItems();
        
                   if (items.length >= 5) {
                       
                        e.set_cancel(true); 
                       }
                       else
                       {
                           e.set_cancel(false);
                       }                
                   
                   
               }

    aspx:

    <telerik:RadListBox  ID="RadListBox1" OnClientSelectedIndexChanging="onClientSelectedIndexChangingHandler" runat="server" Width="270px" Height="110px" SelectionMode="Multiple"   />

Back to Top
UI for ASP.NET Ajax is Ready for VS 2017