LocalData.razor

@page "/treeview/local-data"

@using Syncfusion.Blazor.Navigations

@inherits SampleBaseComponent;

<SampleDescription>
    <p> The <a href='https://www.syncfusion.com/blazor-components/blazor-treeview' target='_blank'>Blazor TreeView</a> sample demonstrates the binding of local data to the TreeView. Click on node to select it, and click on icon or double click on node to expand/collapse it.</p>
</SampleDescription>
<ActionDescription>
   <p>The TreeView component loads the data through the dataSource property, where the data can be either local data or remote data. In case of local data, the data structure can be hierarchical data or list data (with self-referential format i.e., mapped with the Id and ParentID fields). In this demo, the first TreeView is bound with the hierarchical data that contains array of nested objects. And the second TreeView is bound with the list type data where the parent-child relation is referred by the Id and ParentID mapping fields. More information about Treeview can be found in this <a target='blank' href='https://ej2.syncfusion.com/aspnet-core-blazor/documentation/treeview/data-binding/'>documentation</a> section .</p>
</ActionDescription>

<div class="col-lg-12 control-section">
    <div class="col-lg-6 nested-data">
        <div class="content">
            <h4>Hierarchical Data</h4>
            <SfTreeView TValue="TreeData">
                <TreeViewFieldsSettings DataSource="@TreeDataSource" Id="Code" Text="Name" Selected="Selected" Expanded="Expanded" Child="@("Child")"></TreeViewFieldsSettings>
            </SfTreeView>
        </div>
    </div>
    <div class="col-lg-6 list-data">
        <div class="content">
            <h4>List Data</h4>
            <SfTreeView TValue="Listdata">
                <TreeViewFieldsSettings DataSource="@ListDataSource" Id="Id" ParentID="Pid" Text="Name" HasChildren="HasChild" Expanded="Expanded"></TreeViewFieldsSettings>
            </SfTreeView>

        </div>
    </div>
</div>

