Visual Drag Cues

4 posts, 0 answers
  1. Ian
    Ian avatar
    61 posts
    Member since:
    Jul 2010

    Posted 30 Mar 2011 Link to this post

    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

  2. Svett
    Admin
    Svett avatar
    728 posts

    Posted 04 Apr 2011 Link to this post

    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
  3. UI for WinForms is Visual Studio 2017 Ready
  4. Ian
    Ian avatar
    61 posts
    Member since:
    Jul 2010

    Posted 05 Apr 2011 Link to this post

    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



  5. Svett
    Admin
    Svett avatar
    728 posts

    Posted 07 Apr 2011 Link to this post

    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
Back to Top