As of Web.UI 2006.2, Grid has a useful new feature: item drag and drop. For some time, many of you have been asking for such a feature, for many different reasons. Some wanted to be able to drag Grid items to and from a TreeView, others wanted to be able to re-order them, or to drag them to other external containers.
Since we don't yet have an example which takes advantage of this new feature, I thought I'd provide a brief overview of how it's used:
1. Set ItemDraggingEnabled to true
This enables dragging functionality - you can now drag a Grid item (row). By default, the item you drag will look like a copy of the Grid item, but you can use the ItemDraggingClientTemplateId and ItemDraggingCssClass properties to modify the appearance of the item as it is dragged.
2. Set the ExternalDropTargets property
This property is of type string and should be set to a comma-delimited list of potential drop target IDs. These can be ComponentArt control IDs or DOM element IDs. If you wanted to be able to drop Grid items to TreeView with ID "TreeView1" and a DIV with ID "dropTargetDiv", you would set ExternalDropTargets to "TreeView1,dropTargetDiv".
3. Set the ItemExternalDrop client event handler in the ClientEvents block
For instance:
<ComponentArt:Grid runat="server" id="Grid1" ... >
...
<ClientEvents>
<ItemExternalDrop EventHandler="Grid1_onItemExternalDrop" />
</ClientEvents>
</ComponentArt:Grid>
4. Define the handler
For instance:
function Grid1_onItemExternalDrop(sender, eventArgs)
{
var draggedItem = eventArgs.get_item();
var targetControl = eventArgs.get_targetControl();
var target = eventArgs.get_target();
// perform logic
}
In this example, draggedItem would be the GridItem that was dragged. The variable targetControl would be set to the target client control (if the target is one), like a TreeView or a Grid. The target would be either a DOM element, in the case that the drop target was a simple DOM element, or a more abstract object, such as a TreeViewNode, if the target was a TreeView. You can then use the Web.UI client-side API to perform any custom logic you require.
While seemingly complicated, we feel that this kind of approach is general enough to cover all desired scenarios, yet simple enough to result in clean and readable code in most real-world applications.
As always, we love to hear feedback from you, which help us to evolve this feature in useful ways.
Have fun!
