Limit number of items added to RadListBox2

15 posts, 0 answers
  1. Randy
    Randy avatar
    4 posts
    Member since:
    Jun 2008

    Posted 18 Mar 2010 Link to this post

    I have a standard RadListBox setup with 2 List Boxes.   The issue is need to limit the number of items that can be Transferred or Drag and Dropped into RadListBox2 to a maximum of 10 items.   RadListBox1 has a list of up to 100 items.  The issue is I need visitors to be able to pick up to 10, but no more than 10 items from List 1 and put them into List 2.

    Is there any way to set maximum number of items on a RadListBox.   Or,  can you suggest javascript to check count and cancel the transfer or DragDrop if the count of the items in ListBox2 > 10 (along with an alert to let the user know what is wrong).

    Thanks for any assistance.
  2. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 19 Mar 2010 Link to this post

    Hello Mike,

    The OnClientTransferring and OnClientDropping client events can be cancelled by using args.set_cancel(true) method. Check for the ListBoxItem count in the event handler and cancel the event if it is greater than limit.

    Hope this suggestion helps,

    Shinu.

  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Randy
    Randy avatar
    4 posts
    Member since:
    Jun 2008

    Posted 19 Mar 2010 Link to this post

    Thanks for your suggestion.  I am getting closer.  Still have a small issue to figure out.
    When using  OnClientTransferring,  when I check the count of RadListBox2 it gives the count of items before the transfer.
    I am allowing SelectionMode="multiple".     So, if there are already 7 items in RadListBox2 and they select  5 items from RadListBox1,  the code allows the transfer as the count is < 10.   But,  we end up with 12 items in RadListBox2.

    I have tried to use  get_selected to find the number of items being transfered.   But, it seems that once the "transfering" starts,  they are no longer selected.   So, I have been unable to make that work.

    I am planning on adding some code for the OnClientTransfered  as that gives me an accurate count of the new number of items after the transfer.   But,  at this point it is not possible to use the set_cancel(true).  So,  I will just have to write code that deletes the extra times.

    If anyone has a better way to detect the number of items being transfered + the number of items currently in RadListBox2 to prevent more than 10 items total in RadListBox2,  so that I can use the set_cancel(true),  that would be a much better solution and I appreciate any assistance.

    Thanks
    Mike

       


  5. Genady Sergeev
    Admin
    Genady Sergeev avatar
    1596 posts

    Posted 23 Mar 2010 Link to this post

    Hi Mike T,

    In the clientTransferring event you can use the following code to find out how many items are being transferred:

    <script type="text/javascript">
           function clientTransferring(sender, args) {
               var count = args.get_items().length;
           }
            
        
       </script>
        
       <telerik:RadListBox runat="server" ID="RadListBox1" AllowTransfer="True"
           TransferToID="RadListBox2" OnClientTransferring="clientTransferring" SelectionMode="Multiple">


    Best wishes,
    Genady Sergeev
    the Telerik team

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
  6. Randy
    Randy avatar
    4 posts
    Member since:
    Jun 2008

    Posted 23 Mar 2010 Link to this post

    Closer.  This now works perfectly as long as you are transferring items from RadListBox1 to RadListBox2.

    Is there any way to determine which direction items are being transferred?

    IE,  the goal here is to limit the number of items in RadListBox2 to no more than 10 items.
    When transferring from box1 to box2,  I can now get the  number of items already in box2 + the items being transfered and this code works great.
    However,  it seems to trigger the same code block when transferring from box2 to box1.    Example,  if there are 9 items in box2.  The user wants to remove some of those to make room for something else.  So, they select 3 items and move them back to box1.   The transfer triggers the code which gives  items currently in box2 (9) +  items being transfered (3) = 12 which is more than the 10 so it kills the transfer.   

    The code should only be triggered if the transfer is from box1 to box2.  Is there anyway to determine this?

    Thanks
    Mike T
  7. Genady Sergeev
    Admin
    Genady Sergeev avatar
    1596 posts

    Posted 26 Mar 2010 Link to this post

    Hi Mike T,

    You can use the following code to determine which is the destination listbox:

    <script type="text/javascript">
           function clientTransferring(sender, args) {
               var destinationListBox = args.get_destinationListBox();
           }
             
         
       </script>
         
       <telerik:RadListBox runat="server" ID="RadListBox1" AllowTransfer="True"
           TransferToID="RadListBox2" OnClientTransferring="clientTransferring" SelectionMode="Multiple">


    Greetings,
    Genady Sergeev
    the Telerik team

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
  8. Randy
    Randy avatar
    4 posts
    Member since:
    Jun 2008

    Posted 26 Mar 2010 Link to this post

    Thanks.  That was the last piece of the puzzle.

    If anyone else needs to do the same,  the finished code is:

    function clientTransferring(sender, args) {
            var destinationListBox = args.get_destinationListBox();
            if (destinationListBox.get_id()=='RadListBox2') {
                var lb2 = $find("<%= RadListBox2.ClientID %>");
                var intTransCount = args.get_items().length;
                var intDestCount = lb2.get_items().get_count();
                var intTotalCount = intTransCount + intDestCount;
                if (intTotalCount > 10) {
                    args.set_cancel(true);
                    alert('You may only select up to 10 at a time.');
                    } 
               }
           }



    <telerik:RadListBox ID="RadListBox1" runat="server" AllowTransfer="True"  TransferToID="RadListBox2"
    AllowTransferOnDoubleClick="True" EnableDragAndDrop="True" SelectionMode="Multiple" OnClientTransferring="clientTransferring"></telerik:RadListBox>
                    <telerik:RadListBox ID="RadListBox2" runat="server" ></telerik:RadListBox>

    Thanks for all of your help
    Mike T
  9. Steve
    Steve avatar
    14 posts
    Member since:
    Jul 2005

    Posted 20 Sep 2010 Link to this post

    Any reason why the example above wouldn't work in a content page that uses a master page?  It seems like the javascript is not even being fired...

  10. Genady Sergeev
    Admin
    Genady Sergeev avatar
    1596 posts

    Posted 22 Sep 2010 Link to this post

    Hello Steve,

    We have already answered to your query in the support thread. Please take a look there.

    All the best,
    Genady Sergeev
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  11. Steve
    Steve avatar
    14 posts
    Member since:
    Jul 2005

    Posted 22 Sep 2010 Link to this post

    Thanks!

    I tried your example, with no luck!

    I can copy any # of entries from the one list box to the other.  No limit is being imposed.

    I *did* add the following, as per your instructions:

    Selectionmode

     

     

    ="Multiple"

     

     

     

     

     


    Although that's not something that I was looking to allow users to do.  All I am really looking for is to limit the # of choices that go into the destination list box, no matter how they get there.

    I also changed the <script> tag as per your recommendations.

    Could it be an issue and/or setting with the latest version of internet explorer?


  12. Genady Sergeev
    Admin
    Genady Sergeev avatar
    1596 posts

    Posted 27 Sep 2010 Link to this post

    Hello Steve,

    You can find sample project demonstrating how to do that as an attachment.

    Kind regards,
    Genady Sergeev
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  13. Jack
    Jack avatar
    5 posts
    Member since:
    May 2007

    Posted 07 Sep in reply to Genady Sergeev Link to this post

    What do you mean by "We have already answered to your query in the support thread. Please take a look there." when you responded to Steve about his question regarding doing this on on a content page that uses the master page? 
  14. Nencho
    Admin
    Nencho avatar
    1458 posts

    Posted 12 Sep Link to this post

    Hello Jack,

    The quoted text, suggests that the communication with Steve was held as well in the Support Ticket that he submitted on the same matter. However, the last version of the provided sample is in this thread [testtransfer.zip].

    Since this thread is quite old, I would like to ask you to specify what exactly is the experienced issue at your end? Do you experience any problem in limiting the number of items in the RadListBox?


    Regards,
    Nencho
    Telerik by Progress
    Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
  15. Jack
    Jack avatar
    5 posts
    Member since:
    May 2007

    Posted 12 Sep in reply to Nencho Link to this post

    I was able to get this working by putting the following code at the bottom of my content page. I display the message in a RadWindow by putting a RadWindowManager with the ID of "rwmMessage" at the top of the screen. Because I am using a master page I had to fully qualify the name of the target listbox as "ctl00_MainContent_RadListBoxDestination" and not just it's ID of "RadListBoxDestination". Is there a better way to do this?

    function onClientTransferring(sender, args) {
                if (args.get_destinationListBox().get_id() == "ctl00_MainContent_RadListBoxDestination")
                    handleSourceToDestinationTransfer(args);
            }
            function handleSourceToDestinationTransfer(args) {
                var maxNumberOfItems = 10;
     
     
                var dest = args.get_destinationListBox();
                var totalCount = dest.get_items().get_count();
                var itemsToTransferCount = args.get_items().length;
     
                if (totalCount == maxNumberOfItems) {
                    var oWnd = window.radalert("You may only select a maximum of 10 ports.", 330, 180, "Error");
                    args.set_cancel(true);
                } else if (totalCount + itemsToTransferCount > maxNumberOfItems) {
                    while (totalCount + itemsToTransferCount > maxNumberOfItems) {
                        itemsToTransferCount--;
                        args.get_items().pop();
                    }
                }
            }

  16. Nencho
    Admin
    Nencho avatar
    1458 posts

    Posted 15 Sep Link to this post

    Hello Jack,

    It is excepted for the IDs to be generated in such a manner, because of the NamingContainers where the ListBoxes are placed. However, if you need to persist the original ID values only, you can set the ClientIDMode="Static" for the RadListBoxes. Hence, you will be able to use only the RadListBoxDestination in your case.

    Regards,
    Nencho
    Telerik by Progress
    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