[Solved] prevent drag drop specific rows

[Dave Myers]

I am using a single grid with drag drop and wanted to know if it is possible to somehow indicate that a row is "un-dropable".  Basically, i am doing this in the code behind, but it would be nice to prevent it from the client side.  Also, is it possible to specify that a row cannot be dragged?  I have tried using the client side model from the examples, but if i cancel the event, then i cannot drag-drop on any other rows for a while.  It seems to "hang" before i can drag-drop again.

[Rosen]

Hello Dave Myers,

I'm afraid that there is not build-in functionality that can set item as none draggable. However conditional drag drop can be accomplished by handling the client-side drag-drop events. I have attached a sample page to demonstrate this approach.

Please give it a try and let us know if this helps. 

Best wishes,
Rosen
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Dave Myers]

That helps a ton.  I got it to work, but have a follow up question.  In the args, is there a property to determine if the row is being dropped above or below the target element?  I am working with a tree structure and want to prevent items from being dropped in level 0 and level 1.  If the user drops ON level 1, i want to assume that they are dropping below that item and allow the drop.

---Level 0 (item a)
------Level 1 (item b)
---------Level 2 (item c)
---------Level 2 (item d)
------------Level 3 (item e)
------------Level 3 (item f)
---------Level 2 (item g)

so, if the user drags item d and drops over item b, i want to allow that drop and my code behind assumes the drop should be between item b and c. 

[Dave Myers]

also, it appears that the args sent to onRowDropping are different than the args for onRowDragStarted.  I would like to be able to get the item being dragged as well as the target item.  In the documentation, i can't seem to find the class outline of the args class.

[Rosen]

Hello Dave Myers,

In order to determine if the item will be placed above or below the target item you can use the get_position method of the arguments object passed to the RowDropping client-side event.

Best wishes,
Rosen
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Dave Myers]

Thanks again.  By the way, is there any documentation on the client side "args" classes?  I haven't been able to find any on the desktop help, only on classes like "GridTableView" and "GridDataItem".  It would save me time (and posts on the forum) if i had a reference somewhere.

[Rosen]

Hi Dave Myers,

You can refer to this help article for more information on various drag drop events' args.

All the best,
Rosen
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Ricardo Pinto]

Hi Rosen.

I used your ConditionalDragAndDrop example, handling the client-side drag-drop event OnRowDragStarted: if the item being dragged has no units in stock (UnitCode = 3) then the event is canceled and a message is shown.

function onRowDragStarted(sender, args) {
                args.get_tableView().get_dataItems();
                var item = $find(args.get_id());

                if (item && item.getDataKeyValue("UnitCode") == 3) {
                    alert("The product " + item.getDataKeyValue("Reference") + " is unavailable!");
                    args.set_cancel(true);
                }
            }

It works perfectly in single row selection mode: when I select one "unavailable" row (no units in stock) and then click to drag it immediately cancels the event.
However, if I have AllowMultiRowSelection="True", it may not work in the following case:

• I select several records (with CTRL+click or drag to select or clientselectcolumn), including "available" and "unavailable" rows
• I click one of the "available" rows and start to drag
• All of the selected rows are dragged to the shopping cart grid, even if they are "unavailable"

When I start dragging the selected rows using an "unavailable" row, the event is canceled as expected.
Is there any way to cycle through all the selected items in the OnRowDragStarted event? Or any other solution for this problem?

Thanks for your support!
Best regards,

Ricardo.

[Rosen]

Hi Ricardo,

You may use gridTableView's get_selectedItems method in order to retrieve currently selected items. Similar to the following:

        function onRowDragStarted(sender, args) {

                var items = args.get_tableView().get_selectedItems();
                var shouldCancel = false;
                for (var i = 0, len = items.length; i < len; i++) {

                    var item = items[i];
                    if (item && item.getDataKeyValue("UnitCode") == 3) {
                        alert("The product " + item.getDataKeyValue("Reference") + " is unavailable!");
                        shouldCancel = true;
                    }
                }
                args.set_cancel(shouldCancel);
            }

All the best,
Rosen
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Ricardo Pinto]

Hi Rosen.

That works just perfectly!
Thanks for your solution :)

Keep up the excelent work!
Best regards,

Ricardo.