Unable to display API endpoint data in TreeGrid using Remote Service binding

[Craig]

I am having trouble when trying to display API endpoint data in TreeGrid.  I am using a sample from https://blazor.syncfusion.com/documentation/treegrid/data-binding?no-cache=1#remote-service-binding.

I have confirmed I can route to https://ej2services.syncfusion.com/production/web-services/api/SelfReferenceData and get a valid JSON response from a web browser. However, in the test Blazor application, I get 'No records to display.'

Clearly, I am doing something fundamentally wrong.  I have included a sample test application.

Attachment: Application_4eb3bfac.zip

[Craig]

I suspect it is how I am using the SfDataManager. It is the first time I have tried to use it.

I say that because interestingly 

this code works

@page "/TreeGrid"
@using System.Net.Http
@using System.Threading.Tasks
@inject HttpClient Http


<SfTreeGrid TValue="BusinessObject" DataSource="@Data" IdMapping="TaskID" ParentIdMapping="ParentID" TreeColumnIndex="1" HasChildMapping="isParent">
    <TreeGridColumns>
        <TreeGridColumn Field="TaskID" HeaderText="Task ID" IsPrimaryKey="true" Width="70"></TreeGridColumn>
        <TreeGridColumn Field="TaskName" HeaderText="Task Name" Width="200"></TreeGridColumn>
        <TreeGridColumn Field="StartDate" HeaderText="Start Date" Format="d" Width="100"></TreeGridColumn>
        <TreeGridColumn Field="EndDate" HeaderText="End Date" Format="d" Width="100"></TreeGridColumn>
        <TreeGridColumn Field="Duration" HeaderText="Duration" Width="90"></TreeGridColumn>
    </TreeGridColumns>
</SfTreeGrid>


@code {
    public List<BusinessObject>? Data { get; set; }


    protected override async Task OnInitializedAsync()
    {
        Data = await Http.GetFromJsonAsync<List<BusinessObject>>("https://ej2services.syncfusion.com/production/web-services/api/SelfReferenceData");
    }


    public class BusinessObject
    {
        public int TaskID { get; set; }
        public string? TaskName { get; set; }
        public DateTime? StartDate { get; set; }
        public DateTime? EndDate { get; set; }
        public string? Progress { get; set; }
        public string? Priority { get; set; }
        public double? Duration { get; set; }
        public int? ParentID { get; set; }
        public bool? isParent { get; set; }
        public bool? Approved { get; set; }
        public int? ParentItem { get; set; }
    }
} 

But this code doesn't.

@page "/TreeGrid"

@using System.Net.Http
@using System.Threading.Tasks
@inject HttpClient Http


<SfTreeGrid TValue="BusinessObject" IdMapping="TaskID" ParentIdMapping="ParentID" TreeColumnIndex="1" HasChildMapping="isParent">


    <SfDataManager Url="https://ej2services.syncfusion.com/production/web-services/api/SelfReferenceData" CrossDomain="true" Adaptor="Syncfusion.Blazor.Adaptors.WebApiAdaptor"></SfDataManager><TreeGridColumns>
        <TreeGridColumn Field="TaskID" HeaderText="Task ID" IsPrimaryKey="true" Width="70"></TreeGridColumn>
        <TreeGridColumn Field="TaskName" HeaderText="Task Name" Width="200"></TreeGridColumn>
        <TreeGridColumn Field="StartDate" HeaderText="Start Date" Format="d" Width="100"></TreeGridColumn>
        <TreeGridColumn Field="EndDate" HeaderText="End Date" Format="d" Width="100"></TreeGridColumn>
        <TreeGridColumn Field="Duration" HeaderText="Duration" Width="90"></TreeGridColumn>
    </TreeGridColumns>
</SfTreeGrid>


@code {


    public class BusinessObject
    {
        public int TaskID { get; set; }
        public string? TaskName { get; set; }
        public DateTime? StartDate { get; set; }
        public DateTime? EndDate { get; set; }
        public string? Progress { get; set; }
        public string? Priority { get; set; }
        public double? Duration { get; set; }
        public int? ParentID { get; set; }
        public bool? isParent { get; set; }
        public bool? Approved { get; set; }
        public int? ParentItem { get; set; }
    }
}

[Vasu Perumal]

Hi Phil,

Upon validating your sample we could be able to find that the render mode was not used in you razor files which helps to refer the scripts which makes the server interactive to fetch requests. Kindly refer to the below code snippet,

 

TreeGrid.razor:

 

@page "/TreeGrid"

@rendermode InteractiveServer

 

<SfTreeGrid ID="treegrid" @ref="treegrid" >

...

</SfTreeGrid>

 

The modifications have been done to the sample and attached. Kindly use it for you reference.

We are happy to assist you further.

Regards,

Vasu P.

[Vasu Perumal]

Hi Craig,

Kindly find the modified sample attached for your reference.

Regards,

Vasu P.

Attachment: RemoteBlazor_d144086c.zip

[Razvan]

Hello! I have a similar problem but in webassembly (prerender false) so the solution above isn't applicable.

Any ideas on how I can fill the tree? 

When @treedata is filled over http in  OnInitializedAsync the tree displays : "No record to display" but assigning the @treedata in OnInitialized it works...

[Shek Mohammed Asiq Abdul Jabbar]

Hi Razvan,

We have tried to replicate the issue in WebAssembly application with prerender false and set the DataSource at OnInitilaizedAsync(), including increasing the time delay to 10 seconds, but we were unable to reproduce the problem. To assist you further, could you kindly provide the following details?

1. A screenshot of the script error mentioning the function sfBlazor.Grid.IsMacDevice from JavaScript.
2. Details about where the script is referenced in your project (App.razor). Share the file also to us.
3. Share the Program.cs file to verify your application configuration.
4. The device configuration (operating system, browser and its version, and device type) where you are encountering this issue.

These details will help us investigate the issue more effectively. Please feel free to get back to us with the above information for further assistance. 

Regards,

Shek