This is a migrated thread and some comments may be shown as answers.

how to add a image beside the tree view node?

11 Answers 891 Views
Treeview
This is a migrated thread and some comments may be shown as answers.
kiran
Top achievements
Rank 1
kiran asked on 28 May 2008, 05:58 AM
Hi All and Telerik team,

Can any one please help me in getting this requirement done?

I need to add a image beside the treeview node?
will it be possible using RadControls?

I m using Q1 2008 version..

Thanks for your help in advance.

Regards,
kiran

11 Answers, 1 is accepted

Sort by
0
Jordan
Telerik team
answered on 28 May 2008, 11:33 AM
Hi kiran,

Thank you for writing.

You can easily set an image to a RadTreeNode using the ImageIndex or Image property as shown below:

RadTreeNode newNode = new RadTreeNode("New Node"); 
newNode.ImageIndex = 1; 
//can also be done like that: 
//newNode.Image = Properties.Resources.plus; 

You can also take a look at the article about node images in the online help.

I hope this helps. Contact me again if you need further assistance.

Best wishes,
Jordan
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center
0
kiran
Top achievements
Rank 1
answered on 02 Jun 2008, 09:30 AM
Hi Jordan,

My exact requirement is like:

i want to add far images to the nodes. But i want to add these far images starting from a specific position only.

ex: suppose  if i add two far images to the two child nodes then then the two far images should start from the same position only. it should look like one above the other.

         exactly like

     ---> Parent
                     --->child1Nodetext              startfarimage1At10thposition
                     --->ch2nodetext                   startfarimage2At10thposition 
if the nodes text widths are different also the images should look like parallel to one another.  

is there are anyway to do this using radTreeView properties or methods?  or any workaround you know.

help is highly appreciated?


regards,
kiran




0
Jordan
Telerik team
answered on 03 Jun 2008, 11:43 AM
Hello kiran,

Thank you for getting back to me.

You can do that by setting the MinSize property to some large enough value for the TreeNodeUI items whose far images you would like to align. 

In the code below, all currently available TreeNodeUI items are set a minimum width of 150:

foreach (Telerik.WinControls.RadItem item in this.radTreeView1.TreeViewElement.Items) 
    item.MinSize = new Size(150, 0); 

I hope that helps.

Kind regards,
Jordan
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center
0
kiran
Top achievements
Rank 1
answered on 03 Jun 2008, 01:53 PM
Hi Jordan,

What exactly i need is:

i want to restrict the size of the node text (like max size for node text). so that all the far images will start from the same position.(even if the texts are of different sizes also).
    
                    (OR)    

how to append spaces to the node text upto the max size of the node text. so that  all the far images will start from the same position.(even if the texts are of different sizes also).

is there any property or any way to do so??? Please provide some sample code. i have not seen any such property like that.

Thanks in advance.


Regards,
kiran


0
Jordan
Telerik team
answered on 04 Jun 2008, 12:01 PM
Hi kiran,

There is no need to restrict the size of node text or add spaces. If you set a large enough minimum width to the TreeNodeUI items that represent RadTreeNode objects visually, the far images will align. This is the approach I illustrated in my previous response.

Contact me if you need further information.

Sincerely yours,
Jordan
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center
0
kiran
Top achievements
Rank 1
answered on 04 Jun 2008, 01:14 PM
Hi Jordan,

thanks for your reply.

where i need keep this code exactly? i mean whether after binding the XML data to the tree view or before binding.If possible, Can you please provide me a sample application for the same?

one more basic query in tree view:

how to show plus minus symbols for expand and collapse beside the nodes?i selected show plus minus as 'TRUE' but no use.


help is highly appreciated.

regards,
kiran
0
Martin Vasilev
Telerik team
answered on 05 Jun 2008, 08:19 AM
Hello Kiran,

Thank you for writing.

I have prepared a small example application that demonstrates how to use the MinSize property to align Far Images on the right. Also, I have used the "Telerik" theme to change the small triangles to plus/minus signs. You should have in mind that these symbols actually are pictures and you could change them using the theme. Also, a symbol has only node that already has children nodes.

Please find an example attached to this message.

If you need additional assistance, do not hesitate to contact me again.

Regards,
Martin Vasilev
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center
0
kiran
Top achievements
Rank 1
answered on 05 Jun 2008, 08:46 AM
Hi Martin,

Thanks for your help and sample application.This really helps me a lot. Now i can explore more on achieving my requirement.

small basic question:

can we place this vertical line any where on any panel also?(i mean to ask can we draw vertical line on any panel also like wise on tree view?

Regards,
kiran 
0
Martin Vasilev
Telerik team
answered on 06 Jun 2008, 09:25 AM
Hello Kiran,

Thank you for getting back to me.

You can add vertical lines using the same approach for RadPanel. You have to inherit from the RadPanel class and add a LinePrimitive in its PanelElement.

If you have other questions, do not hesitate to contact me again.

Regards,
Martin Vasilev
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center
0
kiran
Top achievements
Rank 1
answered on 11 Jun 2008, 09:32 AM
Hi Martin,

i have implemented the same logic which was there in your sample application. It is working fine if the far images of the same type.
But if the far images width is different then the far images are not starting from the same position. Hence the tree view is looking absurd. I need to have the far images aligned from starting position if they are of different sizes(Width).

in tha sample application you have taken a image of width 16. but in my case i have diffterent widths for different nodes. how to overcome this problem?

please suggest some approach to me.

Thanks in advance.

Regards,
kiran
 
0
Martin Vasilev
Telerik team
answered on 13 Jun 2008, 01:09 PM
Hi Kiran,

Thank you for getting back to me.

You could set the position of the image by changing the MinSize property according to image size. Please find attached a small example application that demonstrates the approach.

If you have other questions, do not hesitate to contact me again.

All the best,
Martin Vasilev
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center
Tags
Treeview
Asked by
kiran
Top achievements
Rank 1
Answers by
Jordan
Telerik team
kiran
Top achievements
Rank 1
Martin Vasilev
Telerik team
Share this question
or