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

Orientation

  • CEOs
    • John Bravo
      • Don Marko
        Team Leader
        • Hun-ni Ho
        • Lukas Brezina
        • Viktor Varga
        • Marianna Weissova
      • Sara Darkman
        Team Leader
        • David Maly
        • Lin-Sheng Fen
  • Configuration
  • Properties
  • Orientation
  • Column Count

RadOrgChart's Orientation functionality is very useful when you want to control how the nodes are arranged and displayed on the page. Setting the RadOrgChart's Orientation property to Horizontal expands all Nodes horizontally.

This feature is available only if the control's RenderMode is set to "Lightweight".

  • DefaultVB.aspx
  • DefaultVB.aspx.vb
<%@ Page Title="" Language="VB"  AutoEventWireup="false" CodeFile="DefaultVB.aspx.vb" Inherits="OrgChart_Examples_Orientation_DefaultVB" %>

<!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:RadAjaxLoadingPanel runat="Server" ID="RadAjaxLoadingPanel1">
        </telerik:RadAjaxLoadingPanel>
        <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="Configuratorpanel1">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="RadOrgChart1" LoadingPanelID="RadAjaxLoadingPanel1" />
                        <telerik:AjaxUpdatedControl ControlID="Configuratorpanel1" LoadingPanelID="RadAjaxLoadingPanel1" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
        </telerik:RadAjaxManager>

         <telerik:RadOrgChart RenderMode="Lightweight" runat="server" ID="RadOrgChart1"  
            EnableCollapsing="true" EnableGroupCollapsing="true">
            <Nodes>
                <telerik:OrgChartNode>
                    <RenderedFields>
                        <telerik:OrgChartRenderedField Text="CEOs" />
                    </RenderedFields>
                    <GroupItems>
                        <telerik:OrgChartGroupItem Text="John Bravo" />
                    </GroupItems>
                    <Nodes>
                        <telerik:OrgChartNode>
                            <GroupItems>
                                <telerik:OrgChartGroupItem Text="Don Marko">
                                    <RenderedFields>
                                        <telerik:OrgChartRenderedField Text="Team Leader" />
                                    </RenderedFields>
                                </telerik:OrgChartGroupItem>
                            </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" />
                                    </GroupItems>
                                </telerik:OrgChartNode>
                            </Nodes>
                        </telerik:OrgChartNode>
                        <telerik:OrgChartNode>
                            <GroupItems>
                                <telerik:OrgChartGroupItem Text="Sara Darkman">
                                    <RenderedFields>
                                        <telerik:OrgChartRenderedField Text="Team Leader" />
                                    </RenderedFields>
                                </telerik:OrgChartGroupItem>
                            </GroupItems>
                            <Nodes>
                                <telerik:OrgChartNode>
                                    <GroupItems>
                                        <telerik:OrgChartGroupItem Text="David Maly" />
                                        <telerik:OrgChartGroupItem Text="Lin-Sheng Fen" />
                                    </GroupItems>
                                </telerik:OrgChartNode>
                            </Nodes>
                        </telerik:OrgChartNode>
                    </Nodes>
                </telerik:OrgChartNode>
            </Nodes>
         </telerik:RadOrgChart>
      </div>
      <qsf:ConfiguratorPanel ID="Configuratorpanel1" runat="server" Title="Configuration">
        <Views>
            <qsf:View ID="View1" Title="Properties" runat="server">
                <ul class="fb-group">
                    <li>
                        <span class="label">Orientation</span>
                        <asp:RadioButtonList ID="Orientation" runat="server" AutoPostBack="true">
                            <asp:ListItem Text="Horizontal" Value="Horizontal" Selected="True"></asp:ListItem>
                            <asp:ListItem Text="Vertical" Value="Vertical"></asp:ListItem>
                        </asp:RadioButtonList>
                    </li>
                    <li>
                        <span class="label">Column Count</span>
                        <asp:RadioButtonList ID="ColumnCount" runat="server" AutoPostBack="true">
                            <asp:ListItem Text="2" Value="2" Selected="True"></asp:ListItem>
                            <asp:ListItem Text="3" Value="3"></asp:ListItem>
                        </asp:RadioButtonList>
                       
                    </li>
                    </ul>
                </qsf:View>
            </Views>
          </qsf:ConfiguratorPanel>

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

Support & Learning Resources

Find Assistance