Page Index Toggle Pages: 1 Send TopicPrint
Normal Topic Tool Box (Read 3575 times)
liza
Full Member
***
Offline


I Love MindFusion!

Posts: 132
Joined: Apr 25th, 2019
Tool Box
Sep 3rd, 2019 at 8:01am
Print Post  
Hi,
How can I show toolbox on the left side of the canvas, to select the icons/symbol using drag and drop. Please let me know
  
Back to top
AIM  
IP Logged
 
Slavcho
YaBB Moderator
*****
Offline


tech.support

Posts: 3153
Joined: Oct 19th, 2005
Re: Tool Box
Reply #1 - Sep 3rd, 2019 at 9:37am
Print Post  
Hi,

Add a NodeListView instance on the left of DiagramView.

Regards,
Slavcho
Mindfusion
  
Back to top
 
IP Logged
 
liza
Full Member
***
Offline


I Love MindFusion!

Posts: 132
Joined: Apr 25th, 2019
Re: Tool Box
Reply #2 - Sep 3rd, 2019 at 9:38am
Print Post  
Please elaborate more, how to use it. I am drawing client side.
Thanks
  
Back to top
AIM  
IP Logged
 
Slavcho
YaBB Moderator
*****
Offline


tech.support

Posts: 3153
Joined: Oct 19th, 2005
Re: Tool Box
Reply #3 - Sep 3rd, 2019 at 11:11am
Print Post  
You can see how to set it up in Controls and Tutorial3 sample projects. If you need to add nodes from client side -

Code
Select All
@Html.NodeListView(
((NodeListView)ViewBag.NodeListView).ControlLoadedScript("nodeListLoad")
, new { style = "width:200px; height:500px;" })

}

<script type="text/javascript">
    function nodeListLoad(sender)
    {
        var node = new MindFusion.Diagramming.ShapeNode();
        node.setShape("Actor");
        sender.addNode(node, "node text");
    }
</script>
 



Regards,
Slavcho
  
Back to top
 
IP Logged
 
liza
Full Member
***
Offline


I Love MindFusion!

Posts: 132
Joined: Apr 25th, 2019
Re: Tool Box
Reply #4 - Sep 3rd, 2019 at 11:23am
Print Post  
Thanks, but it is giving null reference error, can you please tell me that what type of content will be in viewbag?

  
Back to top
AIM  
IP Logged
 
Slavcho
YaBB Moderator
*****
Offline


tech.support

Posts: 3153
Joined: Oct 19th, 2005
Re: Tool Box
Reply #5 - Sep 3rd, 2019 at 11:36am
Print Post  
The ViewBag field should be set to a NodeListView instance, as the sample projects cited above show, e.g. -

Code
Select All
var nodeListView = new NodeListView("nodeListView");
// add some nodes to the NodeListView
string[] shapes = new string[] { "Actor", "RoundRect", "Triangle", "Decision" };
for (var i = 0; i < shapes.Length; ++i)
{
      var node = new ShapeNode();
      node.Text = shapes[i];
      node.Shape = Shape.FromId(shapes[i]);
      nodeListView.AddNode(node, shapes[i]);
}
ViewBag.NodeListView = nodeListView; 

  
Back to top
 
IP Logged
 
liza
Full Member
***
Offline


I Love MindFusion!

Posts: 132
Joined: Apr 25th, 2019
Re: Tool Box
Reply #6 - Sep 3rd, 2019 at 12:02pm
Print Post  
Thanks, it is working.
  
Back to top
AIM  
IP Logged
 
liza
Full Member
***
Offline


I Love MindFusion!

Posts: 132
Joined: Apr 25th, 2019
Re: Tool Box
Reply #7 - Sep 4th, 2019 at 3:53am
Print Post  
I want to have arrow, by selecting it and put it with a node then the two nodes should be linked together. How can I do this?
  
Back to top
AIM  
IP Logged
 
Slavcho
YaBB Moderator
*****
Offline


tech.support

Posts: 3153
Joined: Oct 19th, 2005
Re: Tool Box
Reply #8 - Sep 5th, 2019 at 6:45am
Print Post  
NodeListView cannot contain links, but you could add a node representing a connector and replace it with a link when dropped. You can find this demonstrated for our WPF library here -
https://mindfusion.eu/blog/create-diagram-connectors-using-drag-and-drop/

Same approach should work for ASP.NET MVC / JavaScript too.

Regards,
Slavcho
Mindfusion
  
Back to top
 
IP Logged
 
Page Index Toggle Pages: 1
Send TopicPrint