Add new nodes to Mindmap

2 posts, 0 answers
  1. ajin prasad
    ajin prasad avatar
    19 posts
    Member since:
    May 2010

    Posted 12 Sep 2013 Link to this post


    I am using telerik mindmap in my application.

     <MindMap:Example Name="mind"/>

    I load it in codebehind. I got the expected mindmap.

    Say "Mainlevel" as root and it connects to "level1", "level2" etc... there is a '-' sign in mainlevel. on clicking it all levels1,level2 with connections disappears. there will be only "mainlevel" and "+" sign. clicking + sign will shows level 1 and level 2 with connectors.

    Can I add new nodes to existing one? I mean is it possible to add "level3" to this screen.  can i add new nodes and connect this to existing nodes?

    Please help me in this
  2. Petar Mladenov
    Petar Mladenov avatar
    2882 posts

    Posted 17 Sep 2013 Link to this post

    Hello Ajin,

     First I assume you know how to add 3rd level shapes in the MindMap sample - by dragging a connection from the border (which becomes visible on MouseEnter) of the second level shapes. So you can create many other shape levels if the 3rd , 4th, 5th, etc. level shapes act like the second level shapes - allow such dragging operation from their border.
    That 's why I will dig deeper in how we have implemented this approach:

    • First, the MindmapDiagram introduces Draggingcandidate proeprty of type MindMapShapeBase
    • MindMapShapeBase has ParentDiagram Property of type MindMapDiagram and it allows setting the DraggingCandidate on MouseDown of the ItemBorder (this is the mentioned earlier border from the template from which *drag* is started)
    public override void OnApplyTemplate()
                if (this.itemBorder != null)
                    this.itemBorder.MouseLeftButtonDown -= this.OnItemBorderMouseLeftButtonDown;
                this.itemBorder = this.GetTemplateChild(MouseOverPartName) as FrameworkElement;
                if (this.itemBorder != null)
                    this.itemBorder.MouseLeftButtonDown += this.OnItemBorderMouseLeftButtonDown;
    private void OnItemBorderMouseLeftButtonDown(object sender, MouseButtonEventArgs e)
                this.ParentDiagram.DraggingCandidate = this;
                e.Handled = true;
    • Diagram handles DragDropManager.DropEvent and add new Shape based on the type of the DraggingCandidate:
        public MindmapDiagram()
                DragDropManager.AddDragInitializeHandler(this, this.OnDragInitialized);
                DragDropManager.AddGiveFeedbackHandler(this, OnGiveFeedback);
                DragDropManager.AddDropHandler(this, this.OnElementDragDropCompleted);
    private void OnElementDragDropCompleted(object sender, DragEventArgs e)
                MindmapShapeBase newShape;
                if (this.DraggingCandidate is MindmapRootShape)
                    newShape = new MindmapFirstLevelShape();
                    newShape = new MindmapOuterShape();
                this.AddShape(newShape, this.GetTransformedPoint(e.GetPosition(this)), true);
                this.AddConnection(new RadDiagramConnection
                    Source = this.DraggingCandidate,
                    Target = newShape
                }, true);
                this.DraggingCandidate = null;
                e.Handled = true;
    So we can suggest you to organize your third level shapes , 4th level and so one in the way FirstLevelShapes are implemented.
    Let us know if this helps you proceed further.

    Petar Mladenov
    Learn what features your users use (or don't use) in your application. Know your audience. Target it better. Develop wisely.
    Sign up for Free application insights >>
  3. DevCraft R3 2016 release webinar banner
Back to Top