This is a migrated thread and some comments may be shown as answers.

Visual Drag Cues

3 Answers 61 Views
Treeview
This is a migrated thread and some comments may be shown as answers.
Ian
Top achievements
Rank 1
Ian asked on 30 Mar 2011, 09:53 PM
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

3 Answers, 1 is accepted

Sort by
0
Svett
Telerik team
answered on 04 Apr 2011, 03:42 PM
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
0
Ian
Top achievements
Rank 1
answered on 05 Apr 2011, 05:49 AM
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



0
Svett
Telerik team
answered on 07 Apr 2011, 09:26 AM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
Tags
Treeview
Asked by
Ian
Top achievements
Rank 1
Answers by
Svett
Telerik team
Ian
Top achievements
Rank 1
Share this question
or