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

Templates

In this example, all OrgChartGroupItems are templated with the same template, which is set directly to the OrgChart.

OrgChartGroupItems can be templated using 3 different properties:
  • OrgChartGroupItem.Template - if this property is set, the item disregards any other templates that otherwise would apply to it;
  • OrgChartNode.ItemTemplate - applies to all the GroupItems in the OrgChartNode, which does not have Template property set;
  • RadOrgChart.ItemTemplate - applies to all GroupItems, that do not have Template set and whose parent OrgChartNode's ItemTemplate is not set either.
This, ultimately, makes the templating very flexible. Also, RadOrgChart template supports binding expressions - one can access custom properties in the DataItem as follows:

<%# DataBinder.Eval(Container.DataItem, "CustomPropertyName") %>

  • DefaultVB.aspx
  • styles.css
<%@ Page Language="VB"  %>

<%@ 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>
    <link rel="stylesheet" type="text/css" href="styles.css" />
</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" Skin="Default">
            <ItemTemplate>
                <span class="pseudoImage" style="background-image: url('<%# DataBinder.Eval(Container, "ImageUrl") %>')">&nbsp;</span>
                <strong><%# DataBinder.Eval(Container, "Text") %></strong>
            </ItemTemplate>
            <Nodes>
                <telerik:OrgChartNode>
                    <RenderedFields>
                        <telerik:OrgChartRenderedField Text="GoalKeeper" />
                    </RenderedFields>
                    <GroupItems>
                        <telerik:OrgChartGroupItem Text="David de Gea" ImageUrl="images/David_de_Gea.png" />
                    </GroupItems>
                    <Nodes>
                        <telerik:OrgChartNode>
                            <RenderedFields>
                                <telerik:OrgChartRenderedField Text="Defence" />
                            </RenderedFields>
                            <GroupItems>
                                <telerik:OrgChartGroupItem Text="Rio Ferdinand" ImageUrl="images/Rio_Ferdinand.png" />
                                <telerik:OrgChartGroupItem Text="Phil Jones" ImageUrl="images/Phil_Jones.png" />
                                <telerik:OrgChartGroupItem Text="Nemanja Vidic" ImageUrl="images/Nemanja_Vidic.png" />
                                <telerik:OrgChartGroupItem Text="Patrice Evra" ImageUrl="images/Patrice_Evra.png" />
                            </GroupItems>
                            <Nodes>
                                <telerik:OrgChartNode>
                                    <RenderedFields>
                                        <telerik:OrgChartRenderedField Text="Midfielders" />
                                    </RenderedFields>
                                    <GroupItems>
                                        <telerik:OrgChartGroupItem Text="Ashley Young" ImageUrl="images/Ashley_Young.png" />
                                        <telerik:OrgChartGroupItem Text="Michael Carrick" ImageUrl="images/Michael_Carrick.png" />
                                        <telerik:OrgChartGroupItem Text="Ryan Giggs" ImageUrl="images/Ryan_Giggs.png" />
                                        <telerik:OrgChartGroupItem Text="Ji-sung Park" ImageUrl="images/Ji-sung_Park.png" />
                                    </GroupItems>
                                    <Nodes>
                                        <telerik:OrgChartNode>
                                            <RenderedFields>
                                                <telerik:OrgChartRenderedField Text="Strikers" />
                                            </RenderedFields>
                                            <GroupItems>
                                                <telerik:OrgChartGroupItem Text="Wayne Rooney" ImageUrl="images/Wayne_Rooney.png" />
                                                <telerik:OrgChartGroupItem Text="Dimitar Berbatov" ImageUrl="images/Dimitar_Berbatov.png" />
                                            </GroupItems>
                                        </telerik:OrgChartNode>
                                    </Nodes>
                                </telerik:OrgChartNode>
                            </Nodes>
                        </telerik:OrgChartNode>
                    </Nodes>
                </telerik:OrgChartNode>
            </Nodes>
        </telerik:RadOrgChart>
    </div>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance