Have you been looking for a way to visually represent your organization? You’re not alone - many of our customers have been requesting this exact feature. Enter the RadOrgChart. This new ASP.NET AJAX control is perfect for displaying hierarchical structures in a visually appealing and intuitive way. My colleague Nikolay already wrote a blog post regarding the features of this control and the post has a lot of good links that you can follow. What I wanted to take a look at here is how you can get started working with this new and awesome control today, so let’s get started :)

In the Beginning

Some of you might be wondering what this newfangled control even is so for the sake of making sure we’re all on the same page I encourage you to look over the First Look Demo that we have in our online demos. This page will give you a quick look at just what the control can accomplish.

So now that we know what the control looks like, let’s dive into the structure a bit so we can see what’s really going on. What you might have noticed is that the overall layout is driven by the following structure:

• RadOrgChart
  • NodesCollection (<Nodes>)
    • Node (<telerik:OrgChartNode>)
      • NodesCollection (<Nodes>)
      • GroupItemsCollection (<GroupItems>)
        • GroupItem (<telerik:OrgChartGroupItem>)

We have the control itself, RadOrgChart, which will contain a collection of OrgChartNode objects which are all contained in the Nodes tag. Each individual node could either have a collection of nodes itself (don’t we all just love hierarchies?) or a collection of OrgChartGroupItems via the GroupItems tag. A GroupItem is what gets rendered as one of our items in the control. Knowing that, let’s dissect the code of the First Look Demo to see how this all comes together. We start off by declaring our RadOrgChart and creating our Nodes tag:

So far so good! Now we want to create our CEO level so we need to create a OrgChartNode to represent the CEO level of our hierarchy, and to create items for each CEO we need to define each person as a GroupItem within the OrgChartNode’s GroupItems collection:


If we run this we notice once difference from the live demo – there is no text that says “CEOs” for our node here. No need to fear though, we have a tag for that! The OrgChartRenderedField object allows us to define a text which will be displayed as a header for the overall group when placed within the OrgChartNode markup. So, all we have to do is add a couple of lines as follows:


First level is done, so now we need to move on to the second level with the Team Leaders. We will have to add nodes to the Nodes collection of our already existing node, as these team leaders are below them in our hierarchy. This leaves us with:


We almost have the exact same look as from the demo. However, like the first node with the “CEOs” string as header we see that each of the team leaders specifically have a “Team Leader” string contained within their item. Our RenderedFields come to the rescue again here. Essentially, if we want to have text as a header for an overall group we define our RenderedFields tag within the OrgChartNode markup, but if we want it to be displayed without our OrgChartGroupItem we define the RenderedFields within each item. This means that our team leader items will be defined as:


Now we just need to create our last level with all of the team members. Like we have before we create a OrgChartNode within the Nodes collection of each one of our Team Leader nodes and add our GroupItems:


We are very close to completely replicating our demo! One last thing that you will notice is that our team leaders are all rendered on the same row, so in Don Marko’s group we have four in a row, as opposed to the two per row in our demo. This is accomplished by setting the ColumnCount property of the OrgChartNodes that contain our team members. This takes an integer and will define how many columns are in each node, which corresponds directly to how many items will be placed in each row. If there are not enough OrgChartGroupItems available in a particular row a blank space will be rendered in the columns that follow. In our code we want to set the ColumnCount to two:


There we go! We now have a replicated version of the demo page I initially linked. Pretty easy once you realize how the overall structure of nodes and group items work, ain’t it?

One More Thing

Additionally if we wanted to be extra fancy we could define the ImageUrl property of each of our OrgChartGroupItems, placing an image of each of the employees next to their name. Keep in mind that this image is limited to a 48x48 pixel size, so don’t go sticking a 1920x1080 wallpaper in there ;) You could also easily override the default icon (which is used in this example) by utilizing the DefaultImageUrl property in the RadOrgChart tag. Same 48x48 restriction goes for this image as well.

Going Beyond

If you haven’t already explored the rest of our demos I highly encourage that you do so. If you don’t feel like exploring too much, the other blog post I mentioned in the beginning of this post is very helpful in splitting up all of the links into groups and does some of the work for you :) Keep in mind that we just went over how to declaratively define the RadOrgChart in this post but there are plenty of data binding options as well!

Have you already started using the RadOrgChart in your application? Feel free to share your experiences in the comments below!