how to add image to node?

4 posts, 1 answers
  1. Patxi
    Patxi avatar
    70 posts
    Member since:
    Feb 2009

    Posted 21 May 2009 Link to this post

    Hello,

    I would like to add an image to all the nodes of a treeview. Between the Plus-Minus image (to extend and reduce the tree) and the text.

    how can I do it?

    Thank you in advance.

    Patxi.
  2. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 21 May 2009 Link to this post

    Hi Patxi,

    You can use the ImageUrl property to set the image for RadTreeNode.

    ASPX:
     
    <telerik:RadTreeView ID="RadTreeView1"  runat="server"
       <Nodes> 
           <telerik:RadTreeNode runat="server" Text="Node1" CategoryOf="Car" ImageUrl="../Images/Car1.gif"
             <Nodes> 
                <telerik:RadTreeNode Text="Child Node" ImageUrl="../Images/Car2.gif"></telerik:RadTreeNode> 
             </Nodes> 
             . . . 
       </Nodes> 
    </telerik:RadTreeView> 

    Checkout the online demo which illustrates the feature.
    TreeView / Custom Attributes

    -Shinu.
  3. Patxi
    Patxi avatar
    70 posts
    Member since:
    Feb 2009

    Posted 21 May 2009 Link to this post

    Thank you Shinu.

    I forgot to add one thing. Your answer is valid in my case for child nodes. All child nodes will have the same image. For parent nodes I would like to do something different. I want them to have a closed folder when its child nodes are not shown and an open folder when child nodes are visible for the user.

    do you have any example for this? 
  4. Answer
    Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 21 May 2009 Link to this post

    Hi Patxi,

    Set the ExpandedImageUrl proprty of the nodes to set the value specifying the URL of the image (opened folder image) rendered when the node is expanded.

    .aspx:

     
    <telerik:RadTreeView ID="RadTreeView1"  runat="server">    
       <Nodes>    
           <telerik:RadTreeNode runat="server" Text="RadTreeNode1" ExpandedImageUrl="../Images/OpenedFolder.gif" ImageUrl="../Images/Closedfolder.gif">    
             <Nodes>    
                 <telerik:RadTreeNode Text="RadTreeNode2" ExpandedImageUrl="../Images/OpenedFolder.gif" ImageUrl="../Images/Closedfolder.gif">  
                 </telerik:RadTreeNode>    
             </Nodes> 
             . . .   
       </Nodes>    
    </telerik:RadTreeView>  

    Thanks,
    Princy.

Back to Top