Reorder a row to the bottom of the grid with drag and drop

[Wesley]

I'm experimenting with the drag and drop functionality of the 2008 Q1 AJAX RadGrid release.  I'm looking at the example here:

http://www.telerik.com/demos/aspnet/prometheus/Grid/Examples/Programming/DragAndDrop/DefaultCS.aspx

As I understand it, when reordering a grid, I can drop a row on another row.  And as I'm about to drop an row on another row, a dashed line appears above the row that will be dropped on to indicate that the dropped row will end up above the row that's dropped on.  But how can I move a row to the end of the grid?

For example, on the demo page, how do I move the first row (10248) to the position after the last row (10257)?  If I drop on 10257, it will appear before 10257, and there's no drop target below 10257.

[Veli]

Hello Wesley,

If you examine the demo closely, you can see that dropping an item below the lower half of the destination item , so that the dashed line above is not visible, places the dragged item after the destination item. I am attaching a screenshot of the reordered grid. Please check it out and see if this is what you need.

Kind regards,
Veli
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[Wesley]

Thank you for your answer - I see what you are talking about as far as dragging to the bottom row.

However, I think you're seeing the results of a bug in the demo.  The demo has a bug where if you drag an row down in the grid and drop it on a row (either so that the dotted line is showing or not - it makes no difference), then it drops the row below the row dropped on.  For example, if the demo is initially sorted by OrderID and you drop 10248 on 10250, then 10248 moves to after 10250.  But, if you move a row up,  and drop it on a row, then it drops the row above the row dropped on.  For example, if the demo is initially sorted by OrderID and you drop 10252 on 10250, then 10252 moves to before 10250.

You can also see this bug like this:  Make sure the grid is sorted by OrderID, then drop 10250 on the top half of 10253 (so that the dotted line is showing).  Row 10250 will show up after 10253 instead of before it, as the dotted line suggests.

Or like this:  Make sure the grid is sorted by OrderID, then select 10250, 10251, and 10252 and drag them to 10248.  You will see that the rows move before 10248, but their orders are reversed. (10252, 10251, 10250).

But all of these are simply the result of a bug in the demo program here:

foreach (Order orderToMove in ordersToMove)
{
  pendingOrders.Remove(orderToMove);
  pendingOrders.Insert(destinationIndex, orderToMove);
}

and not really my problem - I'm just pointing it out so that you are careful to not assume that the demo page is correct.

It seems to me that the real problem is in the way the OnRowDrop API works.  Consider this:  If there are 10 rows in the grid, then there are 11 positions that I might want to drop on - before each of the 10 rows, or after the 10th. But the API only gives you which row was dropped on, which means that it can only describe 10 possible drop locations.  So, depending on whether you assume that a drop on a row means to drop before or after that row, you can't represent either a drop below the bottom row or above the top row.  It might be possible to overcome this by making a rule that when dragging down, you insert after, and when dragging up you insert before, but this does not solve the case when you're dragging from a different table altogether.  Also, the dotted lines always show above, regardless of the drag direction.

[Rosen]

Hi Wesley,

Indeed in current version of RadGrid's drag&drop functionality, one can only "drop" item over a RadGrid's row. And then programmer should determine where this item should be placed. But we will surely consider implementing 'above' and 'bellow' functions for futures version of the control.

Please excuse us for the inconvenience and thank you for your suggestion. I updated your Telerik points for the feedback.

Best regards,
Rosen
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[OfficialCommunity]

So what are the plans for this? In the new version there is still the bug mentioned and it's still not possible to do proper before/after reordering.

I did a bug report but the answer was that it's working as intended (when in this post I can see that it's not).

Thank you.

[Rosen]

Hello,

You can use the DropPosition property of the event argument object passed to the RowDrop event, in order to distinguish if an item has been drop below or above the destination item. Then you can take the appropriate action in order to insert the drag item according to you business logic. I have attached a sample website in order to demonstrate a basic implementation of this approach. Please give it a try and see if this helps.

Regards,
Rosen
the Telerik team

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

[Vlad]

Thank you very much, that worked like a charm.