Limit number of items added to RadListBox2

[Randy]

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.

[Shinu]

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.

[Randy]

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

   

[Genady Sergeev]

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.

[Randy]

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

[Genady Sergeev]

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.

[Randy]

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

[Steve]

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

[Genady Sergeev]

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

[Steve]

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?

[Genady Sergeev]

Hello Steve,

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

Kind regards,
Genady Sergeev
the Telerik team

[Jack]

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? 

[Nencho]

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

[Jack]

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();
                }
            }
        }

[Nencho]

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