Create a new blank ASP.NET project and add those of the dll-s of the control that we need for this project:<\/p>\n
![\"ASP.NET](\"http:\/\/mindfusion.dev\/blog\/wp-content\/uploads\/2016\/06\/asp.net-diagram-control-dlls.png\")
ASP.NET Diagram dll-s needed to build the the org chart<\/p><\/div>\n
MindFusion.Diagramming, MindFusion.Diagramming.WebForms, MindFusion.Common, MindFusion.Common.WebForms. The asp.net diagram control needs the MindFusion.Diagramming.js file to render its contents. If you add it directly into the project’s folder you won’t have to add a reference to it. Since we create a ew project folder “Scripts” where we put it, we’ll have to reference it in code. We’ll talk about this in the next step.<\/p>\n
II. Setup of the Diagram Control.<\/strong><\/p>\n We add a new WebForm file to the project and into the HTML code we register the diagramming dll with the tag “ndiag”.<\/p>\n We need a reference to a few *.js and *.css files as shown below:<\/p>\n The *.js files are located in a folder “common” in the project. Of course, you can reference them from their respective online locations.<\/p>\n Don’t forget the ScriptManager:<\/p>\n Now it’s time for the diagram – we add it in the HTML of the page using the “ndiag” tag that we’ve defined above.<\/p>\n The Diagram is in a DiagramView control that will render it contents. Node the “JsLibraryLocation” attribute – we use it to point to the location of the Diagramming.js file which we’ve placed in the Scripts folder in step 1.<\/p>\n III. Building the Diagram<\/strong><\/p>\n We get the diagram object that we’ve defined in HTML like that:<\/p>\n The data for the org chart is located in a XML file. The structure is something like this:<\/p>\n Each new hierarchy level is a list of Employee tags contained within the upper Employee node.<\/p>\n The first node is the top of the tree and we read it separately. First we open the XML document and then we get the first employee:<\/p>\n We use the methods of the diagram control to create a new shape node and assign its properties to the data that we’ve read from the XML file:<\/p>\n The Factory class<\/a> enables us to create different nodes within given bounds. HTML formatting of the text is supported because we have turned on the EnableStyledText<\/a> property. The node shape is rounded rectangle for aesthetic reasons. The texi is aligned to the right and the image – to the left of the node. We use the ImageUrl<\/a> property because the image is uploaded online and we just tell the ShapeNode<\/a> from where to read it.<\/p>\n The nodes are read and created in a method that uses recurrence to cycle through all of them – you can see it in the sample. It has one line that’s worth noting:<\/p>\n Note how we instruct the Factory<\/a> to create a link between each node and its parent. This way we have the diagram ready.<\/p>\n IV. The Layout<\/strong><\/p>\n If you run the application you’ll see just one node. It’s actually a pile of nodes. We need to arrange it but luckily the ASP.NET Diagram control has an impressive selection of layout algorithms. In our case the Tree layout is the perfect choice:<\/p>\n The TreeLayout<\/a> class has plenty of customization options, here we have selected those that would make an org chart look best. You can experiment with the full set of options and see what looks right in your particular scenario.<\/p>\n Here is the final result:<\/p>\n ASP.NET Org Chart<\/p><\/div>\n The source code of the project together with all necessary libraries and scripts can be downloaded from here:<\/p>\n Download ASP.NET Organization Browser Sample<\/a><\/p>\n You are welcome to ask any questions about the ASP.NET Diagram control at MindFusion discussion board<\/a> or per e-mail at support@mindfusion.dev.<\/a><\/p>\n Click here to visit the official page of MindFusion ASP.NET Diagram Control.<\/a><\/p>\n We hope you find this tutorial useful and thank you for your interest in MindFusion developer tools.<\/p>\n","protected":false},"excerpt":{"rendered":" In this post you’ll learn how to create a beautiful organization chart where most of the work is done by the ASP.NET flowchart control. We’ll use the capabilities of the control to create nodes, where we’ll put an image and … Continue reading <%@ Register Assembly=\"MindFusion.Diagramming.WebForms\" Namespace=\"MindFusion.Diagramming.WebForms\" TagPrefix=\"ndiag\" %>\n\n<\/pre>\n
<link<\/span> href<\/span>=\"common\/jquery-ui.min.css<\/a>\" rel\\<\/span>=\"stylesheet<\/a>\">\n<\/span><link<\/span> href<\/span>=\"common\/samples.css<\/a>\" rel<\/span>=\"stylesheet<\/a>\">\n<\/span><script<\/span> type<\/span>=\"text\/javascript<\/a>\" src<\/span>=\"common\/jquery.min.js<\/a>\"><\/script<\/span>>\n<\/span><script<\/span> type<\/span>=\"text\/javascript<\/a>\" src<\/span>=\"common\/jquery-ui.min.js<\/a>\"><\/script<\/span>>\n<\/span><script<\/span> type<\/span>=\"text\/javascript<\/a>\" src<\/span>=\"common\/samples.js<\/a>\"><\/pre>\n<asp:scriptmanager<\/span> id<\/span>=\"ScriptManager1<\/a>\" runat<\/span>=\"server<\/a>\">\n<\/span>\n<\/span><\/asp:scriptmanager<\/span>><\/pre>\n<ndiag:diagramview<\/span> id<\/span>=\"fc<\/a>\" runat<\/span>=\"server<\/a>\" clientsidemode<\/span>=\"Canvas<\/a>\" style<\/span>=\"position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px;<\/a>\" jslibrarylocation<\/span>=\"Scripts\/MindFusion.Diagramming.js<\/a>\" treeexpandedscript<\/span>=\"onTreeExpanded<\/a>\">\n<\/span> <diagram<\/span> autoresize<\/span>=\"RightAndDown<\/a>\" defaultshape<\/span>=\"Rectangle<\/a>\" shapehandlesstyle<\/span>=\"DashFrame<\/a>\">\n<\/span><\/diagram<\/span>><\/ndiag:diagramview<\/span>><\/pre>\nDiagram diagram = fc.Diagram;\n\n<\/pre>\n
<employee<\/span>>\n<\/span> <name<\/span>>Martin Larovsky<\/name<\/span>> \n<\/span> <photourl<\/span>>http:\/\/mindfusion.dev\/_samples\/ASP.NET_OrgChart\/martin-larovsky.png<\/photourl<\/span>>\n<\/span> <title<\/span>>COO<\/title<\/span>>\n<\/span> <level<\/span>>Executive<\/level<\/span>>\n<\/span> <date<\/span>>Aug 2015<\/date<\/span>> \n<\/span> <employee<\/span>>\n<\/span> <name<\/span>>Tanja Orsy<\/name<\/span>>\n<\/span>..........................................\n<\/span>\n<\/span><\/employee<\/span>><\/employee<\/span>><\/pre>\nXmlDocument xmlDoc = new XmlDocument();\nxmlDoc.Load(\"http:\/\/mindfusion.dev\/_samples\/ASP.NET_OrgChart\/employees.xml\");\nXmlNode ceo = xmlDoc.SelectSingleNode(\"Employee\");\n\n<\/pre>\n
ShapeNode root = diagram.Factory.CreateShapeNode(nodeBounds);\nroot.Text = \"\" + ceo[\"Name\"].InnerText + \"<\/b> (\" + ceo[\"Title\"].InnerText + \") since \" +\nceo[\"Date\"].InnerText + \"\"; \nroot.Shape = Shape.FromId(\"RoundRect\"); \nroot.TextPadding = new Thickness(0, 0, 3, 0); \nroot.Brush = new MindFusion.Drawing.SolidBrush(Color.FromArgb(121, 109, 173)); \nroot.TextFormat.Alignment = StringAlignment.Far; \nroot.EnableStyledText = true; \nroot.ImageUrl = ceo[\"PhotoUrl\"].InnerText; \nroot.ImageAlign = MindFusion.Drawing.ImageAlign.MiddleLeft;\n\n<\/pre>\n
\/\/cycles through all nodes using recurrence and creates a DiagramNode for all employees\nprivate void CreateChildren(Diagram diagram, DiagramNode parentDiagNode, XmlNode parentXmlNode)\n{\nforeach (XmlElement element in parentXmlNode.SelectNodes(\"Employee\"))\n{\n.................................................................\ndiagram.Factory.CreateDiagramLink(parentDiagNode, node);\n\n<\/pre>\nTreeLayout layout = new TreeLayout();\nlayout.Type = TreeLayoutType.Cascading;\nlayout.Direction = TreeLayoutDirections.LeftToRight;\nlayout.LinkStyle = TreeLayoutLinkType.Cascading2;\nlayout.NodeDistance = 3;\nlayout.LevelDistance = -8; \/\/ let horizontal positions overlap\nlayout.Arrange(diagram);\n\n<\/pre>\n
![\"ASP.NET](\"http:\/\/mindfusion.dev\/blog\/wp-content\/uploads\/2016\/06\/asp.net-org-chart.png\")