Hello,
Is there a way to change the images during expanding nodes in treeview?
for instance:
i have a parent node with 5 childs.
the parent has a "close folder" image. when i expand the parent i would like the parent image will be change to "open folder" image.
and when i close the parent the image will be change again to "close folder" image.
the other childs node will have another image lets call it "file" image.
it is exactly like the default plus and minus images in the treeview control.
when i click on the plus it becomes to minus and vice versa.
small example will be very helpful.
Regards,
Oren
Is there a way to change the images during expanding nodes in treeview?
for instance:
i have a parent node with 5 childs.
the parent has a "close folder" image. when i expand the parent i would like the parent image will be change to "open folder" image.
and when i close the parent the image will be change again to "close folder" image.
the other childs node will have another image lets call it "file" image.
it is exactly like the default plus and minus images in the treeview control.
when i click on the plus it becomes to minus and vice versa.
small example will be very helpful.
Regards,
Oren
7 Answers, 1 is accepted
0
Hi Oren,
You can achieve this using 2 properties of the RadTreeNode:
1. ImageUrl - for the default (collapsed) node;
2. ExpandedImageUrl - for the expanded node.
Hope this is helpful for you!
Regards,
Nikolay Tsenkov
the Telerik team
You can achieve this using 2 properties of the RadTreeNode:
1. ImageUrl - for the default (collapsed) node;
2. ExpandedImageUrl - for the expanded node.
Hope this is helpful for you!
Regards,
Nikolay Tsenkov
the Telerik team
Do you want to have your say when we set our development plans?
Do you want to know when a feature you care about is added or when a bug fixed?
Explore the
Telerik Public Issue Tracking
system and vote to affect the priority of the items
0
Udi
Top achievements
Rank 1
Rank 1
answered on 07 Oct 2010, 01:28 PM
Thank you Nikolay that was help me.
Another 2 questions:
1. Can i add one more image near to another.
For instance :
I need to display a "file" image and near to that image to display a "Level number" image.
For the first image i use the ImageUrl attribute in the xml.
2. The "LoadContentFile" method uses to get an xml file and parse it to a tree.
Can i interfere the process somehow so i can override the parser?
I'm asking that because your parser expecting to get a specific xml format, what if i would like to add another attribute to the xml that
your parser doesn't know?
Regard,
Oren Cohen
Another 2 questions:
1. Can i add one more image near to another.
For instance :
I need to display a "file" image and near to that image to display a "Level number" image.
For the first image i use the ImageUrl attribute in the xml.
2. The "LoadContentFile" method uses to get an xml file and parse it to a tree.
Can i interfere the process somehow so i can override the parser?
I'm asking that because your parser expecting to get a specific xml format, what if i would like to add another attribute to the xml that
your parser doesn't know?
Regard,
Oren Cohen
0
Hello Oren,
"1.Can i add one more image near to another"
- Yes, you can do that by creating a custom NodeTemplate, which will include this additional picture.
Here is an article on this topic: http://www.telerik.com/help/aspnet-ajax/tree_templatesoverview.html
Here is a demo page for Templates in RadTreeView: http://demos.telerik.com/aspnet-ajax/treeview/examples/functionality/templates/defaultcs.aspx
"2.The "LoadContentFile" method uses to get an xml file and parse it to a tree."
- You can use the XmlDataSource and bind the TreeView to it.
Hope this is helpful for you!
P.S.
Please, when one problem is solved and you need some help with different thing, open a separate support thread (ticket) for it and close the previous one. Thanks!
Regards,
Nikolay Tsenkov
the Telerik team
"1.Can i add one more image near to another"
- Yes, you can do that by creating a custom NodeTemplate, which will include this additional picture.
Here is an article on this topic: http://www.telerik.com/help/aspnet-ajax/tree_templatesoverview.html
Here is a demo page for Templates in RadTreeView: http://demos.telerik.com/aspnet-ajax/treeview/examples/functionality/templates/defaultcs.aspx
"2.The "LoadContentFile" method uses to get an xml file and parse it to a tree."
- You can use the XmlDataSource and bind the TreeView to it.
Hope this is helpful for you!
P.S.
Please, when one problem is solved and you need some help with different thing, open a separate support thread (ticket) for it and close the previous one. Thanks!
Regards,
Nikolay Tsenkov
the Telerik team
Do you want to have your say when we set our development plans?
Do you want to know when a feature you care about is added or when a bug fixed?
Explore the
Telerik Public Issue Tracking
system and vote to affect the priority of the items
0
Udi
Top achievements
Rank 1
Rank 1
answered on 18 Oct 2010, 05:39 PM
Hello Nikolay,
I used the NodeTemplate for my first question above, and i succeed to do it.
I have attached an image that show the tree.
My new questions are:
1. The additional image becomes part of the description when i mark a node with a click on it.(you can see it in the attached image in the first node).
How can i get avoid from this behavior.I would like only the description in the highlight area.
2. When i use the TemplateNode i doesn't get the "Text" attribute value in the RadTreeNode. (see the code below)
The code:
Thank you,
Oren
I used the NodeTemplate for my first question above, and i succeed to do it.
I have attached an image that show the tree.
My new questions are:
1. The additional image becomes part of the description when i mark a node with a click on it.(you can see it in the attached image in the first node).
How can i get avoid from this behavior.I would like only the description in the highlight area.
2. When i use the TemplateNode i doesn't get the "Text" attribute value in the RadTreeNode. (see the code below)
The code:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="TreeViewNodeTemplate.aspx.cs" Inherits="TestWebApp.TreeViewNodeTemplate" %> <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>Untitled Page</title> <link type="text/css" href="styles.css" rel="stylesheet" /> </head> <body> <form id="form1" runat="server"> <asp:ScriptManager runat="server" ID="ScriptManager1"></asp:ScriptManager> <div> <%--Source: http://demos.telerik.com/aspnet-ajax/treeview/examples/functionality/templates/defaultcs.aspx--%> <telerik:RadTreeView runat="server" ID="RadTreeView1" Skin="Default" CheckBoxes="true" CollapseAnimation-Duration="500" CheckChildNodes="true" > <Nodes> <telerik:RadTreeNode Text="Rolling Stones" Expanded="true" ImageUrl="TreeView\folder_close.gif" ExpandedImageUrl="TreeView\folder_open.gif"> <NodeTemplate> <div> <img src="TreeView\Level2.bmp" alt=""/> <a href="http://www.hello.com" style="text-decoration: none;color:Black";>This is parent of node1</a> </div> </NodeTemplate> <Nodes> <telerik:RadTreeNode NavigateUrl="http://www.hello.com" Text="tttt" ImageUrl="TreeView\folder_Item.gif" ExpandedImageUrl="TreeView\folder_open.gif"> <NodeTemplate> <div> <img src="TreeView\Level4.bmp" alt="" /> <span>This Node1</span> </div> </NodeTemplate> </telerik:RadTreeNode> </Nodes> <Nodes> <telerik:RadTreeNode Text="Sticky Fingers" ImageUrl="TreeView\folder_Item.gif" ExpandedImageUrl="TreeView\folder_open.gif"> <NodeTemplate> <div> <img src="TreeView\Level3.bmp" alt="" /> <span>This Node2</span> </div> </NodeTemplate> </telerik:RadTreeNode> </Nodes> </telerik:RadTreeNode> <telerik:RadTreeNode Text="Led Zeppelin" Expanded="true" ImageUrl="TreeView\folder_close.gif" ExpandedImageUrl="TreeView\folder_open.gif"> <NodeTemplate> <div> <img src="TreeView\Level5.bmp" alt="" /> <span>This is parent of node2</span> </div> </NodeTemplate> <Nodes> <telerik:RadTreeNode Text="Led Zeppelin IV" ImageUrl="TreeView\folder_Item.gif" ExpandedImageUrl="TreeView\folder_open.gif"> <NodeTemplate> <div> <img src="TreeView\Level2.bmp" alt="" /> <span>This Node2</span> </div> </NodeTemplate> </telerik:RadTreeNode> </Nodes> </telerik:RadTreeNode> </Nodes> </telerik:RadTreeView> </form> </div> </form> </body> </html> Thank you,
Oren
0
Hello Oren,
"1. The additional image becomes part of the description when i mark a node with a click on it.(you can see it in the attached image in the first node)."
- This can be achieved through additional styling:
- You have to disable the hover styling that are performed for the nodes of the TreeView;
- You need to add some custom css class on the text element and to assign the default node-hover image for it (there probably will be some resizing, too).
"2. When i use the TemplateNode i doesn't get the "Text" attribute value in the RadTreeNode."
- You can get the assigned text through eval expression ("DataBinder.Eval(Conatiner, "Text")").
Hope this is helpful for you!
Regards,
Nikolay Tsenkov
the Telerik team
"1. The additional image becomes part of the description when i mark a node with a click on it.(you can see it in the attached image in the first node)."
- This can be achieved through additional styling:
- You have to disable the hover styling that are performed for the nodes of the TreeView;
- You need to add some custom css class on the text element and to assign the default node-hover image for it (there probably will be some resizing, too).
"2. When i use the TemplateNode i doesn't get the "Text" attribute value in the RadTreeNode."
- You can get the assigned text through eval expression ("DataBinder.Eval(Conatiner, "Text")").
Hope this is helpful for you!
Regards,
Nikolay Tsenkov
the Telerik team
Do you want to have your say when we set our development plans?
Do you want to know when a feature you care about is added or when a bug fixed?
Explore the
Telerik Public Issue Tracking
system and vote to affect the priority of the items
0
Hind
Top achievements
Rank 1
Rank 1
answered on 27 Oct 2011, 05:32 PM
Hello,
I want to add one more image near to another in a treeview item that i create dynamically. The imageurl of the two images are different. And I don't need to add images to all the items of the tree view.
What is the simplest way to do it?
Regards,
Hind
I want to add one more image near to another in a treeview item that i create dynamically. The imageurl of the two images are different. And I don't need to add images to all the items of the tree view.
What is the simplest way to do it?
Regards,
Hind
0
Hi Hind,
Nikolay Tsenkov
the Telerik team
If you bind your TreeView, perhaps the best way would be to conditionally template nodes.
What I mean by conditionally is:
- handle the TemplateNeeded event and decide for the current node in the handler (current, because the event is raised for every bound node);
- your template would be defined as a class implementing the ITemplate interface (it's simpler than it sounds - check the dynamic templating article for RadTreeView).
I hope this helps.
Nikolay Tsenkov
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
