Icons per Level w/ Bounded RadTreeView

5 posts, 0 answers
  1. Bruno
    Bruno avatar
    20 posts
    Member since:
    Sep 2012

    Posted 21 Nov 2011 Link to this post

    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
  2. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 22 Nov 2011 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Bruno
    Bruno avatar
    20 posts
    Member since:
    Sep 2012

    Posted 23 Nov 2011 Link to this post

    Hi Princy, 

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

    Thanks,
    Bruno 
  5. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 24 Nov 2011 Link to this post

    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.
  6. Bruno
    Bruno avatar
    20 posts
    Member since:
    Sep 2012

    Posted 28 Nov 2011 Link to this post

    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
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017