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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

TreeView Icons and Navigational Flow

Thread ID:

Created:

Updated:

Platform:

Replies:

150490 Jan 9,2020 02:12 AM UTC Jan 10,2020 05:47 AM UTC Xamarin.Forms 4
loading
Tags: SfTreeView
Emad Afaq
Asked On January 9, 2020 02:12 AM UTC

I have implemented the tree view. But I am facing a new challenge. I want to create child elements after clicking the plus sign. The child elements can only be created until level 3.

The hierarchy is as follows:

  • Epic
  • Feature
  • Backlog Item
  • Task

What I want to do is, create Feature by clicking the plus and so on. But “Task”, the lowest level cannot have a child.

 So my question is how to add these extra plus icons, And show different forms based on the node level where the last level (Task) cannot have a child/plus sign. 





Emad Afaq
Replied On January 9, 2020 08:48 AM UTC

Will it be a good way to control the pages like this in my code behind ?


            if (TappedNodes == 0)
            {
                var ID = TappedNode.ID.ToString();
                var data = await restServiceWorkItemDetail.GetWorkItemDetailAsync(ID);
                App.workDetail = data;
                await Navigation.PushAsync(new PBIDetailsPage());

            }
            else if (TappedNodes == 1)
            {
                Debug.WriteLine("1");

            }
            else if (TappedNodes == 2)
            {
                Debug.WriteLine("2");

            }
            else if (TappedNodes == 3)
            {
                Debug.WriteLine("3");

            }


Lakshmi Natarajan [Syncfusion]
Replied On January 9, 2020 12:01 PM UTC

Hi Emad, 
 
Thank you for using Syncfusion products. 
 
We have checked the reported query from our end. We would like to let you know that TreeView allows you to add icons and handle the visibility for the same based on the TreeViewNode.Level using Converter. Please refer the below code for more reference, 
 
Xaml: 
 
<Image Source="{Binding Content.AddIcon}" 
       IsVisible="{Binding Level, Converter={StaticResource ExpanderIconVisibilityConverter}}" /> 
 
C#: 
 
public class ExpanderIconVisibilityConverter : IValueConverter 
    { 
        public object Convert(object value, Type targetType, object parameter, CultureInfo culture) 
        { 
            return (int)value == 3 ? false : true; 
        } 
 
        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture) 
        { 
            throw new NotImplementedException(); 
        } 
    } 

 
We have attached the sample for your reference.  Please check the sample and let us know if you need any further assistance. 
 
Sample link: Sample 
 
Regards, 
Lakshmi Natarajan 


Emad Afaq
Replied On January 9, 2020 01:18 PM UTC

Ok i will do this part.

But i have one more question.

So when i tap the item it takes me to a detailed page and when i want to click this newly added icon, i want to go to three different pages with the id of that nide too.

I am already going to the details page with the selected item id but when i will use this plus icon, how will i be able to acces the id there too? 

Lakshmi Natarajan [Syncfusion]
Replied On January 10, 2020 05:47 AM UTC

Hi Emad, 
 
Thank you for the update. 
 
We have checked the reported query from our end. We would like to let you know that you can access any model class property in the command method by binding CommandParameter as BindingContext (i.e., TreeViewNode). 
 
Xaml: 
 
<Image Source="{Binding Content.AddIcon}" 
       Grid.Column="1" 
       IsVisible="{Binding Level, Converter={StaticResource IconVisibilityConverter}}" 
       VerticalOptions="Center" 
       HorizontalOptions="Center" 
       HeightRequest="35" 
       WidthRequest="35"> 
       <Image.GestureRecognizers> 
              <TapGestureRecognizer Command="{Binding Path=BindingContext.AddImageClickedCommand, Source={x:Reference treeView}}" CommandParameter="{Binding .}"/> 
       </Image.GestureRecognizers> 
</Image> 
 
C#: 
 
        private void OnAddImageClickedCommand(object obj) 
        { 
            var node = obj as TreeViewNode; 
            var musicInfo = node.Content as MusicInfo; 
 
            App.Current.MainPage.DisplayAlert("Add icon clicked", "ID " + musicInfo.ID, "OK"); 
 
            //if(musicInfo.ID == 1) 
                //go to page 1  
            //if (musicInfo.ID == 2) 
                //go to page 1  
            //if (musicInfo.ID == 3) 
                //go to page 1 
 
        }         
 
We have attached the sample for your reference.  Please check the sample and let us know if you need any further assistance. 
 
Sample link: Sample 
 
Regards, 
Lakshmi Natarajan 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon