How to disable dragging/dropping to first position?

[kalyan gupta]

Hi

I am using Telerik:RadListbox in which i have to to show one item as disabled. Now I should always show the disable item at the top and should prompt the user tht disabled item will be the first item always.

Please let me know how to achieve this functionality.

Thanks in advance.

[Kate]

Hello kalyan gupta,

You could use the following function to disable an item from the ListBox and put it on top of the list.

function disableItem(sender, args) {
            if (!confirm("Are you sure?")) {
                args.set_cancel(true);
            }
            else {
                var item = args.get_item();
                sender.trackChanges();
                item.disable();
                sender.reorderItem(item, 0);
                sender.commitChanges();
            }
        }

Regards,
Kate
the Telerik team

[kalyan gupta]

Hi Kate

Thanks for your response. I think you misunderstood my requirement, I am sorry for poor explanation.

I will explain in a better way.

I have 2 list boxes left side and right side.

By default when the page loads right side list box should load with one list item which should not be allowed to drag to the left side list box.

Also user should not be able to drag the items from left side list box to right side list box at the top, rather they can drag from the second position.
And when the right side list box has more than one item after shifting the items from left to right list box, user should not be allowed to reorder the items to the first position.
For Eg: any item greater than 1st position should not be allowed to be dragged to 1st position. 1st position should be occupied by predeficed element.

Is there any way where in we can find the destination position to which the item is being dragged? If there is such way of finding destination position then i can show alert to user saying that Items cannot be reordered to first position.

I hope this is clear. Please let me know if there is any such way.

[Kate]

Hi kalyan gupta,

As far as I understand your issue I believe that you could use this method:

function dropping(sender, args) {

           var index = args.get_destinationItem().get_index();

           if (index < 1) {
               alert('you may not drop on the first item');
               args.set_cancel(true);
           }

       }

And apply it on the ClientDropping event in the ListBox control:

<telerik:RadListBox ID="RadListBox1" runat="server" EnableDragAndDrop="true"
          OnClientDropping="dropping" TransferToID="RadListBox2" AllowTransfer="true"  >

Regards,
Kate
the Telerik team

[kalyan gupta]

Hi Kate,

Thanks for your response.

I am getting
args.get_destinationItem().get_index() as 0 all the time when I am trying to transfer the values from left side listbox to right side listbox and hence values are not getting transferred to right side list box with the javascript which is being used.

Please let me know how to proceed.

Thanks in advance.

[Kate]

Hi kalyan gupta,

Here I am sending you a sample page demonstrating that you can not drop an item from the left ListBox to the right one only when the index of the destintion is zero. The get_destinationItem().get_index() gets the index of the destination item and does not allow you to drop the item with index 0 (on the first position in the ListBox). 

Let me know how it goes.

Regards,
Kate
the Telerik team

[kalyan gupta]

Hi Kate

Your code works fine when there are more than one items in the right side list box.

But if there is only one item in the right side list box args.get_destinationItem().get_index() is giving 0 and hence unable to transfer any items from left to right.

Please let me know how to handle this case.

[Shinu]

Hello Kalyan,

Give a try with the following code snippet:

Java Script:

<script type="text/javascript">
            function cancelDragDrop(sender, args) {
                  set_cancel(true);
           }
           function dropping(sender, args) {
                var index = args.get_destinationItem().get_index();
                if (index < 1 && args.get_destinationItem().get_parent().get_items().get_count()>1) {
                    alert('you may not drop on the first item');
                    args.set_cancel(true);
                }
           }
</script>

-Shinu.

[kalyan gupta]

Hi Shinu

if (index < 1 && args.get_destinationItem().get_parent().get_items().get_count()>1)
Now the above condition allows the user to drag items from left list box to right list box but in my case user should not be allowed to drag the items to the first position.. Any Item from left list box should be allowed to transfer below the first item only.

By default the first position of the right side list box should be item 1r. Code would look something like this:

Please help me how to achieve this.

<

 

 

telerik:RadListBox ID="RadListBox1" runat="server" EnableDragAndDrop="true" Style="top: 0px;

 

 

 

 

left: 5px" TransferToID="RadListBox2" AllowTransfer="true" OnClientDropping="dropping">

 

 

 

<Items>

 

 

 

<telerik:RadListBoxItem Text="item 1" />

 

 

 

<telerik:RadListBoxItem Text="item 2" />

 

 

 

<telerik:RadListBoxItem Text="item 3" />

 

 

 

<telerik:RadListBoxItem Text="item 4" />

 

 

 

</Items>

 

 

 

</telerik:RadListBox>

 

 

 

<telerik:RadListBox ID="RadListBox2" runat="server" EnableDragAndDrop="true" Style="top: 0px;

 

 

 

 

left: 50px;" OnClientDragStart="cancelDragDrop" OnClientDropping="cancelDragDrop">

 

 

 

<Items>

 

 

 

<telerik:RadListBoxItem Text="item 1r" />

 

 

 

</Items>

 

 

 

</telerik:RadListBox>

 

[Princy]

Hello Kalyan,

The following code snippet shows how to achieve this.

Java Script:

<script type="text/javascript">
      function dropping(sender, args) {
         if (args.get_dropPosition() < 1) {
            alert('you may not drop on the first item');
            args.set_cancel(true);
        }
   }

</script>

Thanks,
Princy.

[Kate]

Hi kalyan gupta,

Thanks for the remark. Try to modify the function from the project I sent you to:

function dropping(sender, args) {
                var itemsCount = sender.get_transferTo().get_items().get_count();

                if (itemsCount <= 1) {
                    return; // allow drop
                } else if (args.get_destinationItem().get_index() < 1) {
                    alert('you may not drop on the first item');
                    args.set_cancel(true); // cancel
                }

             }

Let me know if it helps.

Kind regards,
Kate
the Telerik team

[kalyan gupta]

Hi Kate

Thanks for your solution.

function dropping(sender, args) {

                var itemsCount = sender.get_transferTo().get_items().get_count();

 

                if (itemsCount <= 1) {

                    return; // allow drop

                } else if (args.get_destinationItem().get_index() < 1) {

                    alert('you may not drop on the first item');

                    args.set_cancel(true); // cancel

                }

 

             }

The above function allows the user to trannsfer a left side list box item as the first item of right side list box. But from the second time onwards it does not allow the user to transfer any items.

Please help in correcting the code.

Thanks in advance.

[kalyan gupta]

args.get_destinationItem().get_index() results in 0 when there are only one item in the right list box.
So the user is able to transfer the items to right list box when there is only one item in the right list box.

[Kate]

Hi kalyan gupta,

I am not quite sure that I understand what you are trying to achieve, try the following code and in case it does not help, please let me know again which items exactly  from ListBox1 and/or ListBox2 are allowed to be transfered and which are not :

<script type="text/javascript">
           function cancelDragDrop(sender, args) {

               set_cancel(true);
          }

          function dropping(sender, args) {

              Sys.Debug.trace(args);
              var itemsCount = sender.get_transferTo().get_items().get_count();

              if (args.get_destinationItem())
                  Sys.Debug.trace(args.get_dropPosition());

               if (itemsCount < 1 || (itemsCount == 1 &&  args.get_dropPosition() > 0)) {
                   return; // allow drop
               } else if (args.get_destinationItem().get_index() < 1) {
                   alert('you may not drop on the first item');
                   args.set_cancel(true); // cancel
               }

            }

       </script>

Best wishes,
Kate
the Telerik team