How to load data using web service in TreeGrid?

Question

Answer:We have added the API service call and rendered all the root nodes initially in a collapsed state. In the server end, we handled the separate query to filter out the child records on expanding its parent record by comparing Filter query value with the ParentID as highlighted in the below code snippet.

SfDataManager> …………………. . . TreeGridColumns> SfTreeGrid> div> Controller page ……………… . . public class DefaultController : ControllerBase { ………. . . (); // GET: api/Default [HttpGet] public async Task < object > Get(int ? code) { var queryString = Request.Query; if (SelfReferenceData.tree.Count == 0) SelfReferenceData.GetTree(); if (queryString.Keys.Contains("$filter") && !queryString.Keys.Contains("$top")) { StringValues filter; queryString.TryGetValue("$filter", out filter); int fltr = Int32.Parse(filter[0].ToString().Split("eq")[1]); // get the selected parentID for expansion here IQueryable < SelfReferenceData > data1 = SelfReferenceData.tree.Where(f => f.ParentID == fltr).AsQueryable();// compare the filter value with parentID to get the child records from server end for the selected parent record if (queryString.Keys.Contains("$orderby")) { StringValues srt; queryString.TryGetValue("$orderby", out srt); srt = srt.ToString().Replace("desc", "descending"); data1 = SortingExtend.Sort(data1, srt); } return new { Items = data1.ToList(), Count = data1.Count() }; } …………………. data = data.Where(p => p.ParentID == null).ToList(); int count = data.Count; if (queryString.Keys.Contains("$inlinecount")) { StringValues Skip; StringValues Take; int skip = (queryString.TryGetValue("$skip", out Skip)) ? Convert.ToInt32(Skip[0]) : 0; int top = (queryString.TryGetValue("$top", out Take)) ? Convert.ToInt32(Take[0]) : data.Count(); return new { Items = data.Skip(skip).Take(top), Count = count }; } else { return SelfReferenceData.GetTree(); } } } } To bind remote data to Tree Grid component, assign data as an instance of SfDataManager to the DataSource property. To interact with remote data source, provide the endpoint url and define the HasChildMapping property of Tree Grid. Also while using RemoteData we need to bind Self-Referential type of DataBinding(FlatData) to TreeGrid(which only supports remoteData). To bind self-reference data idMapping and parentIdMapping property is necessary to form a parent-child hierarchy. Tree Grid provides Load on Demand support for rendering remote data. The Load on demand is considered in Tree Grid for the following actions. • Expanding root nodes. • Navigating pages, with paging enabled in Tree Grid. Sample here.Please refer to the Documentation Link:- https://blazor.syncfusion.com/documentation/treegrid/data-binding/#remote-service-binding https://blazor.syncfusion.com/documentation/treegrid/data-binding/#creating-web-api-controller

vivek · Answer

Hi,I am trying to get this working for my sample project but it is not working.I am seeing the data returned by APIs in but TreeGrid is not displaying it.Here is my Grid. Here is my controller code.[HttpGet] public ActionResult Get() { var boList = GetBOs(); return Ok(new { Items = boList, Count = boList.Count() }); } private List GetBOs() { var boList = new List(); boList.Add(new BusinessObject() { TaskID = 1, TaskName = "Parent Task 1", Duration = 10, Progress = "In Progress", Priority = "High", IsParent = true }); boList.Add(new BusinessObject() { TaskID = 2, TaskName = "Parent task 2", Duration = 4, Progress = "In Progress", Priority = "Normal", IsParent = true }); boList.Add(new BusinessObject() { TaskID = 3, TaskName = "Parent Task 3", Duration = 5, Progress = "In Progress", Priority = "Critical", IsParent = true }); boList.Add(new BusinessObject() { TaskID = 4, TaskName = "Parent Task 4", Duration = 6, Progress = "In Progress", Priority = "Low", IsParent = true }); boList.Add(new BusinessObject() { TaskID = 5, TaskName = "Parent Task 5", Duration = 9, Progress = "In Progress", Priority = "Normal", IsParent = true }); return boList; }

Farveen Sulthana Thameeztheen Basha · Answer

Hi Vivek,Greetings from Syncfusion Support.We have prepared sample from your provided code example but
we are unable to replicate the problem at our end. Refer to the sample link:-https://www.syncfusion.com/downloads/support/forum/162754/ze/webservice-sample2119249993.zipScreenshot:-We need some more additional details to find the cause of the
issue. Share us the following details.
 Please
     confirm whether the data has been returned from server end. Share
     screenshot of it.
 Syncfusion
     Blazor TreeGrid package version details.
 Screenshot/Video
     demo to replicate the issue.
 If possible
     replicate it in the above sample and revert us back.
 Bind
     ActionFailure event to TreeGrid and share Exception details(if any)
     occurs.
Regards,
Farveen sulthana T