Tree View and Context Menu

[Krati Chauhan]

We are using context menu with tree node. The tree and context menu are both dynamic and binds on the runtime.

The tree has several levels of nodes and context menu is specific to the nodes at different levels.

The tree supports the multiple selection.

As per our requirement, we need to find multiple selected tree nodes when the user right clicks on any one of the mulitple selected node to open the context menu.

1. Single node selection

When we right click on the single node to open the context menu, the node which was right clicked does not get selected. We have used the following piece of code to identify the node which was right clicked, and it gives us the correct value.

 

 

private RadTreeViewItem ClickedTreeViewItem

 

{

 

 

get 

 

{

 

return radContextMenu.GetClickedElement<RadTreeViewItem>(); }

 

 

}

 

 

 

this

 

 

.ClickedTreeViewItem.DataContext

 

 

 

 

 

 

2. Multiple nodes selection

In case of multiple selection, we have to select the nodes and we are not able to find the nodes which are selected while using the context menu.

To summarize:

1. We need a way to find the selected nodes in a tree on right click to open the context menu for either single or multiple selection of the tree view item.

2. The node on which the context menu was opened should be selected as well.

[Tina Stancheva]

Hi Krati Chauhan,

You can add a MouseRightButtonDown event handler and get the original object that raised the MouseRightButtonDown event (this can be done through the e.OriginalSource property). Then, you can search through its parents until you find the RadTreeViewItem that was clicked and set its IsSelected property to true thus adding it to the RadTreeView SelectedItems collection.
 
Then in the RadMenuItem Click() event handler you can perform an action on each selected item. Please keep in mind that if the RadTreeView is databound to a business object, the SelectedItems collection will consists of business objects. Therefore, if you need to perform an action on the selected RadTreeViewItem, you will have to use the ContainerFromItemRecursive() method.

If you need to clear the selection after the appropriate actions were performed on the selected items, you can use the RadTreeView.SelectedItems.Clear() method.

I have prepared a sample project demonstrating this approach. Please take a look at it and let me know if it works for you or if you need more info.

Best wishes,
Tina Stancheva
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.

[Krati Chauhan]

Hi Tina,

Thanks for the reply. I have checked the solution attached. This meets our requirement to some extent but there is still some  problem
1. In selection. when we right clicks on a single node 'X', it gets selected, but if a user right clicks on any other node 'Y', both the nodes 'X' and 'Y' gets selected.

we want to enable multiple selection of nodes only on ctrl key press. When a user right clicks on node 'X' and then right clicks on node 'Y', the node 'X' should not be selected. But if a user selects node 'X' and node 'Y' with the help if ctrl key and then right clicks, both the nodes 'X' and 'Y' should be selected.

Please let me know how can we achieve this.

2. Also we are not getting the "MouseRightButtonDown" event handler. When we used your refernced assemblies, we were not able to do so as it is not build against the silverlight assemblies. We are using telerik control in a silverlight application

Thanks for your support

[Tina Stancheva]

Hello Krati Chauhan,

Please accept my apology for the delayed response.

I modified the example to run in Silverlight. I handled the Opened event of the RadContextMenu, instead of a MouseRightButtonDown since there is no such event in Silverlight. However, the RadContectMenu has a GetClickedElement<OfType>() method that returns the original element that was clicked. You can use it to get the RadTreeViewItem
RadTreeViewItem item = (sender as RadContextMenu).GetClickedElement<RadTreeViewItem>(); that was clicked to select and focus it.

I also have a couple of suggestions on how to deny multiple selection on RadContextMenu_Opened. Now, if you want to select multiple items with the Ctrl key and then you want to be able to right click on an unselected item to open the context menu and select that item as well, you can use the following lines of code:

if (RightClickedItems.Count == 0)
            {
                item.IsSelected = true;
                item.Focus();
                RightClickedItems.Add(item);
            }
            else
            {
                foreach (RadTreeViewItem RightClickedItem in RightClickedItems)
                {
                    RightClickedItem.IsSelected = false;
                }
                RightClickedItems.Clear();
                item.IsSelected = true;
                item.Focus();
                RightClickedItems.Add(item);
            }

However, if you want to have a scenario, where if a multiple selection is made through the Ctrl key, the context menu can be only opened on some of the selected items or else the selection is cleared then, you should replace the above code with the following:

