Icons per Level w/ Bounded RadTreeView

[Bruno]

Hi all,

I have a bounded RadTreeView and I need to do the following: set the ImageUrl image file depending on the level of the tree 
(an image for the root nodes, a different image for the second level nodes, etc). How can I do that? Do I have to browse all 
tree nodes again after setting it with the data, creating a performance issue?

Thanks,
Bruno

[Princy]

Hello Bruno,

You can try the following approaches.
1) ASPX:

<telerik:RadTreeView runat="server" ID="RadTreeView3">
 <Nodes>
   <telerik:RadTreeNode Text="Snow" ImageUrl="Images/rose.jpg">
      <Nodes>
          <telerik:RadTreeNode ImageUrl="Images/InboxPic.gif" Text="Inbox" />
          <telerik:RadTreeNode Text="Junk"/>
      </Nodes>
   </telerik:RadTreeNode>
 </Nodes>
</telerik:RadTreeView>

2) JS:

<script type="text/javascript">
 function OnClientLoad(sender, args)
 {
    var nodes = sender.get_allNodes();
    for (var i = 0; i < nodes.length; i++)
    {
      if (nodes[i].get_level() == 0)
       {
         nodes[i].set_imageUrl("../Images/button_edit_grey.gif");
       }
      else
       {
         nodes[i].set_imageUrl("../Images/edit.jpg");
       }
   }
  }
</script>

-Princy.

[Bruno]

Hi Princy, 

can I use the approach 1) with a data bound RadTreeView?

Thanks,
Bruno 

[Princy]

Hello,

If you use databound RadTreeView, then you can add NodeTemplate to show images.
ASPX:

<telerik:RadTreeView ID="treeview1" runat="server" DataSourceID="SqlDataSource1" DataFieldID="EmployeeID" DataTextField="FirstName" DataValueField="LastName">
 <NodeTemplate>
  <asp:Image ImageUrl="~/Images/button_edit_grey.gif" runat="server" /><%# Eval("FirstName")%>
 </NodeTemplate>
 <Nodes>
 </Nodes>
</telerik:RadTreeView>
<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>" SelectCommand="SELECT top 5 * FROM [Employees]"></asp:SqlDataSource>

Thanks,
Princy.

[Bruno]

Solved with:

protected void CriteriaTree_NodeDataBound(object sender, RadTreeNodeEventArgs e)
{
    Image oImage = (Image)e.Node.FindControl("nodeImage");
    oImage.ImageUrl = "~/Images/dotlevel" + e.Node.Level + ".png";
}

Tks
Bruno