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
<!-- your template -->
<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:
Department: <h3>@((context as OrgUnit).Name)</h3>
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:
Department: <h3>@(OrgUnit as OrgUnit).Name</h3>
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
Department: <h3>@((context as OrgUnit).Name)</h3><br />
Manager: <h3>@((context as OrgUnit).Manager)</h3>
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):
OrgUnit ou = context as OrgUnit;
Department: <h3>@ou.Name</h3><br />
<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
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):
Department: <h3>@((context as OrgUnit).Name)</h3>
Company: <h1>@((context as OrgUnit).Name)</h1>
Division: <h2>@((context as OrgUnit).Name)</h2>
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!