if (item.IsSelected == false)
        {
            myTreeView.SelectedItems.Clear();
            myTreeView.SelectedItem = item.Item;
        }

Please take a look at the attached project and let me know if that works for you.


Greetings,
Tina Stancheva
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.

[Krati Chauhan]

Thanks for the reply Teena, but I was not able to successfully run the application as context menu is not coming. i checked the windowless property also and it was true.

anyways when i was trying the code given,

RadTreeViewItem item = (sender as RadContextMenu).GetClickedElement<RadTreeViewItem>();

returns only single item selected. but for mulitple tree view selection, we need a way to find the multiple selected items while opening the context menu.

How can we achieve the same. I tried your both codes and somehow both are not giving me the solution required.

[Tina Stancheva]

Hello Krati Chauhan,

In order to run the project you will need to set the 284486_TreeViewEmptyDisableContextMenu.Web as a StartUp Project and the 284486_TreeViewEmptyDisableContextMenuTestPage.aspx as a Start Page.

Also, I may have not understood your scenario correctly. Here is what I tried to do:
I access all selected items, using the SelectedItems collection of the RadTreeView in the OnMenuItemClicked() event handler, in order to highlight them (since my ContextMenu items are all called Highlight :) ).

In the RadContextMenu Opened() event handler I add the right clicked item to the RadTreeView SelectedItems collection if no other item is selected on a mouse right click (according to the requirement to allow multiple selection only through left mouse click + Ctrl key).

So, here
RadTreeViewItem item = (sender as RadContextMenu).GetClickedElement<RadTreeViewItem>();
each time the context menu is opened (the right mouse button is clicked) I get the right clicked item and add it to the RadTreeView SelectedItems collection:

if (RightClickedItems.Count == 0)
            {
                item.IsSelected = true;
                item.Focus();
                RightClickedItems.Add(item);
            }

The RightClickedItems collection is initially empty:
public ObservableCollection<RadTreeViewItem> RightClickedItems = new ObservableCollection<RadTreeViewItem>();
and it represents the list of items selected on a mouse right click.

If this collection contains items (RightClickedItems.Count != 0) then they are removed from the RadTreeView SelectedItems collection(RightClickedItem.IsSelected = false), then the new right clicked item is selected and the RightClickedItems collection is cleared, thus allowing only one item to be selected on a mouse right click. This is according to the requirement " When a user right clicks on node 'X' and then right clicks on node 'Y', the node 'X' should not be selected." and "2. The node on which the context menu was opened should be selected as well."

else
            {
                foreach (RadTreeViewItem RightClickedItem in RightClickedItems)
                {
                    RightClickedItem.IsSelected = false;
                }
                RightClickedItems.Clear();
                item.IsSelected = true;
                item.Focus();
                RightClickedItems.Add(item);
            }

Please let me know if this is what your scenario requires or if you need another approach.

Kind regards,
Tina Stancheva
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.

[Yogesh Kumar]

Hello Tina,

Your solution works for multiple selection, but we are facing the problem in retaining the style of the selected tree nodes in our project

When we select any tree node and click on / hover on any item in context menu, the tree node does not show the selected style. Please let us know how can we retain the style of the selected tree nodes

We are using PRISM framework and hence our coding is done in view model and not in xaml.cs

Thanks and Regards
Krati

[Tina Stancheva]

Hi Yogesh Kumar,

You can edit the RadTreeViewItem's style and modify the SelectionUnfocusedVisual Fill and Stroke values to match the SelectionVisual ones:

<Rectangle x:Name="SelectionUnfocusedVisual" Fill="{StaticResource NavigationSelectFill}" Stroke="{StaticResource NavigationSelectStroke}"
RadiusX="2" RadiusY="2" IsHitTestVisible="False" Visibility="Collapsed" Grid.Column="2" Grid.ColumnSpan="6"/>

<Rectangle x:Name="SelectionVisual" Fill="{StaticResource NavigationSelectFill}" Stroke="{StaticResource NavigationSelectStroke}"
RadiusX="2" RadiusY="2" IsHitTestVisible="False" Visibility="Collapsed" Grid.Column="2" Grid.ColumnSpan="6"/>

I modified the project to illustrate this approach.

Please give ti a try and let me know if this is what you had in mind.

Greetings,
Tina Stancheva
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.