MVVM Checkbox Checked/Unchecked event wiring

[Francisco Amador]

I've followed the guide for implementing tri-state checkbox logic using MVVM in the link below. While the logic itself works great, it completely breaks the calls to the Checked and Unchecked events from the treeview control.

http://www.telerik.com/help/silverlight/radtreeview-howto-tri-state-mvvm.html

I attempted to remedy that by also binding to the CheckState of the treeview container, but that doesn't seem to have helped. Here is my current binding setup

<telerik:ContainerBindingCollection x:Key="TreeViewCheckStateContainerBinding">
    <telerik:ContainerBinding PropertyName="CheckState" Binding="{Binding CheckedStatus, Mode=TwoWay}" />
    <telerik:ContainerBinding PropertyName="IsExpanded" Binding="{Binding IsExpanded, Mode=TwoWay}"/>
</telerik:ContainerBindingCollection>

<telerik:HierarchicalDataTemplate x:Key="FilterTreeItem" ItemsSource="{Binding Children}" telerik:ContainerBinding.ContainerBindings="{StaticResource TreeViewCheckStateContainerBinding}">
    <StackPanel Orientation="Horizontal" VerticalAlignment="Center">
        <CheckBox IsChecked="{Binding IsChecked, Mode=TwoWay}"/>
        <TextBlock Text="{Binding Name}" Foreground="Black" FontSize="13"/><!--ToolTipService.ToolTip="{Binding Code}"-->
    </StackPanel>
</telerik:HierarchicalDataTemplate>

And here is a sample tree view declaration.

<telerikNavigation:RadTreeView x:Name="InvHomeCatTree" HorizontalAlignment="Left" VerticalAlignment="Top"  ItemTemplate="{StaticResource FilterTreeItem}"
  IsLineEnabled="True" IsOptionElementsEnabled="False" IsRootLinesEnabled="True" animation:AnimationManager.IsAnimationEnabled="False" IsExpandOnSingleClickEnabled="True"/>

Is there a way for me to fire off the Checked/Unchecked events for the treeview when the checkbox in the ItemTemplate is checked? The events are bound programmatically so I would prefer a method that would allow me to continue doing it programmatically. My code currently needs the actual RadTreeViewItem for the item being checked so I can't simply fire something off in the bound data item that would tie it back to the corresponding treeview control.

[Martin Ivanov]

Hello Francisco,

The Checked and Unchecked events of the RadTreeView work with the internal checkbox logic, which means that when this functionality is turned off (IsOptionElementsEnabled = false) the events won't fire.

However, if you elaborate more on your scenario we might be able to assist you further with your implementation. Can you please tell me what exactly you want to do when the item is checked/unchecked? This will help me in better understanding your case and think of an option to achieve your requirement through the view models.

Also, note that the ContainerBinding class was used before Silverlight 5. This class was designed to workaround the missing Bindings in the Style Setters in Silverlight 4. This is why. This is why I strongly suggest you if you use Silverlight 5 to use Style instead. The following code snippet demonstrates how you can replace the container bindings with an implicit Style:

<Style TargetType="telerik:RadTreeViewItem">
    <Setter Property="IsExpanded" Value="{Binding IsExpanded, Mode=TwoWay}" />
    <Setter Property="CheckState" Value="{Binding CheckedStatus, Mode=TwoWay}" />
</Style>

This will apply the style to all UI elements in the style's scope, which are of type RadTreeViewItem.

Regards,
Martin
Telerik

 

 

[Francisco Amador]

The reason that I used to tie into the Checked/Unchecked event was because I had direct access to the RadTreeViewItem that was checked and by looking at the RadTreeViewCheckEventArgs I could tell if it was a user initiated event easily. If I turn on IsOptionElementsEnabled would it still fire the events if I set that style which changes the "CheckState" when it's checked? I used to have it enabled, but only turned it off due to adding the checkbox in the template. Wasn't sure if it would conflict. I don't have time to try it right now, but I'll look into it in the next few days.

The reason I need access to the RadTreeViewItem itself is that I already have a lot of code that depends on having this item type. I use these treeviews to select filters for a gridview. When an item is checked I then create some custom controls that display all the currently selected filters and which has the ability to remove filters from any of these treeviews. When a filter is removed it would go back to the referenced RadTreeViewItem and uncheck it. Since there is so much code tied to it, I would rather not mess with any of that code that I know works.

[Martin Ivanov]

Hi Francisco,

Thank you for the explanation.

A possible approach for your case could be to define custom Checked and Unchecked events in your view model and call them in the setter of the IsChecked property. If the property is true call the Checked event otherwise call Unchecked. This way you can listen for check/uncheck in your view models. In the event handlers you can get the tree view item with the RadTreeView.ContainerFromItemRecursive() method, however, keep in mind this method is expensive and we do not recommend it in scenarios with big amount of data. Instead you can implement Path property in your view models that describes the tree view items and use the GetItemByPath() method of the RadTreeView. In addition you can see MVVM example of tree view that uses the BringPathIntoView() method in our help, which you can use as a base to implement the Path property.

For your convenience I prepared a project demonstrating this approach. Please take a look at it and see if it works for you.

Regards,
Martin
Telerik