We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

CheckBoxMode Recursive not working

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


2 Replies 1 reply marked as answer

DM Dhanasekar Mohanraj Syncfusion Team February 14, 2023 02:04 PM UTC

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

Marked as answer

DH Declan Hillier February 14, 2023 03:15 PM UTC

That did it.  Thank you very much.


Loader.
Live Chat Icon For mobile
Up arrow icon