Telerik blogs

One of the new goodies that came with RadGridView Q2 2010 is the brand new drag and drop API, which offers a very flexible way to create custom drag and drop scenarios with ease.

Each instance of RadGridView is associated with RadGridViewDragDropService that handles user drag and drop operations. It gives you out-of-the-box reordering of columns and movement of items between the group panel and the columns header. The service is also responsible for rows reordering in unbound mode when grouping and sorting features are not applied.

DragAndDrop

In many cases, developers need to implement complex custom scenarios that are not covered by our products by default. This is why we have created the drag and drop API in a way that it will actually help the developer in accomplishing such scenarios, rather than hinder them. RadGridViewDragDropService provides very powerful events that give you full controls over the drag and drop process:

  • PreviewDragStart - This event occurs when you try to start the service. It allows canceling the drag operation before it starts.
  • PreviewDragHint occurs when the hint image is determined. Here you can replace the default image with a new one.
  • PreviewDropTarget occurs when a mouse pointer points a target that allows for a drop operation. Here you can change the pointed drop target.
  • PreviewDragOver occurs when an object is dragged (moves) within the drop target's boundary.
  • PreviewDragDrop occurs when an object is dropped on the drop target. Notice that when you set the Handle property to true the default logic inside RadGridView won't be processed.

If you want to drag a specific element, you should set its AllowDrag property to true. As an example, let's say that we want to drag and drop cells in RadGridView. We should subscribe for the CellFormatting event where we can enable this feature:

 

private void radGridView1_CellFormatting(object sender, CellFormattingEventArgs e)
{
e.CellElement.AllowDrag = true;
e.CellElement.AllowDrop = true;
}

 

After that we need to determine the cell pointed by the mouse cursor, and start the service for this cell. This is done in the MouseDownLeft method of BaseGridBehavior:

 

public class MyBaseGridBehavior : BaseGridBehavior
{
protected override bool OnMouseDownLeft(MouseEventArgs e)
{
bool result = base.OnMouseDownLeft(e);

if (!this.GridViewElement.IsInEditMode && this.GridViewElement.CurrentCell == this.CellAtPoint && this.CellAtPoint != null)
{
RadGridViewDragDropService service = this.GridViewElement.GetService<RadGridViewDragDropService>();
service.Start(this.CellAtPoint);
}

return result;
}
}

 

At the end you should subscribe for the appropriate RadGridViewDragDropService events to achieve the desired goal.

Enjoy, and don't forget to share your comments!


About the Author

Nikolay Diyanov

Diyanov is the Product Manager of the Native Mobile UI division at Progress. Delivering outstanding solutions that make developers' lives easier is his passion and the biggest reward in his work. In his spare time, Nikolay enjoys travelling around the world, hiking, sun-bathing and kite-surfing.

Find him on Twitter @n_diyanov or on LinkedIn.

Related Posts

Comments

Comments are disabled in preview mode.