@code{
    List<Listdata> ListDataSource = new List<Listdata>();

    List<TreeData> TreeDataSource = new List<TreeData>();

    protected override void OnInitialized()
    {
        base.OnInitialized();
        ListDataSource.Add(new Listdata
        {
            Id = "1",
            Name = "Australia",
            HasChild = true,
            Expanded = true
        });
        ListDataSource.Add(new Listdata
        {
            Id = "2",
            Pid = "1",
            Name = "New South Wales",

        });
        ListDataSource.Add(new Listdata
        {
            Id = "3",
            Pid = "1",
            Name = "Victoria"
        });

        ListDataSource.Add(new Listdata
        {
            Id = "4",
            Pid = "1",
            Name = "South Australia"
        });
        ListDataSource.Add(new Listdata
        {
            Id = "6",
            Pid = "1",
            Name = "Western Australia",

        });
        ListDataSource.Add(new Listdata
        {
            Id = "7",
            Name = "Brazil",
            HasChild = true
        });
        ListDataSource.Add(new Listdata
        {
            Id = "8",
            Pid = "7",
            Name = "Paraná"
        });
        ListDataSource.Add(new Listdata
        {
            Id = "9",
            Pid = "7",
            Name = "Ceará"
        });
        ListDataSource.Add(new Listdata
        {
            Id = "10",
            Pid = "7",
            Name = "Acre"
        });
        ListDataSource.Add(new Listdata
        {
            Id = "11",
            Name = "China",
            HasChild = true
        });
        ListDataSource.Add(new Listdata
        {
            Id = "12",
            Pid = "11",
            Name = "Guangzhou"
        });
        ListDataSource.Add(new Listdata
        {
            Id = "13",
            Pid = "11",
            Name = "Shanghai"
        });
        ListDataSource.Add(new Listdata
        {
            Id = "14",
            Pid = "11",
            Name = "Beijing"
        });
        ListDataSource.Add(new Listdata
        {
            Id = "15",
            Pid = "11",
            Name = "Shantou"

        });
        ListDataSource.Add(new Listdata
        {
            Id = "16",
            Name = "France",
            HasChild = true

        });
        ListDataSource.Add(new Listdata
        {
            Id = "17",
            Pid = "16",
            Name = "Pays de la Loire"

        });
        ListDataSource.Add(new Listdata
        {
            Id = "18",
            Pid = "16",
            Name = "Aquitaine"

        });
        ListDataSource.Add(new Listdata
        {
            Id = "19",
            Pid = "16",
            Name = "Brittany"

        });
        ListDataSource.Add(new Listdata
        {
            Id = "20",
            Pid = "16",
            Name = "Lorraine"
        });
        ListDataSource.Add(new Listdata
        {
            Id = "21",
            Name = "India",
            HasChild = true

        });
        ListDataSource.Add(new Listdata
        {
            Id = "22",
            Pid = "21",
            Name = "Assam"

        });
        ListDataSource.Add(new Listdata
        {
            Id = "23",
            Pid = "21",
            Name = "Bihar"
        });
        ListDataSource.Add(new Listdata
        {
            Id = "24",
            Pid = "21",
            Name = "Tamil Nadu"

        });

        TreeDataSource.Add(new TreeData
        {
            Code = "NA",
            Name = "North America",
            Expanded = true,
            Child = new List<TreeData>()
            {
                new TreeData { Code = "USA", Name = "United States of America", Selected = true },
                new TreeData { Code = "CUB", Name = "Cuba" },
                new TreeData { Code = "MEX", Name = "Mexico" },
            },
        });

        TreeDataSource.Add(new TreeData
        {
            Code = "AF",
            Name = "Africa",
            Child = new List<TreeData>()
            {
                new TreeData { Code = "NGA", Name = "Nygeria" },
                new TreeData { Code = "EGY", Name = "Egypt" },
                new TreeData { Code = "ZAF", Name = "South Africa" },
            },
        });

        TreeDataSource.Add(new TreeData
        {
            Code = "AS",
            Name = "Asia",
            Child = new List<TreeData>()
            {
                new TreeData { Code = "CHN", Name = "China" },
                new TreeData { Code = "IND", Name = "India" },
                new TreeData { Code = "JPN", Name = "Japan" },
            },
        });

        TreeDataSource.Add(new TreeData
        {
            Code = "EU",
            Name = "Europe",
            Child = new List<TreeData>()
            {
                new TreeData { Code = "DNK", Name = "Denmark" },
                new TreeData { Code = "AUT", Name = "Austria" },
                new TreeData { Code = "FIN", Name = "Finland" },
            },
        });


        TreeDataSource.Add(new TreeData
        {
            Code = "SA",
            Name = "South America",
            Child = new List<TreeData>()
            {
                new TreeData { Code = "BRA", Name = "Brazil" },
                new TreeData { Code = "COL", Name = "Colombia" },
                new TreeData { Code = "ARG", Name = "Argentina" },
            },
        });

        TreeDataSource.Add(new TreeData
        {
            Code = "OC",
            Name = "Oceania",
            Child = new List<TreeData>()
            {
                new TreeData { Code = "AUS", Name = "Australia" },
                new TreeData { Code = "NZL", Name = "Newzealand" },
                new TreeData { Code = "WSM", Name = "Samoa" },
            },
        });

        TreeDataSource.Add(new TreeData
        {
            Code = "AN",
            Name = "Antartica",
            Child = new List<TreeData>()
            {
                new TreeData { Code = "BVT", Name = "Bouvet Island" },
                new TreeData { Code = "ATF", Name = "French Southern Lands" },
            },
        });
    }

    public class Listdata
    {
        public string Id { get; set; }
        public string Pid { get; set; }
        public string Name { get; set; }
        public bool HasChild { get; set; }
        public bool Expanded { get; set; }

    }

    public class TreeData
    {
        public string Code { get; set; }
        public string Name { get; set; }
        public bool Expanded { get; set; }
        public bool Selected { get; set; }
        public List<TreeData> Child;

    }
}

<style>
    .control_wrapper {
        max-width: 500px;
        margin: auto;
        border: 1px solid #dddddd;
        border-radius: 3px;
    }

    .nested-data, .list-data {
        padding: 15px;
        margin-bottom: 25px;
    }

    .content {
        margin: 0 auto;
        border: 1px solid #dddddd;
        border-radius: 3px;
    }

        .content h4 {
            padding: 0 10px;
        }
</style>