1. Home
  2. Forum
  3. Xamarin.Forms
  4. Setting and Scrolling to CurrentItem based on node's ID

Setting and Scrolling to CurrentItem based on node's ID

Hi team! I'm currently using the Treeview control to display an organization, each node contains several items, including an unique ID for each node.

If I click and node, the app goes to another screen, when I come back to the previous screen, an event is triggered and the data is reloaded. When the data is reloaded from a webservice, the selected item becomes unselected. 

I have tried with no success to reselect the previously selected item once the user returns to the tree view screen.

I need the tree view to scroll to the previously selected item and show it as selected, based on the item's unique id.

Can you guys please help me out on this? Thanks :D

Andres.

3 Replies
CS Chandrasekar Sampathkumar Syncfusion Team April 30, 2020 06:19 PM UTC

Hi Andres, 
Thank you for using Syncfusion products. 
We have checked the reported query “Scroll to selected node after navigating back” from our end. You can achieve your requirement by obtaining the selected node’s Id from TreeView ItemTappedEventArgs and assign it to ViewModel Id property. On navigating back to TreeView page, find the node using ViewModel Id with recursion in ContentPage’s OnAppearing and scroll to selected node using BringIntoView() method like in the following code snippets, 
C#: Using ItemTapped event to get the Selected Node Id 
namespace TreeViewXamarin 
{ 
    public class Behavior : Behavior<SfTreeView> 
    { 
        SfTreeView treeView; 
        FileManagerViewModel viewModel; 
        protected override void OnAttachedTo(SfTreeView bindable) 
        { 
            treeView = bindable; 
            treeView.ItemTapped += Bindable_ItemTapped; 
            treeView.Loaded += TreeView_Loaded; 
            base.OnAttachedTo(bindable); 
        } 
 
        private void TreeView_Loaded(object sender, TreeViewLoadedEventArgs e) 
        { 
            treeView.ExpandAll(); 
        } 
 
        private void Bindable_ItemTapped(object sender, Syncfusion.XForms.TreeView.ItemTappedEventArgs e) 
        { 
      if (e.Node.HasChildNodes) 
                return; 
            viewModel = treeView.BindingContext as FileManagerViewModel; 
            viewModel.Id = (e.Node.Content as FileManager).Id; 
            App.Current.MainPage.Navigation.PushAsync(new NewPage()); 
        } 
 
        protected override void OnDetachingFrom(SfTreeView bindable) 
        { 
            treeView.ItemTapped -= Bindable_ItemTapped; 
            treeView.Loaded -= TreeView_Loaded; 
            treeView = null; 
            base.OnDetachingFrom(bindable); 
        } 
    } 
} 
C#: Defining Id property in ViewModel 
namespace TreeViewXamarin 
{ 
    public class FileManagerViewModel : INotifyPropertyChanged 
    { 
        private int _id; 
 
        public FileManagerViewModel() 
        { 
        } 
 
        public int Id 
        { 
            get => _id; 
            set 
            { 
                _id = value; 
                OnPropertyChanged("Id"); 
            } 
        } 
        ... 
        private void OnPropertyChanged(string property) 
        { 
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(property)); 
        } 
    } 
} 
C#: Scrolling to selected node in ContentPage’s OnAppearing method 
namespace TreeViewXamarin 
{ 
    public partial class MainPage : ContentPage 
    { 
        FileManager item; 
        public MainPage() 
        { 
            InitializeComponent(); 
        } 
 
