CheckBoxMode Recursive not working

[Declan Hillier]

Hi

I've got a TreeView that I've bound to a collection of "Levels". I want the checking behaviour to work as described in recursive mode: checking a box should update the children and parents and this should allow an intermediate state when some but not all children are checked.

I've set the CheckBoxMode to Recursive but this seems to be being ignored. It appears to be operating in "None" mode.

Here's my xaml:-

<Window x:Class="TestCheckTree.MainWindow"

        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

        xmlns:sf="http://schemas.syncfusion.com/wpf"

        xmlns:local="clr-namespace:TestCheckTree"

        mc:Ignorable="d"

        Title="MainWindow" Height="450" Width="800">

    <Grid>

        <sf:SfTreeView Name="LevelsTree"

                       ChildPropertyName="SubItems"

                       ItemsSource="{Binding Levels}"

                       CheckBoxMode="Recursive"

                       HorizontalAlignment="Stretch"

                       VerticalAlignment="Stretch"

                       Margin="2,2,2,2">

            <sf:SfTreeView.ItemTemplate>

                <DataTemplate>

                    <Grid>

                        <Grid.ColumnDefinitions>

                            <ColumnDefinition Width="Auto"/>

                            <ColumnDefinition Width="*"/>

                        </Grid.ColumnDefinitions>

                        <CheckBox Grid.Column="0"

                                          FocusVisualStyle="{x:Null}"

                                          IsChecked="{Binding IsChecked, Mode=TwoWay}"/>

                        <TextBlock Grid.Column="1"

                                           Text="{Binding Description}"

                                           Foreground="Black"

                                           FontSize="14"

                                           VerticalAlignment="Center" />

                    </Grid>

                </DataTemplate>

            </sf:SfTreeView.ItemTemplate>

        </sf:SfTreeView>

    </Grid>

</Window>

And here's the code behind:-

namespace TestCheckTree

{

///

/// Interaction logic for MainWindow.xaml

///

public partial class MainWindow : Window

{

private MainWindowViewModel mViewModel;

public MainWindow()

{

InitializeComponent();

mViewModel = new MainWindowViewModel();

this.DataContext = mViewModel;

SetupLevels();

}

public void SetupLevels()

{

LevelMenuGroup ReservoirGroups1 = new LevelMenuGroup() { Description = "Reservoir Groups", SubItems = new ObservableCollection() };

LevelMenuGroup Reservoirs1 = new LevelMenuGroup() { Description = "Reservoirs", SubItems = new ObservableCollection() };

LevelMenuGroup StorageCalculated = new LevelMenuGroup() { Id = "Storage.Calculated", Description = "Storage.Calculated", SubItems = new ObservableCollection() { ReservoirGroups1, Reservoirs1 } };

LevelMenuGroup ReservoirGroups2 = new LevelMenuGroup() { Description = "Reservoir Groups", SubItems = new ObservableCollection() };

LevelMenuGroup Reservoirs2 = new LevelMenuGroup() { Description = "Reservoirs", SubItems = new ObservableCollection() };

LevelMenuGroup StorageCalculatedPercent = new LevelMenuGroup() { Id = "Storage.Calculated (%)", Description = "Storage.Calculated (%)", SubItems = new ObservableCollection() { ReservoirGroups2, Reservoirs2 } };

LevelMenuGroup Reaches1 = new LevelMenuGroup() { Description = "Reaches", SubItems = new ObservableCollection() };

LevelMenuGroup InflowNet = new LevelMenuGroup() { Id = "Inflow.Net", Description = "Inflow.Net", SubItems = new ObservableCollection() { Reaches1 } };

LevelMenuGroup Reaches2 = new LevelMenuGroup() { Description = "Reaches", SubItems = new ObservableCollection() };

LevelMenuGroup OutflowNet = new LevelMenuGroup() { Id = "Outflow.Net", Description = "Outflow.Net", SubItems = new ObservableCollection() { Reaches2 } };

LevelMenuGroup GuagingStations = new LevelMenuGroup() { Description = "Guaging Stations", SubItems = new ObservableCollection() };

LevelMenuGroup FlowNet = new LevelMenuGroup() { Id = "Flow.Net", Description = "Flow.Net", SubItems = new ObservableCollection() { GuagingStations } };

mViewModel.Levels = new ObservableCollection() { StorageCalculated, StorageCalculatedPercent, InflowNet, OutflowNet, FlowNet };

}

}

public class MainWindowViewModel

{

public ObservableCollection Levels { get; set; }

}

public class LevelMenuGroup

{

public string Id { get; set; }

public string Description { get; set; }

public bool IsChecked { get; set; }

public ObservableCollection SubItems { get; set; }

}

}

Any idea what I'm getting wrong? I'm sure I'm missing something simple.

Edit> I've also noticed that binding the CheckedItems property to an observable collection of LevelMenuGroup in the view model does not result in the collection being updated.  So this really looks like I'm getting the behaviour for a Check

[Dhanasekar Mohanraj]

Hi Declan Hillier,

We have checked the reported problem with the provided details. In that, when you are using the CheckboxMode you should set the ItemTemplateDataContextType as Node as shown below,

<sf:SfTreeView Name="LevelsTree"

               ChildPropertyName="SubItems"

               AutoExpandMode="AllNodes"

               ItemsSource="{Binding Levels}"

               CheckBoxMode="Recursive"

               ItemTemplateDataContextType="Node"

               HorizontalAlignment="Stretch"

               VerticalAlignment="Stretch"

               Margin="2,2,2,2">

    <sf:SfTreeView.ItemTemplate>

        <DataTemplate>

            <Grid>

                <Grid.ColumnDefinitions>

                    <ColumnDefinition Width="Auto"/>

                    <ColumnDefinition Width="*"/>

                </Grid.ColumnDefinitions>

                <CheckBox Grid.Column="0"

                          x:Name="checkBox"

                                  FocusVisualStyle="{x:Null}"

                                  IsChecked="{Binding IsChecked}"/>

                <TextBlock Grid.Column="1"

                                   Text="{Binding Content.Description}"

                                   Foreground="Black"

                                   FontSize="14"

                                   VerticalAlignment="Center" />

            </Grid>

        </DataTemplate>

    </sf:SfTreeView.ItemTemplate>

</sf:SfTreeView>

For more information related to ItemTemplateDataContextType, please refer to the below user guide documentation link,

UG Link: https://help.syncfusion.com/wpf/treeview/checkbox#working-with-checkbox-in-boundmode

Here we have prepared the sample with the above suggestion please have a look at this.

Regards,

Dhanasekar M.

If this post is helpful, please consider Accepting it as the solution so that other members can locate it more quickly.

Attachment: SfTreeViewDemo_8177b9d2.zip

[Declan Hillier]

That did it.  Thank you very much.