Articles in this section
Category / Section

How to get the tapped node full path in .NET MAUI TreeView (SfTreeView)?

6 mins read

To retrieve the full path of a TreeViewNode in a .NET MAUI TreeView when a node is tapped, you can utilize the TapCommand property. This allows you to execute a command that can access and process the node’s information upon user interaction.

XAML

<syncfusion:SfTreeView x:Name="treeView"
                       TapCommand="{Binding TappedCommand}"
                       ChildPropertyName="SubFiles"
                       ItemsSource="{Binding ImageNodeInfo}">
    <syncfusion:SfTreeView.ItemTemplate>
        <DataTemplate>
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"/>
                </Grid.RowDefinitions>
                <Grid x:Name="grid" RowSpacing="0" >
                    <Grid.RowDefinitions>
                        <RowDefinition Height="*" />
                        <RowDefinition Height="1" />
                    </Grid.RowDefinitions>
                    <Grid RowSpacing="0" Grid.Row="0" >
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="40" />
                            <ColumnDefinition Width="*" />
                        </Grid.ColumnDefinitions>
                        <Grid Padding="5">
                            <Image Source="{Binding ImageIcon}"
                                    VerticalOptions="Center"
                                    HorizontalOptions="Center"
                                    HeightRequest="35" 
                                    WidthRequest="35"/>
                        </Grid>
                        <Grid Grid.Column="1"              
                               RowSpacing="1"
                               Padding="1,0,0,0"
                               VerticalOptions="Center">
                            <Label LineBreakMode="NoWrap"
                            Text="{Binding ItemName}"
                            VerticalTextAlignment="Center">
                            </Label>
                        </Grid>
                    </Grid>
                    <StackLayout Grid.Row="1"/>
                </Grid>
            </Grid>
        </DataTemplate>
    </syncfusion:SfTreeView.ItemTemplate>
</syncfusion:SfTreeView>

ViewModel

private Command<object>? tappedCommand;

public Command<object>? TappedCommand
{
    get { return tappedCommand; }
    set { tappedCommand = value; }
}

public FileManagerViewModel()
{
    TappedCommand = new Command<object>(ExecuteTapCommand);
}

// If a user taps on a node in the TreeView, this method gets triggered,
// retrieves the full path of the node, and displays it in an alert.
private void ExecuteTapCommand(object obj)
{
    var tappedNode = obj as Syncfusion.TreeView.Engine.TreeViewNode;
    string nodepath = GetNodePath(tappedNode);
    
    // Show the full path of the tapped node in display alert.
    App.Current!.MainPage!.DisplayAlert("Path ", nodepath, "Ok");
}

// Method to retrieve the full hierarchical path of the tapped node.
private string GetNodePath(TreeViewNode? node)
{
    string fullpath = "";
    string path = "";

    while (node != null)
    {
        // extracts the node's name.
        path = @"\" + (node.Content as FileManager)!.ItemName;

        // If the node has a parent, node is set to its parent(node.ParentNode).
        // If there is no parent, node is set to null, terminating the loop.
        if (node.ParentNode != null)
        {
            node = node.ParentNode;
        }
        else
        {
            node = null;
        }
        fullpath = path + fullpath;
    }
    return fullpath;
}

TreeViewNode-Path.png

View sample in GitHub

Conclusion
I hope you enjoyed learning about how to get the tapped node full path in .NET MAUI TreeView.

You can refer to our .NET MAUI TreeView Feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications.

You can also explore our .NET MAUI TreeView example to understand how to create and manipulate data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Please  to leave a comment
Access denied
Access denied