1. Home
  2. Forum
  3. Blazor
  4. Example using Web Api datasource?

Example using Web Api datasource?

Can you show me a simple example how to bind a Web Api datasource to a TreeView Component?

My class
    public class VistaArbol
    {
        public string IdVista { get; set; }
        public string Nombre { get; set; }
        public string Icon { get; set; }
        public bool Expanded { get; set; }
        public List<VistaArbol> Hijos { get; set; }
    }

Example Data:

[
{
"idVista": "01",
"nombre": "Vista 1",
"icon": "eye",
"expanded": false,
"hijos": [
{
"idVista": "01-01",
"nombre": "Carpeta 1",
"icon": "folder",
"expanded": false,
"hijos": [
{
"idVista": "01-01-03",
"nombre": "SubCarpeta 3",
"icon": "folder",
"expanded": false,
"hijos": []
}
]
},
{
"idVista": "01-02",
"nombre": "Carpeta 2",
"icon": "folder",
"expanded": false,
"hijos": []
}
]
},
{
"idVista": "02",
"nombre": "Vista 2",
"icon": "eye",
"expanded": false,
"hijos": []
},
{
"idVista": "03",
"nombre": "Vista 2",
"icon": "eye",
"expanded": false,
"hijos": []
}
]


Thanks


13 Replies
SP Sowmiya Padmanaban Syncfusion Team April 24, 2020 02:47 PM UTC

Hi Leonardo,  
 
Greetings from Syncfusion support. 
 
We have checked your requirement for using webAPI adaptor to render the TreeView component using hierarchical datasource. When validating to achieve your requirement in a sample, we found an issue with DataManager which will be used to data to the TreeView component. So, we need some time to validate this issue from our side. we will update you with further validation details within two business days on 28th April 2020 
 
Regards,  
Sowmiya.P 


LE Leonardo April 24, 2020 04:30 PM UTC

Thank you.

SP Sowmiya Padmanaban Syncfusion Team April 27, 2020 07:54 AM UTC

Hi Leonardo,  
 
Thanks for the update. 
  
As we promised, we will share the validation details on rendering the TreeView component using hierarchical datasource on tomorrow (27th April 2020). 
  
We appreciate your patience, until then. 
 
Regards,  
Sowmiya.P 


SA Shameer Ali Baig Sulaiman Ali Baig Syncfusion Team April 28, 2020 02:43 PM UTC

Hi Leonardo, 
 
Thanks for your patience. 
 
We are facing complexities on find the cause of the problem which we are facing with DataManager. So, we need some more time to validate this problem. So, we will update you with further validation details in two business days on 30th April 2020. 
 
We appreciate your patience until, then. 
 
Regards, 
Shameer Ali Baig S. 


LE Leonardo April 28, 2020 03:54 PM UTC

Ok, I'll be waiting

Thanks

SP Sowmiya Padmanaban Syncfusion Team May 4, 2020 12:52 PM UTC

Hi Leonardo,  
  
Currently, we are validating the reported issue. we will update the validation details shortly. 
  
Regards,  
Sowmiya.P 


SP Sowmiya Padmanaban Syncfusion Team May 5, 2020 02:02 PM UTC

Hi Leonardo,  
 
Thanks for your patience. 
 
We have validating the reported issue with  TreeView component that “Rendering the TreeView component with Hierarchical datasource using offline property”. We have considered this as a bug from our end. It will be included in our Volume 2 Release which is expected to be released at the end of June 2020. 
 
Track the below link to know the bug status. 
 
We appreciate your patience, until then. 
 
Regards,  
Sowmiya.P 


LE Leonardo May 5, 2020 03:03 PM UTC

Thank you. 

I will waiting the next release then.

SP Sowmiya Padmanaban Syncfusion Team May 6, 2020 07:02 AM UTC

Hi Leonardo,  
 
Thanks for the update. 
 
As promised, we will include the fix for the issue in Volume 2, 2020 and provide a sample by achieving your expected requirement in TreeView.  
  
We appreciate your patience until, then.  
  
Regards,  
Sowmiya. P 


DW D Wright June 18, 2020 06:20 PM UTC

