TreeView and Json Data from WebApi with Child

Question

I have a response from webapi as follows.

folderLevel1Response = await folderLevel1Service.GetAll(selectedGuid);

----

folderLevel1Service is a Http Service (

var res = await client.GetFromJsonAsync<List<FolderLevel1Response>>($"/api/FolderLevel1/GetAll?idCompany={idCompany}&idFolderGroup={idFolderGroup}");

)

in html codes:

<TreeViewFieldsSettings TValue="FolderLevel1Response"

Id="Id"

Text="FolderName"

Child="folderLevel2s"

DataSource="@folderLevel1Response"

Expanded="Expanded">

</TreeViewFieldsSettings>

</SfTreeView>

My json :

[
  {
    "Id": "376f256c-3a55-43f1-abdc-954c03b7d2e0",
    "FolderName": "ABC İnşaatı İhalesi",
    "IdFolderGrup": "a320f81a-82d8-4f84-b54d-924031698da5",
    "IsSystemFolder": true,
    "FolderLevel2s": []
  },
  {
    "Id": "4fb08ea8-49e5-4f53-9eb9-73d23a5a1a32",
    "FolderName": "XYZ İnşaat İhalesi",
    "IdFolderGrup": "a320f81a-82d8-4f84-b54d-924031698da5",
    "IsSystemFolder": true,
    "FolderLevel2s": [
      {
        "IdFolderLevel1": "4fb08ea8-49e5-4f53-9eb9-73d23a5a1a32",
        "FolderName": "Gelen Dosya",
        "IsSystemFolder": true,
        "FolderLevel1": null
      },
      {
        "IdFolderLevel1": "4fb08ea8-49e5-4f53-9eb9-73d23a5a1a32",
        "FolderName": "Teknik Şartnameler",
        "IsSystemFolder": true,
        "FolderLevel1": null
      }
    ]
  }
]

How do i write treeview with child class?

Prasanth Madhaiyan · Answer

Hi Ergun,Greetings from Syncfusion support.We have validated your reported query in the TreeView component by preparing the sample. We understand that you want to render the TreeView component by retrieving the data source from the Controller part. We have achieved your exact requirement to render the TreeView component when clicking the button, and as per your query, we bound the Child property to the TreeView component. You can achieve this by following the below way. [MainLayout.razor] @code { SfTreeView tree; List FolderModel; public async Task Button() { // To fetch parent record in a preconfigured state string baseUrl = https://localhost:44349/; // To fetch parent record in a preconfigured state FolderModel = await Http.GetJsonAsync>($"{baseUrl}api/State/Methods"); this.StateHasChanged(); } } [Orders.cs] public class AssetViewModel { public string Id { get; set; } public string FolderName { get; set; } public List Child { get; set; } public bool Expanded { get; set; } } [StateController.cs] [Route("api/[controller]")] public class StateController : ControllerBase { List order = new List(); [HttpGet("[action]")] public IEnumerable Methods() { List Folder1 = new List(); order.Add(new AssetViewModel { Id = "01", FolderName = "Inbox", Child = Folder1 }); List Folder2 = new List(); Folder1.Add(new AssetViewModel { Id = "01-01", FolderName = "Categories", Child = Folder2 }); Folder2.Add(new AssetViewModel { Id = "01-02", FolderName = "Primary" }); Folder2.Add(new AssetViewModel { Id = "01-03", FolderName = "Social" }); Folder2.Add(new AssetViewModel { Id = "01-04", FolderName = "Promotions" }); List Folder3 = new List(); order.Add(new AssetViewModel { Id = "02", FolderName = "Others", Expanded = true, Child = Folder3 }); Folder3.Add(new AssetViewModel { Id = "02-01", FolderName = "Sent Items" }); Folder3.Add(new AssetViewModel { Id = "02-02", FolderName = "Delete Items" }); Folder3.Add(new AssetViewModel { Id = "02-03", FolderName = "Drafts" }); Folder3.Add(new AssetViewModel { Id = "02-04", FolderName = "Archive" }); var data = order.AsQueryable(); return data; } } For your reference, we have attached the sample. Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/WebAPI-TreeView-1513774297.zipPlease check the shared sample and let us know if you need any further assistance.Regards,Prasanth Madhaiyan.