New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

Column Count

In order to make RadOrgChart's groups more compact and customizable, we have implemented a way to break groups on multiple lines by number of columns.

There is a property directly on RadOrgChart - RadOrgChart.GroupColumnCount. Using this property one can directly cause all groups to be ordered in multiple lines.

Additionaly, the ColumnCount property of OrgChartNode can be used in order to specify it localy for the group.

The above example demonstrates how to use both in a combination.

  • DefaultCS.aspx
<%@ Page Language="C#"  %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>

<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
</head>

<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />

    <div class="demo-container no-bg">
        <telerik:RadOrgChart RenderMode="Lightweight" runat="server" ID="RadOrgChart1" GroupColumnCount="3">
            <Nodes>
                <telerik:OrgChartNode>
                    <GroupItems>
                        <telerik:OrgChartGroupItem Text="John Bravo" />
                        <telerik:OrgChartGroupItem Text="Nancy Davolio" />
                        <telerik:OrgChartGroupItem Text="Andrew Fuller" />
                        <telerik:OrgChartGroupItem Text="Margaret Peacock" />
                        <telerik:OrgChartGroupItem Text="Michael Suyama" />
                        <telerik:OrgChartGroupItem Text="Janet Leverling" />
                    </GroupItems>
                    <Nodes>
                        <telerik:OrgChartNode ColumnCount="2">
                            <GroupItems>
                                <telerik:OrgChartGroupItem Text="Don Marko" />
                                <telerik:OrgChartGroupItem Text="Sony Gustavo" />
                                <telerik:OrgChartGroupItem Text="Boni Tailor" />
                                <telerik:OrgChartGroupItem Text="Sara Darkman" />
                            </GroupItems>
                            <Nodes>
                                <telerik:OrgChartNode>
                                    <GroupItems>
                                        <telerik:OrgChartGroupItem Text="Hun-ni Ho" />
                                        <telerik:OrgChartGroupItem Text="Lukas Brezina" />
                                        <telerik:OrgChartGroupItem Text="Viktor Varga" />
                                        <telerik:OrgChartGroupItem Text="Marianna Weissova" />
                                        <telerik:OrgChartGroupItem Text="David Maly" />
                                        <telerik:OrgChartGroupItem Text="Lin-Sheng Fen" />
                                    </GroupItems>
                                </telerik:OrgChartNode>
                            </Nodes>
                        </telerik:OrgChartNode>
                    </Nodes>
                </telerik:OrgChartNode>
            </Nodes>
        </telerik:RadOrgChart>
    </div>

    </form>
</body>
</html>

Support & Learning Resources

Find Assistance