| RadControls version |
RadGrid, RadAjax
or
Telerik.Web.UI 2007.3.1425
|
| .NET version |
2.x, 3.x
|
| Visual Studio version |
2005 / 2008
|
| programming language |
C#, VB, Javascript |
| browser support |
all browsers supported by RadControls
|
PROJECT DESCRIPTION
The example demonstrates how to drag and drop a grid row between grid instances and how to delete a grid row (dropping it onto a div "masked" as a recycle bin).
Note that the two grids should have the same column structure, Skin="None" and predefined style settings (Styles.css) because the handlers and appearance are related with them. Event handlers for
onmousedown, onmouseover and
onmouseout (browser-dependant) for every row and
onmouseup and
onmousemove for the document are hooked inside the
RowCreated client-side event handler.
After dragging (mouse down, mouse move, mouse over and mouse out) and dropping (mouse up) a request to the server is made with the following arguments:
- the ID of the source grid
- the index of the dragged row
- the id of the grid/div the row is being dropped over
- the index of the target row (where we dropped the dragged row in the destination grid -- we will insert the dragged row before the target row in this example)
On the server the row is accessed by its index and the current page of the grid which holds it. If the row is dropped on the recycle bin, it is deleted from the grid it came from. If it is dropped over the other grid instance, it is removed from its original grid and is inserted at the supplied index in the destination grid structure.