Having the same issue.  Any word on this?  I too am trying to bind a "flat" parent/child list to a treeview and for some reason it just wont bind to the treeview at all.  I have tried with and without async method calls to the backend api.  Also, I do see the data coming back from the api, treeview is just not binding. 

[
    {
        "FolderId": 2,
        "ParentFolderId": 1,
        "FolderName": "Artistic",
        "IsParent": false,
        
    }
]

<SfTreeView TValue="AssetViewModel"> <TreeViewFieldsSettings TValue="AssetViewModel" DataSource="@FolderModel" Id="FolderId" Text="FolderName" ParentID="ParentFolderId" HasChildren="IsParent"> </TreeViewFieldsSettings> </SfTreeView>

SP Sowmiya Padmanaban Syncfusion Team June 19, 2020 10:04 AM UTC

Hi Dedrick Wright,  
 
We have checked your reported query with TreeView component. We were unable to reproduce the reported issue. We suspect that your reported issue may be occurred due to the value mismatch or incorrect field mapping of the data fields for TreeView nodes. In TreeView component, parent id of root node must be null. If the parent id of root node contains any other value, TreeView component will not be render properly.  
 
For your reference, we have prepared a sample based on your shared code snippet. 
 
  <SfTreeView TValue="AssetViewModel" @ref="tree"> 
        <TreeViewFieldsSettings TValue="AssetViewModel" DataSource="@FolderModel" Id="FolderId" Text="FolderName" ParentID="ParentFolderId" HasChildren="IsParent"> 
        </TreeViewFieldsSettings> 
    </SfTreeView> 
 
@code { 
 
    SfTreeView<AssetViewModel> tree; 
    List<AssetViewModel> FolderModel; 
 
    protected override async Task OnInitializedAsync() 
    { 
        await base.OnInitializedAsync(); 
        string baseUrl = "https://localhost:44371/"; 
        // To fetch datasource from controller side 
        FolderModel = await Http.GetJsonAsync<List<AssetViewModel>>($"{baseUrl}api/Default/Get"); 
        this.StateHasChanged(); 
    } 
} 
 
Datasource:  
   private void BindDataSource() 
        { 
            order.Add(new AssetViewModel(1, "Folder", true, null)); 
            order.Add(new AssetViewModel(2, "Sub Folder 1", false, 1)); 
            order.Add(new AssetViewModel(3, "Sub Folder 2", false, 1)); 
            order.Add(new AssetViewModel(4, "Folder 2", true, null)); 
            order.Add(new AssetViewModel(5, "Sub-Item 1", false, 4)); 
            order.Add(new AssetViewModel(6, "Sub-Item 2", false, 4)); 
        } 
 
Refer the below sample link. 
 
 
To know more about the TreeView component. Refer the below links. 
 
 
 
 
If your issue still persists, then please share us more details regarding your issue with TreeView. If please replicate your reported issue, with our attached and share it to us. We will check and update you the solution needed, promptly. 
 
Please let us know, if you need any further assistance. 
 
Regards,  
Sowmiya.P 
 


SP Sowmiya Padmanaban Syncfusion Team July 3, 2020 11:51 AM UTC

Hi Leonardo,  
 
We deeply regret for the inconvenience. 
 
Due to some technical difficulties, we were unable to include the fix for this issue in this Volume 2 Release. We are working on this issue with high priority.  
   
We will include the fix for this issue in Volume 2 SP release which is expected to be rolled out at the end of July 2020.   
    
We appreciate your patience. 
 
Regards,  
Sowmiya. P 


SP Sowmiya Padmanaban Syncfusion Team September 3, 2020 10:54 AM UTC

Hi Leonardo,   
 
Thanks for your patience. 
 
We are glad to announce that our patch release (V18.2.54) is rolled out successfully. In this release, we have included a fix for “Issue in rendering the TreeView with hierarchical data source using offline property”. To access this fix, we suggest you to update the (Syncfusion.Blazor) package to the latest version (V18.2.54). 
 
Refer to the release notes below. 
 
  
Refer the sample link below: 
 
 
Please get in touch with us if you would require any further assistance. 
 
Regards, 
Sowmiya.P 


Loader.
Up arrow icon