TreeView Icons and Navigational Flow

[Emad Afaq]

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]

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]

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]

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]

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