Duplicate tree view does not correctly update partially selected items

We are currently using Syncfusion version 19.4.0.54.

We have two tree views which need to be in sync.

When user makes selection on one it needs to be reflected to another one.

Selection is reflecting single node selection but we also need that parent node is flagged as partially selected when not all child nodes are selected and to be fully selected when all child nodes are selected.

In attachment you could find example to replicate issue.

Could you help us with this issue?


Attachment: SfTreeView_Sample_4925abb5.zip


1 Reply

VS Vijayarasan Sivanandham Syncfusion Team April 15, 2022 04:00 PM UTC

Hi Igor Surla,

Your requirement to selection applied in one TreeView and it will be reflected to another one can be achieved by bound to sfTreeView.SelectedItems property to the sfTreeView2.SelectedItems property. Please refer the below code snippet,

<Grid>

        <Grid.ColumnDefinitions>

            <ColumnDefinition/>

            <ColumnDefinition/>

        </Grid.ColumnDefinitions>

 

        <syncfusion:SfTreeView

            Grid.Column="0"

                    x:Name="sfTreeView"

                    Margin="10"

                    BorderThickness="1"

                    AutoExpandMode="AllNodes"

                    BorderBrush="LightGray"

                    AllowDragging="True"

                    SelectionMode="Multiple"

                    CheckBoxMode ="Recursive"

                    CheckedItems="{Binding CheckedStates}"

                    ChildPropertyName="Models"

                    ExpandActionTrigger="Node"

                    ItemTemplateDataContextType="Node"

                    FocusVisualStyle="{x:Null}"

                    IsAnimationEnabled="True"                    

                    ItemsSource="{Binding Items}" >

            <syncfusion:SfTreeView.ItemTemplate>

                <DataTemplate>

                    <Grid>                       

                        <CheckBox x:Name="CheckBox" FocusVisualStyle="{x:Null}"

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

                        <TextBlock FontSize="12" VerticalAlignment="Center" Text="{Binding Content.State}" Margin="25,0,0,0"/>

                    </Grid>

                </DataTemplate>

            </syncfusion:SfTreeView.ItemTemplate>

        </syncfusion:SfTreeView>

 

        <syncfusion:SfTreeView

            x:Name="sfTreeView2"

            Grid.Column="1"

            Margin="10"

            BorderThickness="1"

            AutoExpandMode="AllNodes"

            BorderBrush="LightGray"

            AllowDragging="True"

            SelectionMode="Multiple"

            CheckBoxMode ="Recursive"

            CheckedItems="{Binding CheckedStates}"

            SelectedItems="{Binding SelectedItems, ElementName=sfTreeView}"

            ChildPropertyName="Models"

            ExpandActionTrigger="Node"

            ItemTemplateDataContextType="Node"

            FocusVisualStyle="{x:Null}"

            IsAnimationEnabled="True"                    

            ItemsSource="{Binding Items}" >

            <syncfusion:SfTreeView.ItemTemplate>

                <DataTemplate>

                    <Grid>

                        <CheckBox x:Name="CheckBox" FocusVisualStyle="{x:Null}"

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

                        <TextBlock FontSize="12" VerticalAlignment="Center" Text="{Binding Content.State}" Margin="25,0,0,0"/>

                    </Grid>

                </DataTemplate>

            </syncfusion:SfTreeView.ItemTemplate>

        </syncfusion:SfTreeView>     

</Grid>


Please find the sample in the attachment and let us know if you have any concerns in this.


Regards,

Vijayarasan S


Attachment: SfTreeView_Sample_7f1ae755.zip

Loader.
Up arrow icon