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

Custom Image loading

5 Answers 180 Views
TreeView
This is a migrated thread and some comments may be shown as answers.
Prash
Top achievements
Rank 1
Prash asked on 24 Feb 2009, 10:24 AM
Hello,

We are creating an application where we want to show the Images on the TreeView based in various combinations of conditions.

Depending upon the types of the Nodes we have to attach different context menus to the tree nodes.Here we are using a Class which implements the IPropertyChanged, the properties such as AbstractionType and ObjectType decides what images has to be loaded in the TreeView.

Images are loaded based on various conditions such as the Abstraction Type and the ObjectType.

Copy paste functionality on tree View--- If we select a node say device node in the context menu we will see copy and when paste is clicked the copy of the Node is addedon the same node as that of the node copied.


We are using a class to populate the tree and the Images will get populated based on two properties, say AbstractionType and objectType. Also in some cases we wish to show multiple images in the treeview.

It is quiet urgent ansd any code will be vary helpfull.
Looking forward for your support.

Thanks and regards

5 Answers, 1 is accepted

Sort by
0
Bobi
Telerik team
answered on 26 Feb 2009, 09:42 AM
Hi Prash,

Please can you define more precisely your question. If you ask how to change the image of a RadTreeviewItem  depending on a condition then:
1.If you use binding add some Image object to the template.
2.If you use populate the treeview with RadTreeViewItems without binding use DefaultImageSrc, ExpandedImageSrc properties.


All the best,
Boryana
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.
0
Prash
Top achievements
Rank 1
answered on 26 Feb 2009, 10:54 AM
Hello,

For the Image binding i am using template.
within the template I have text block and Image.

The Text block has the binding with the Field "Object name", In case of the image I need to show the image based on two fields i.e.
"Abstraction type" and "ObjectTypeID". What I am doin presently is to make a key based on Abstraction type ansd ObjecttypeID, and I also have a Dictionary metioning the name of the Images which can go in the Image source. I handled the ItemPrepared of the Treeview and created the keys. But I am not getting exactly how to bind this key to the Image and get the Image at the Place.

I was able to put my hands on the Context menu, but again the work arouond was not happening,  basically the treeview is in a usercontrol and In the resources of the Treeview i have placed the Context menus and based on the "AbstractionType" and the "ObjectTypeID" i am changing the Context menu.

I am not very sure about the Copy Paste functionalitty but its more like, when the user Selects multiple Nodes, then the Child items of these node get automatically selected and in  the Context Menu we have the Menu for copy and paste, if any thing is not copied then the paste menu is disabled, in case you copy any node the Paste gets enabled and when you click the paste the Same node gets Copied in the TreeView on the same level as that of the node copied.

I also want the Filtering functinality, wherein i will have a textbox and when i type suppose "a" then the tree will get filtered based on some criterion say "AbstractionType", and the filtering is handled on the textchange of  the TextBox.

Any help on the Above features will be a great help.

Thanks and Regards
 
0
Bobi
Telerik team
answered on 27 Feb 2009, 03:35 PM
Hello Prash,

In order to dynamically load images try the following:

1. If you use Binding:

Add some Image object to your template :
 <core:HierarchicalDataTemplate x:Key="Division" ItemsSource="{Binding Teams}">
            <StackPanel Orientation="Horizontal">
                <Image Source="{Binding Image}"  />
                <TextBlock Text="{Binding Name}"  />
            </StackPanel>
        </core:HierarchicalDataTemplate>
In tour Buissiness object add some image uri:
Division d = new Division();
//add new item with name and image uri
d.Add("some Name","Common/Images/Divisions/Team_Epsilon.png");

2.You can access  a treeview item using the following:

 if (tree.ItemContainerGenerator.Status == Telerik.Windows.Controls.Primitives.GeneratorStatus.ContainersGenerated) 
            { 
                RadTreeViewItem item = tree.ItemContainerGenerator.ContainerFromItem(tergetElement) as RadTreeViewItem; 
                 //Change item properties here
                item.Background = new SolidColorBrush(Colors.Green); 
            }  

This way you can customize the appearance of treeview items.

Let me knwo if you have further questions.

Greetings,
Boryana
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.
0
Prash
Top achievements
Rank 1
answered on 02 Mar 2009, 07:05 AM
Hello Boryana ,

Can you please elaborate on the Copy Paste functionality.
It will be very helpful.

Thanks and regards.

0
Bobi
Telerik team
answered on 05 Mar 2009, 07:58 AM
Hello Prash,

It is not possible to have two equal nodes in a TreeView (nodes with the same names). But you can have multiple nodes with the same Text (Headers) and different names. 

Below is a simple example of how to implement copy/paste functionality:

1. The ContextMenu should look like:
   
<navigation:RadTreeView.ContextMenu> 
                <ContextMenu x:Name="menu" Placement="Absolute" > 
                   <TextBlock Text="copy" x:Name="copy" MouseLeftButtonDown="copy_MouseLeftButtonDown"/>  
                   <TextBlock Text="paste" x:Name="paste" MouseLeftButtonDown="paste_MouseLeftButtonDown"/>  
                </ContextMenu> 
            </navigation:RadTreeView.ContextMenu> 
 

2. Define an ObservableCollection<object> for example where you will store the selected items. In copy_MouseLeftButtonDown populate the collection with the selected items. It is important not to forget to select any items from the treeview otherwise the collection will be null.  After that, in paste_MouseLeftButtonDown get the reference to the selected treeview item (note here you can use any treeview item you want to be the target of the paste functionality). Finally you have to add all selected items text (Headers) to the desired treeview item.

        private ObservableCollection<object> list;

        private void copy_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
        {
            list = this.tree.SelectedItems;
        }

        private void paste_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
        {
            RadTreeViewItem currentItem = this.tree.ContainerFromItemRecursive(this.tree.SelectedItem);
            foreach (object item in list)
            {
                currentItem.Items.Add(item.ToString());
            }
        }

I hope that this will help you.

Best wishes,
Boryana
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.
Tags
TreeView
Asked by
Prash
Top achievements
Rank 1
Answers by
Bobi
Telerik team
Prash
Top achievements
Rank 1
Share this question
or