        protected override void OnAppearing() 
        { 
            var bindingContext = this.BindingContext as FileManagerViewModel; 
            treeView.ExpandAll(); 
            foreach (var node in bindingContext.ImageNodeInfo) 
                GetChildNode(node, bindingContext.Id); 
            treeView.BringIntoView(item, true); 
            base.OnAppearing(); 
        } 
        private void GetChildNode(FileManager node, int idx) 
        { 
            if (node.SubFiles.Count <= 0) return; 
 
            foreach (var child in node.SubFiles) 
            { 
                if (child.Id == idx) 
                { 
                    item = child;  
                } 
                if (child.SubFiles != null) 
                { 
                    this.GetChildNode(child, idx); 
                } 
            } 
        } 
    } 
} 
You can also achieve your requirement by obtaining the selected node from TreeView ItemTappedEventArgs and assign it to ViewModel SelectedNode property. On navigating back to TreeView page, set the ViewModel SelectedNode to treeView.SelectedItem in ContentPage’s OnAppearing method and scroll to selected node using BringIntoView() method like in the following code snippets, 
C#: Using ItemTapped event to get selected node 
namespace TreeViewXamarin 
{ 
    public class Behavior : Behavior<SfTreeView> 
    { 
        SfTreeView treeView; 
        FileManagerViewModel viewModel; 
        protected override void OnAttachedTo(SfTreeView bindable) 
        { 
            treeView = bindable; 
            treeView.ItemTapped += Bindable_ItemTapped; 
            treeView.Loaded += TreeView_Loaded; 
            base.OnAttachedTo(bindable); 
        } 
 
        private void TreeView_Loaded(object sender, TreeViewLoadedEventArgs e) 
        { 
            treeView.ExpandAll(); 
        } 
 
       private void Bindable_ItemTapped(object sender, Syncfusion.XForms.TreeView.ItemTappedEventArgs e) 
        { 
      if (e.Node.HasChildNodes) 
                return; 
            viewModel = treeView.BindingContext as FileManagerViewModel; 
            viewModel.SelectedNode = e.Node.Content as FileManager; 
            App.Current.MainPage.Navigation.PushAsync(new NewPage()); 
        } 
 
        protected override void OnDetachingFrom(SfTreeView bindable) 
        { 
            treeView.ItemTapped -= Bindable_ItemTapped; 
            treeView.Loaded -= TreeView_Loaded; 
            treeView = null; 
            base.OnDetachingFrom(bindable); 
        } 
    } 
} 
C#: Defining SelectedNode property in ViewModel 
namespace TreeViewXamarin 
{ 
    public class FileManagerViewModel : INotifyPropertyChanged 
    { 
        private FileManager _selectedNode; 
 
        public FileManagerViewModel() 
        { 
        } 
 
        public FileManager SelectedNode 
        { 
            get => _selectedNode; 
            set 
            { 
                _selectedNode = value; 
                OnPropertyChanged("SelectedNode"); 
            } 
        } 
        ... 
 
        private void OnPropertyChanged(string property) 
        { 
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(property)); 
        } 
    } 
} 
C#: Scrolling to selected node in ContentPage’s OnAppearing method 
namespace TreeViewXamarin 
{ 
    public partial class MainPage : ContentPage 
    { 
        FileManager item; 
        public MainPage() 
        { 
            InitializeComponent(); 
        } 
 
       protected override void OnAppearing() 
        { 
            treeView.ExpandAll(); 
            if ((this.BindingContext as FileManagerViewModel).SelectedNode != null) 
            { 
                treeView.SelectedItem = (this.BindingContext as FileManagerViewModel).SelectedNode; 
            } 
            treeView.BringIntoView((this.BindingContext as FileManagerViewModel).SelectedNode, true); 
            base.OnAppearing(); 
        } 
    } 
} 
We have prepared a sample and attached the tested sample for your reference and you can download the same using the following link, 
Sample Link: SfTreeViewSample 
Video Link: Video 
Please let us know if the solution works. 
Regards, 
Chandrasekar Sampathkumar 


AA Andres Alvarado May 5, 2020 04:56 AM UTC

Thanks Chandrasekar for the update. I was able to get to the selected node. However, for some reason is not showing up as selected on the treeview control. 

I'll investigate a little bit further and then I'll let you know if I manage to make it work.

Thanks!

Andres.

CS Chandrasekar Sampathkumar Syncfusion Team May 5, 2020 06:19 AM UTC

Hi Andres, 
Thank you for the update. 
We will wait for your response. 
Regards, 
Chandrasekar Sampathkumar 


Loader.
Up arrow icon