How to expand tree after item added to bound observable

[Oscar Garcia San Jose]

We have a view a bound sfTreeView with a starting empty observable.

                                       ItemHeight="35"

                                       Indentation="10"

                                       IsAnimationEnabled="true"

                                       ExpanderWidth="15"

                                       CheckBoxMode="Recursive"

                                       NodePopulationMode="Instant"

                                       SelectionMode="Extended"

                                       ItemTemplateContextType="Node"

                                       CheckedItems="{Binding CheckedItems}"

                                       ItemsSource="{Binding TreeData}"

                                       AutoExpandMode="AllNodesExpanded">

By commands from button or barcode read items are created and added to the observable. When a level 0 (root) item is added it appears on screen, when a level 1 is added the tree is updated and to see the element the user has to expand the tree manually. 

 How can we expand the tree at runtime when the item is added at level 1 to the observable? 

public ObservableCollection TreeData { get; set; }

var tree = new RootTree();

tree.Capacity = 9;

tree.TagInfo = new Tag();

tree.Leaves = new ObservableCollection();

var leaf = new LeafTree();

leaf.TagInfo = new Tag();

tree.Leaves.Add(leaf);

TreeData.Add(tree);

Attachment: TestTreeView_c29ff0d8.7z

[Lakshmi Natarajan]

Hi Oscar, 

 

Thank you for using Syncfusion products. 

 

We have checked the reported query “How to expand tree after item added to bound observable” from our side. You can achieve your requirement by using the SfTreeView.BringIntoView method to show the particular node. Please refer to the following code snippets for more reference, 

UG link: https://help.syncfusion.com/xamarin/treeview/scrolling#scroll-to-the-collapsed-child-item 

 

We have modified the shared sample and attached in the following link, 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Test-TreeView-933099050 

Video: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Video448530336 

 

XAML: Pass the SfTreeView as the CommandParameter to bring the child node into the view. 

<StackLayout Margin="5" Orientation="Vertical" BackgroundColor="White"> 

... 

    <sfTreeView:SfTreeView x:Name="treeView"                          NotificationSubscriptionMode="CollectionChange,PropertyChange" 

                                ItemHeight="35" 

                                Indentation="10" 

                                IsAnimationEnabled="true" 

                                ExpanderWidth="15" 

                                CheckBoxMode="Recursive" 

                                NodePopulationMode="Instant" 

                                SelectionMode="Extended" 

                                ItemTemplateContextType="Node" 

                                CheckedItems="{Binding CheckedItems}" 

                                ItemsSource="{Binding TreeData}" 

                                AutoExpandMode="AllNodesExpanded"> 

        ... 

    </sfTreeView:SfTreeView> 

    <Grid HorizontalOptions="FillAndExpand" VerticalOptions="EndAndExpand"> 

        ... 

        <SfButtons:SfButton Grid.Row="0" Grid.Column="1"  

                    Text="Add Leaf" 

                    TextColor="Black" 

                    HorizontalOptions="Center" 

                    VerticalOptions="Center" 

                    BackgroundColor="White" 

                    CornerRadius="2" 

                    BorderColor="#3246C7" 

                    Command="{Binding ButtonAddLeafCommand}" 

                    CommandParameter="{x:Reference treeView}"> 

        </SfButtons:SfButton> 

    </Grid> 

</StackLayout> 

  

C#: Using the BringIntoView method, you can expand the parent of the added node. 

public ICommand ButtonAddLeafCommand => new Command((object obj) => AddLeafButton(obj)); 

 

private void AddLeafButton(object obj) 

{ 

    try 

    { 

        var treeView = obj as Syncfusion.XForms.TreeView.SfTreeView; 

        if (TreeData.Count > 0 && (TreeData[0].Capacity > 0)) 

        { 

            Tag bTag = new Tag(); 

            bTag.Name = "Leaf_" + Lcount; 

            bTag.EPC = Guid.NewGuid().ToString(); 

 

            var leaf = new LeafTree(); 

            leaf.TagInfo = bTag; 

            ObservableCollection<LeafTree> auxL = TreeData[0].Leaves; 

            auxL.Add(leaf); 

            Device.BeginInvokeOnMainThread(async () => 

            { 

                TreeData[0].Leaves = auxL;  

                TreeData[0].Capacity -= 1; 

                CheckedItems.Add(leaf); 

                await Task.Delay(500); 

            }); 

            Lcount++; 

            treeView.BringIntoView(leaf, false, true); 

        } 

        else 

        { 

            string msg = String.Format("Max Capacity reach for:\n {0}\n Contact Supervisor.", TreeData[0].TagInfo.EPC); 

        } 

 

    } 

    catch (Exception ex) 

    { 

                 

    } 

} 

Note: Accessing the UI elements in the ViewModel affects the MVVM. You can use the Behaviors to maintain the MVVM pattern. 

 

Please refer to our online documentation regarding the same from the following link, 

KB link: https://www.syncfusion.com/kb/11802/how-to-bring-the-treeview-child-node-to-view-when-the-root-node-is-collapsed-in-xamarin 

 

Please let us know if you need further assistance. 

 

Regards, 

Lakshmi Natarajan