Introduction

One of the newest members to the RadControls for ASP.NET AJAX family, Telerik’s ASP.NET AJAX Organizational Chart control is still green and growing. In its first release we equipped it with the most crucial tools it needed to be successful in the outside world. In Q1 2012 RadOrgChart leveled up and added two other important tools to its belt:

• Drag-and-drop in both binding modes - simple and group-enabled;
• Expand/collapse behavior for nodes;

Drag-and-drop

Simple Binding

When data-bound to simple hierarchical data the user can reorder nodes (people) in the hierarchy by being guided by nice visual clues depicting the availability and the result of the current drop operation.

---->

Group-enabled Binding

In this binding mode RadOrgChart displays groups of items as individual nodes. This means that there are two ways of reorganizing the structure:

• [Demo] Moving an item (a person) from one group (department) to another in this way preserving the core structure intact.
• [Demo] Moving whole groups in this way effectively changing the core structure of the organization.

---->

Again the helpful visual clues are there guiding the user through the whole experience.

Usage

The functionality is enabled by setting the RadOrgChart.EnableDragAndDrop property to true. After a Node/GroupItem is dropped RadOrgChart postbacks and throws the server-side NodeDrop/GroupItemDrop event where the logic for updating the underlying data source is implemented by the developer. A subsequent call to the DataBind() method rebinds the control to the changed data. It is a good idea to wrap the control in a RadAjaxPanel to avoid the flicker caused by the postback.

Expanding/Collapsing of Nodes

Imagine an organizational structure where some of the departments are really big and sometimes on a single level. This has two unpleasant side-effects when displayed in a vertical hierarchical structure as the one provided by RadOrgChart:

1. The chart becomes really wide and this spoils the user experience greatly when the user is browsing through the chart. 
2. There are lots of Nodes/Items that simply clutter the chart and may make it harder for the user to find a person they are looking for.

One way RadOrgChart alleviates the first problem in group-enabled binding mode is the ‘column count’ functionality, which basically says to a given (or all) groups to display their items in columns. In this way the content of the groups flows vertically instead of horizontally. Still this does not resolve the problem with many groups on a single level.

Here is an example of such a chart (ColumnsCount is set globally to 3):

Another way for improving the user experience is the new tool RadOrgChart now has: expanding and collapsing. The developer could initially collapse some of the Nodes so that the first thing the user sees is a simple looking organizational structure. If they want more details they could expand the collapsed nodes and see further. [Demo]

---->

Usage

The feature is enabled by setting the RadOrgChart.EnableCollapsing property to true. Nodes/Groups are collapsed by setting their Collapsed properties to true.

What's next?

This wraps up the major progress RadOrgChart has made for the last couple of months. Since it has been trained really well by our dev team since its inception, RadOrgChart plans to improve itself even more in the future. The Q2 2012 release will bring not only improvements and fixes to the table and also new features such as:

• Loading Node/Groups by demand when they are initially collapsed for better initial initialization times in the browser.
• Powerful drill down functionality that will help the user to browse huge and complex organizational structures in an easy and pleasant way, e.g. by displaying only a subtree of the chart in any given moment and/or scrolling by dragging the surface hosting the chart.
• Collapsing of Group’s content instead of the whole branch stemming from the Group.

As a conclusion I would like to note once again that RadOrgChart is still a maturing control. There are many ideas we have and would like to implement one day, however, for us it is more important to hear yours. Please share your feedback with us and what you would like to see in the next levels of RadOrgChart either in the comments below, in our forums or via our support system.