Telerik blogs
blazort_870x220
While functional, the default display for a node in TreeView is just a single line with an icon and some text. In this blog, we show you how to get the display you really want by creating your own custom template.

There's nothing wrong with the default display for a node in a TreeView. But, it is just a single line with an icon and some text. If you want to do more, you can! All you have to do is wrap some markup in an <ItemTemplate> element to get the display you want.

In a previous post, I showed how to load a TreeView with objects pulled from Entity Framework (and with a little bit of LINQ). What I didn't discuss was how to manage what's displayed in each of its nodes.

By default, the TreeView will display whatever you have in the Text property of the object that your TreeView nodes represent. And, also by default, the node will display the icon or image you specify in the node's object along with that text.

But if you want something more (or something different), you can have that, too: you can create your own custom template with the data from the node that you want to display (including different templates for different levels in your TreeView). There's only one caveat: adding a template suppresses the default behavior for displaying a node. If you want to display either the node's text or icon, you'll have to add that to your template.

A Basic Template

Creating a template that applies to every node is simple: inside the <TelerikTreeView> element, add a <TelerikTreeViewBindings> element and, within it, a <TelerikTreeViewBinding> element (you probably already have those in place to handle binding your object's properties to the TreeView node). Creating a template just consists of adding an <ItemTemplate> element within the <TelerikTreeViewBinding> element:

<TelerikTreeView Data="@OrgChart">
  <TelerikTreeViewBindings>
    <TelerikTreeViewBinding IdField="OrgId"
                            ParentIdField="Owner"
                            TextField="Name">
      <ItemTemplate>
        <!-- your template -->
      </ItemTmplate>
    </TelerikTreeViewBinding>
  </TelerikTreeViewBindings>
</TelerikTreeView>

Within the <ItemTemplate> element, you can put whatever combination of markup and text you want to have displayed for the node. You can access the object associated with the node through the context keyword (you'll need to cast the context to the type of the object that the TreeView is displaying at that node).

In the case study I used in my previous post, I displayed an OrgUnit object in each node in my TreeView. I could, therefore, create an item template that grabs the Name property and displays it with some markup:

<ItemTemplate>
  Department: <h3>@((context as OrgUnit).Name)</h3>
</ItemTemplate>

By the way, if you're not happy with using context in your code, you can change that name by using the Context attribute of the <ItemTemplate> element. For this example, I might prefer to use the name of the object that the node is displaying. If so, I could rewrite my example as follows:

<ItemTemplate Context="OrgUnit">
  Department: <h3>@(OrgUnit as OrgUnit).Name</h3>
</ItemTemplate>

Beyond the Basics

You're not limited to a single line of text in your template: you can put in as much text and markup as you want. However, if you are going to use multiple lines, it's a good idea to put them inside a <div> element to ensure that your nodes display well. Here's an example that displays two (2) properties from the OrgUnit object:

<ItemTemplate>
  <div>
    Department: <h3>@((context as OrgUnit).Name)</h3><br />
    Manager: <h3>@((context as OrgUnit).Manager)</h3>
  </div>
</ItemTemplate>

You can even put a code block inside the <ItemTemplate> element that can simplify your code. For example, if I rewrite the previous example to use a code block, I can avoid repeatedly casting my node to a OrgUnit type (and reduce the number of parentheses required):

<ItemTemplate>
  @{
    OrgUnit ou = context as OrgUnit;
    <div>
      Department: <h3>@ou.Name</h3><br />
      Manager: <h3>@ou.Manager</h3>
    </div>
  }
</ItemTemplate>

There's nothing stopping you from tying JavaScript code to any DOM events that these elements fire. You can also use components in Telerik UI for Blazor in the item template – a <TelerikButton> element, for example (though, presently, there's no way to access information about the node that the button is part of).

Different Templates for Different Nodes

By creating an <ItemTemplate> element as I've done here, you've effectively created a "default" template that applies to all nodes. But you may not want to display the same template for all the nodes in the TreeView.

To customize the way each node displays, you can create additional templates and tie them to specific levels within the TreeView by adding the Level attribute to the <ItemTemplate> element. In the TreeView, the topmost node (what the documentation calls the "root node") is at level 0, that node's immediate children are at level 1, their children are at level 2, and so on.

In the "organizational chart" TreeView, the top node represents a company, the nodes under it represent divisions and the nodes under the divisions represent departments. Since there are more departments than any other kind of organizational unit, it makes sense to define a "default template" to support the display for a department (as I've done). But, I can also create additional templates to customize the display for the two higher levels (company and division).

If I do that, a <TelerikTreeViewBindings> element would end up looking something like this (while I've ordered my level-specific templates in this example by level number, that isn't required):

<TelerikTreeViewBindings>
  <TelerikTreeViewBinding IdField="OrgId"
                          ParentIdField="Owner"
                          TextField="Name">
    <ItemTemplate>
      Department: <h3>@((context as OrgUnit).Name)</h3>
    </ItemTemplate>
  </TelerikTreeViewBinding>
  <TelerikTreeViewBinding Level="0">
    <ItemTemplate>
      Company: <h1>@((context as OrgUnit).Name)</h1>
    </ItemTemplate>
  </TelerikTreeViewBinding>
  <TelerikTreeViewBinding Level="1">
    <ItemTemplate>
      Division: <h2>@((context as OrgUnit).Name)</h2>
    </ItemTemplate>
  </TelerikTreeViewBinding>
</TelerikTreeViewBindings>

Really, at this point, you can now have your TreeView display whatever you want.

To learn more about out Telerik UI for Blazor components and what they can do, check out our Blazor demo page or download a trial to start developing right away!

Start Trial


Peter Vogel
About the Author

Peter Vogel

Peter Vogel is a system architect and principal in PH&V Information Services. PH&V provides full-stack consulting from UX design through object modeling to database design. Peter also writes courses and teaches for Learning Tree International.

Related Posts

Comments

Comments are disabled in preview mode.