Visual Drag Cues

[Ian]

Hi Guys

I have used the old fashioned MouseDown - DoDragDrop approach to allow drag and drop to occur between two treeviews in my solution. The drag operation captures the Tag of the selected node and the drop operation uses that Tag object. This is all working very well but using this method does not give me the nice visual clues I know the Teleerik treeview is capable of.

It would be great to be able to use these nice visual clues on the Treeview when dragging to show the user what was "under" the cursor but when I set Allow dragDrop on the source treeview (which gets me the nice visuals when dragging) I find that I am no longer dragging the Tag object but instead moving the entire subtree from the source to the target!

Does anyone know how to enable the nice visuals by themselves?

Regards
Ian

[Svett]

Hello Ian,

In the latest version of RadTreeView (Q1 2011 2011.1 11.315), you can perform the drag and drop operation between different instances of RadTreeView by setting the AllowDragDrop property to true:

this.radTreeView1.AllowDragDrop=true;

You can modify the drop hint image by setting the ItemDropHint property:

this.radTreeView1.TreeViewElement.ItemDropHint

Best wishes,
Svett
the Telerik team

[Ian]

Hi Svett

Thanks for your reply. Unfortunately I am not having much luck with ItemDropHint and was wondering if you had any further insights into my problem.

I am setting the ItemDropHint for the target tree "tvAlphaWorkspace" during the NodeMouseDown event of the source tree "tvAlphaTemplates". The code looks like this:

private void tvAlphaTemplates_NodeMouseDown(object sender, RadTreeViewMouseEventArgs e)
{
    if (Control.MouseButtons == MouseButtons.Left)
    {
        templateDragNode = (RadCustomTreeNode)e.Node;
        templateDrag = true;
        tvAlphaWorkspace.TreeViewElement.ItemDropHint = CreateDragImageShape(templateDragNode);
        tvAlphaTemplates.DoDragDrop(templateDragNode.Tag, DragDropEffects.Copy);

    }
}

CreateDragImageShape looks like this

private RadImageShape CreateDragImageShape(RadCustomTreeNode dragNode)
{
    SizeF size;
    FontFamily fFam = new FontFamily("Segoe UI");
    Font f = new Font(fFam, 8.25F, FontStyle.Regular);
    using (Bitmap tmpBmp = new Bitmap(1, 1))
    using (Graphics g = Graphics.FromImage(tmpBmp))
        size = g.MeasureString(dragNode.Text, f);
    Bitmap bitmap = new Bitmap((int)Math.Ceiling(size.Width) + 40, (int)Math.Ceiling(size.Height) + 50);
    using (Graphics gr = Graphics.FromImage(bitmap))
    {
        gr.TextRenderingHint = System.Drawing.Text.TextRenderingHint.AntiAliasGridFit;
        gr.DrawString(dragNode.Text, f, Brushes.Black, 0, 0);
        gr.DrawImage(dragNode.Image, new Point(0, (int)size.Height));
    }
    RadImageShape imgShape = new RadImageShape();
    imgShape.Image = bitmap;
    bitmap.Dispose();
    f.Dispose();
    return imgShape;
}

I would like the image shape created to appear as the "under the cursor" image during thr drag operation but that is not happening.
 
I do not have AllowDragDropBetweenTrees on on either tree or have AllowDragDrop on on the source tree. Having these turned on drags the nodes and not the node objects that I want so I have them off.   

CreateDragImageShape above does create an image but the dragging cursor never changes.

Hope you can help

Regards
Ian

[Svett]

Hello Ian,

RadTreeView supports drag and drop operation out of the box. You do not need to start a drag-drop operation in NodeMouseDown event. You can use the following code snippet as a sample:

this.radTreeView1.TreeViewElement.DragDropService.PreviewDragHint += new System.EventHandler<Telerik.WinControls.PreviewDragHintEventArgs>(DragDropService_PreviewDragHint);

this.radTreeView1.AllowDragDrop = true;

private void DragDropService_PreviewDragHint(object sender, Telerik.WinControls.PreviewDragHintEventArgs e)
{
    TreeNodeElement nodeElement = e.DragInstance as TreeNodeElement;
    if (nodeElement != null)
    {
        e.DragHint = this.CreateDragImageShape(nodeElement.Data);
        e.UseDefaultHint = false;
    }
}

private Image CreateDragImageShape(RadTreeNode dragNode)
{
    SizeF size;
    FontFamily fFam = new FontFamily("Segoe UI");
    Font f = new Font(fFam, 8.25F, FontStyle.Regular);
    using (Bitmap tmpBmp = new Bitmap(1, 1))
    using (Graphics g = Graphics.FromImage(tmpBmp))
        size = g.MeasureString(dragNode.Text, f);
    Bitmap bitmap = new Bitmap((int)Math.Ceiling(size.Width) + 50, (int)Math.Ceiling(size.Height));

    using (Graphics gr = Graphics.FromImage(bitmap))
    {
        gr.TextRenderingHint = System.Drawing.Text.TextRenderingHint.AntiAliasGridFit;
        gr.DrawString("Drag: " + dragNode.Text, f, Brushes.Black, 0, 0);
    }

    return bitmap;
}

I hope this helps.

Kind regards,
Svett
the Telerik team