Context menu for TreeListView with multi row selected behaviour

[Dharmavaram]

Hi I am trying to add context menu for treelistview which has selectionmode as "Extended" value.

1)I want to show context menu when user selects multi rows and performs right click operation

2) Also I want to know how to get selected Items to my View model.

based on selected items only (I mean selected rows) I have to populate Items in my context menu which is again need to be binded in one of ViewModel property.  Items source for contextmenu should be bind to collection of items from my View mode.

 

Here is my code which is same as the code present in sample application 

 

======================

<telerik:RadTreeListView x:Name="RadTreeListView1"
AutoExpandItems="{Binding IsChecked, ElementName=AutoExpandItemsCheckBox, Mode=TwoWay}"
IsReadOnly="True"
ItemsSource="{Binding Folders}"
Width="600"
MinHeight="300"
Height="550"
CanUserFreezeColumns="False"
RowIndicatorVisibility="Collapsed"
ColumnWidth="*">
<telerik:RadTreeListView.ChildTableDefinitions>
<telerik:TreeListViewTableDefinition ItemsSource="{Binding Items}" />
</telerik:RadTreeListView.ChildTableDefinitions>
</telerik:RadTreeListView>
================================

 

Example menu items binding is as below .

<telerik:RadContextMenu  DataContext="{Binding PlacementTarget.DataContext, RelativeSource={RelativeSource Self}}"                                        ItemsSource="{Binding MenuItems, Mode=Default}" ItemContainerStyle="{StaticResource ContextMenuItemStyle}"                                        Visibility="{Binding Path=MenuItems.Count,Converter={StaticResource NumberToVisibilityConverter}}" />                                   

<Style x:Key="ContextMenuItemStyle" TargetType="{x:Type telerik:RadMenuItem}" BasedOn="{StaticResource {x:Type telerik:RadMenuItem}}">             <Setter Property="Command" Value="{Binding MenuCommand}"/>             <Setter Property="CommandParameter" Value="{Binding DataContext, RelativeSource={RelativeSource FindAncestor,AncestorType={x:Type telerik:RadContextMenu}}}"/>             <Setter Property="IsSeparator" Value="{Binding IsSeparator}"/>             <Setter Property="IsEnabled" Value="{Binding IsEnabled}"/>             <Setter Property="Header" Value="{Binding Content}"/>             <Setter Property="ItemsSource"  Value="{Binding Children}"/>             <Setter Property="FontWeight" Value="Normal"/>             <Setter Property="IsChecked"  Value="{Binding IsChecked}"/>             <Setter Property="IconTemplate">                 <Setter.Value>                     <DataTemplate>                         <uxt:UxtXamlImage Width="16" Height="16" Template="{Binding DataContext.Icon, Converter={uxt:StringToResourceConverter}, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type telerik:RadMenuItem}}}"/>                     </DataTemplate>  

               </Setter.Value>

            </Setter>

        </Style>

                                    

[Dinko | Tech Support Engineer]

Hello Dharmavaram,

Thank you for your interest in RadTreeListView control.

As a start, you can use the EventToCommandBehavior functionality. This behavior allows you to bind an event of a control to a command from your view model. You can read more about this in the EventToCommandBehavior help article. In your case, you can use it to bind a command to the SelectionChanging event. Don't forget to set the PassEventArgsToCommand property to true in order to pass the event arguments to the execution method. Then in the view model, you can create a collection which you can use to add/remove (you can get them from the event arguments) an item depending on the selection in the .

As a side note, the IsSynchronizedWithCurrentItem property of the RadTreeListView is set to true by default. Which means that initially the first row is always selected. You can set this property to false. If you want to keep this behavior you can create additional logic in the view model which will populate the collection with the first row.

Hope this information is helpful. I have prepared a sample project which demonstrates this approach. In the project, you observe that you can select multiple rows and by pressing the right button of the mouse a context menu will be open. The context menu ItemsSource is bound to the collection which is populated in the view model depending on the selected rows. Give this project a try and let me know if it works for you.

Regards,
Dinko
Progress Telerik