1. Home
  2. Forum
  3. Blazor
  4. Treeview that uses different TValue based on Level

Treeview that uses different TValue based on Level

I am building an inventory / ordering system in which I have Customer, CustomerOrder, and OrderItem objects.  I would like to be able to build a tree view that has Customers on the top level, CustomerOrders on the second level and OrderItems on the third level.  Is this possible and if so how?


thanks in advance


7 Replies 1 reply marked as answer
IL Indhumathy Loganathan Syncfusion Team February 17, 2021 10:13 AM UTC

Hi William, 
 
Greetings from Syncfusion support. 
 
Based on the provided details, we are unable to understand the exact requirement with TreeView. So, kindly share the following details to proceed further. 
 
1.      Detailed explanation of your requirement to assist you promptly. 
2.      Whether you want to use different TValue for each node levels? 
3.      Datasource used in your sample and code snippets of TreeView component. 
 
This information would help us to provide you the prompt solution needed. Meanwhile, refer to the following links for more details on TreeView component.  
 
To know more about the Blazor TreeView component, refer the below links.  
  
  
  
 
Please, let us know if you need any further assistance. 
 
Regards, 
Indhumathy L 


WI William February 17, 2021 05:31 PM UTC

Thank you for your reply.

I would like to use two different TValues for the different node levels.  I have been able to simplify my need from 3 levels to two. 

On the top level I have a class Order as follows
public classs Order {
     public int OrderID;
     public string CustomerName;
     public string OrderStatus;
     public DateTime OrderDate;
     List <OrderItem> ListofItems;
}

for the next level I have a class OderItem as follows
public class OrderItem {
     public int OrderItemID;
     public string ItemName;
     public int ItemQty;
}

I do not have any Treeview code at this point.  If necessary I can change the two classes I have.

Thanks in advance for your assistance.
     public int OrderID;

WI William February 17, 2021 08:48 PM UTC

Sorry I forgot to add that on the Order level I want to display CustomerName, OrderDate, and OrderStatus.  On the LineItem level I want to display ItemName and ItemQty.

Again thanks in advance


IL Indhumathy Loganathan Syncfusion Team February 18, 2021 10:27 AM UTC

Hi William, 
 
Thanks for sharing us the details. 
 
TValue denotes the model class used in the corresponding component. You cannot include different TValue for different node levels. But you can map the specific columns to the TreeView fields by using Query property. 
 
Please refer to the below code snippet. 
 
@using Syncfusion.Blazor.Navigations 
@using Syncfusion.Blazor.Data 
 
<SfTreeView TValue="TreeData"> 
    <TreeViewFieldsSettings TValue="TreeData" Query="@Query" Id="EmployeeID" Text="FirstName" HasChildren="EmployeeID"> 
        <SfDataManager Url="http://services.odata.org/V4/Northwind/Northwind.svc" Adaptor="@Syncfusion.Blazor.Adaptors.ODataV4Adaptor" CrossDomain="true"></SfDataManager> 
        <TreeViewFieldChild TValue="TreeData" Query="@SubQuery" Id="OrderID" Text="ShipName" ParentID="EmployeeID"> 
            <SfDataManager Url="http://services.odata.org/V4/Northwind/Northwind.svc" Adaptor="@Syncfusion.Blazor.Adaptors.ODataV4Adaptor" CrossDomain="true"></SfDataManager> 
        </TreeViewFieldChild> 
    </TreeViewFieldsSettings> 
</SfTreeView> 
 
@code{ 
    public Query Query = new Query().From("Employees").Select(new List<string> { "EmployeeID", "FirstName" }).Take(5).RequiresCount(); 
 
    public Query SubQuery = new Query().From("Orders").Select(new List<string> { "OrderID", "EmployeeID", "ShipName" }).Take(5).RequiresCount(); 
 
    public class TreeData 
    { 
        public int? EmployeeID { get; set; } 
        public int OrderID { get; set; } 
        public string ShipName { get; set; } 
        public string FirstName { get; set; } 
    } 
} 
 
In the above code, ODataV4Adaptor is used to fetch data from remote services. The FirstName, and EmployeeID columns from Employees table have been mapped to Id, Text, and HasChildren fields respectively for first level nodes. 
 
The OrderID, EmployeeID, and ShipName columns from orders table have been mapped to Id, ParentID, and Text fields respectively for second level nodes. 
 
Please find the sample demonstrating the solution. 
 
 
Please get back to us if you require any further assistance. 
 
Regards, 
Indhumathy L 


Marked as answer
WI William February 18, 2021 09:22 PM UTC

Thank you very much for your reply.  A couple of follow-on questions.

1) I assume I will need to set up a template for both the top level and child nodes in order to display multiple fields - is that possible?
2) Do you know it if is possible to set up an OData endpoint in my Blazor server side application or will I need to create another application for that?  If it is possible to host the OData endpoint - can you point me to some documentation or a tutorial?

thanks again

IL Indhumathy Loganathan Syncfusion Team February 19, 2021 03:22 PM UTC

Hi William, 
  
We have validated your requirement query in TreeView component. Please find the answer for your queries. 
  
Query 1: Set up a template to display multiple fields 
  
You can use NodeTemplate property to customize the look of TreeView nodes. 
  
Please refer to the below code snippet. 
  
    <TreeViewTemplates TValue="EmployeeDetails"> 
        <NodeTemplate> 
            @{ 
                var employee = ((context as EmployeeDetails)); 
                <img class="eimage" src="@UriHelper.ToAbsoluteUri($"/css/images/Employees/{@employee.Image}.png")" alt="@employee.Image" /> 
                <div class="ename">@((@context as EmployeeDetails).EmployeeName)</div> 
                <div class="ejob">@((@context as EmployeeDetails).Designation)</div> 
            } 
        </NodeTemplate> 
    </TreeViewTemplates> 
  
In above code, the employee information such as employee photo, name, and designation have been included for each node using the NodeTemplate property. 
 
Please find the sample from below link. 
 
 
Refer to the below documentation. 
  
  
Query 2: OData endpoint in my Blazor server side application 
  
Currently we are validating the feasibility to achieve your requirement in TreeView component. We will update you further details in three business days on 24th February 2021. 
  
Please let us know if you need any further assistance. 
  
Regards, 
Indhumathy L

IL Indhumathy Loganathan Syncfusion Team February 25, 2021 04:55 PM UTC

Hi William, 
 
Thanks for your patience. 
 
We have validated your requirement for OData endpoint in Blazor server side application. Yes, it is possible to add controller part in a Blazor application. You can refer the below documentation links for reference. 
 
 
 
 
Please let us know if you need any further assistance. 
 
Regards, 
Indhumathy L 


Loader.
Up arrow icon