OrgChart - Column Count

    • John Bravo
    • Nancy Davolio
    • Andrew Fuller
    • Margaret Peacock
    • Michael Suyama
    • Janet Leverling
      • Don Marko
      • Sony Gustavo
      • Boni Tailor
      • Sara Darkman
        • Hun-ni Ho
        • Lukas Brezina
        • Viktor Varga
        • Marianna Weissova
        • David Maly
        • Lin-Sheng Fen
Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

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 PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<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

Help Us Improve

Was this example helpful?