How To Bind JSON Data To Xamarin.Forms Treeview (Sftreeview)

Updated on May 28, 2024

You can bind the data from JSON (JavaScript Object Notation) file to the Xamarin forms SfTreeView using ItemSource property.

You can also refer our article from Syncfusion KnowledgeBase

https://www.syncfusion.com/kb/12002/how-to-bind-json-data-to-xamarin-forms-treeview-sftreeview

STEP 1: Create a JSON data model

public class Cities
{
    public string Name { get; set; }
}

public class States
{
    public List<Cities> Cities { get; set; }
    public string Name { get; set; }
}

public class Countries
{
    public List<States> States { get; set; }
    public string Name { get; set; }
}
``` c#
**STEP 2:** Accessed the JSON file from local folder and use [StreamReader](https://docs.microsoft.com/en-us/dotnet/api/system.io.streamreader?view=netcore-3.1) to reads the data and return as a ObservableCollection property.

``` c#
private void GenerateSource()
{
    var assembly = typeof(MainPage).GetTypeInfo().Assembly;
    Stream stream = assembly.GetManifestResourceStream("TreeViewXamarin.Data.navigation.json");
    using (StreamReader sr = new StreamReader(stream))
    {
        var jsonText = sr.ReadToEnd();
        ImageNodeInfo = new ObservableCollection<Countries>();
        var MyArrayData = JsonConvert.DeserializeObject<List<Countries>>(jsonText);
        foreach (var data in MyArrayData)
        {
            ImageNodeInfo.Add(data);
        }
    }
}

STEP 3: Bind the JSON collection data to the SfTreeView ItemSource.

<syncfusion:SfTreeView x:Name="treeView"
                       ItemHeight="40"
                       Indentation="30"
                       ExpanderWidth="20"              
                       ItemsSource="{Binding ImageNodeInfo}" 
                       AutoExpandMode="RootNodesExpanded" NodePopulationMode="Instant">
    <syncfusion:SfTreeView.HierarchyPropertyDescriptors>
        <syncfusion1:HierarchyPropertyDescriptor TargetType="{x:Type local:Countries}" ChildPropertyName="States"/>
        <syncfusion1:HierarchyPropertyDescriptor TargetType="{x:Type local:States}" ChildPropertyName="Cities"/>
    </syncfusion:SfTreeView.HierarchyPropertyDescriptors>
    <syncfusion:SfTreeView.ItemTemplate>
        <DataTemplate>
            <ViewCell>
                <Grid x:Name="grid" BackgroundColor="Transparent">
                    <Label LineBreakMode="WordWrap"
                                           Text="{Binding Name}"
                                           TextColor="Black"
                                           VerticalTextAlignment="Center"/>
                </Grid>
            </ViewCell>
        </DataTemplate>
    </syncfusion:SfTreeView.ItemTemplate>
</syncfusion:SfTreeView>

Output JSONTreeViewXamarin