RemoteData.razor

@page "/TreeView/RemoteData"

@using Syncfusion.EJ2.Blazor.Navigations
@using Syncfusion.EJ2.Blazor.Lists
@using Syncfusion.EJ2.Blazor.Data

@inherits SampleBaseComponent;

<div class="col-lg-12 control-section">
    <div class="control_wrapper">
        <EjsTreeView TValue="TreeData">
            <TreeViewFieldsSettings TValue="TreeData" Query="new ej.data.Query().from('Employees').select('EmployeeID,FirstName,Title').take(5)" Id="EmployeeID" Text="FirstName" HasChildren="EmployeeID">
                <EjsDataManager url="https://services.odata.org/V4/Northwind/Northwind.svc" Adaptor="@Syncfusion.EJ2.Blazor.Adaptors.ODataV4Adaptor" CrossDomain="true"></EjsDataManager>
                <TreeViewFieldChild TValue="TreeData" Query="new ej.data.Query().from('Orders').select('OrderID,EmployeeID,ShipName').take(5)" Id="OrderID" Text="ShipName" ParentID="EmployeeID">
                    <EjsDataManager url="https://services.odata.org/V4/Northwind/Northwind.svc" Adaptor="@Syncfusion.EJ2.Blazor.Adaptors.ODataV4Adaptor" CrossDomain="true"></EjsDataManager>
                </TreeViewFieldChild>
            </TreeViewFieldsSettings>
        </EjsTreeView>
    </div>
</div>
@code{
    class TreeData
    {

        public int? EmployeeID { get; set; }
        public int OrderID { get; set; }
        public string ShipName { get; set; }
        public string FirstName { get; set; }
    }
}
<style>
    .control_wrapper {
        max-width: 500px;
        margin: auto;
        border: 1px solid #dddddd;
        border-radius: 3px;
    }
</style>