TreeView and Entity Framework

[Javier Solorzano]

Hi,

I'm trying to display a hierarchical view of a self-referencing EF object. I've tried both the hierarchical and the self-referencing examples, but with an EF backed object with no joy. Only root elements are displayed.  No errors are thrown to the console. Simply, no children nodes are displayed.

Do you have an example of TreeView with Entity Framework obejcts?

[Sowmiya Padmanaban]

Hi Javier Solorzano,  

 

Greetings from Syncfusion support. 

 

We have checked your requirement with TreeView component. In our documentation site, we have already published a sample for TreeView component when using Entity framework. 

 

Refer the below documentation link. 

 

https://blazor.syncfusion.com/documentation/treeview/data-binding/#entity-framework 

 

To know more about the TreeView component, refer the below links. 

 

UG Documentation-https://blazor.syncfusion.com/documentation/treeview/getting-started/ 

 

API Reference-https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.ITreeView.html 

 

Demo link-https://blazor.syncfusion.com/demos/treeview/default-functionalities/ 

 

Could you please check the above documentation link and let us know, if you need any further assistance. 

 

Regards,  

Sowmiya.P 

[Javier Solorzano]

Thanks for the answer. The sample exposes EF objects through an API called by the component. For a server-rendered component, I think it makes no sense to build an endpoint to the EF objects. That is where I'm struggling with Syncfusion's tree component. I should mention that other three components in the market work out-of-the-box with EF self-referencing objects.

[Sowmiya Padmanaban]

Hi Javier Solorzano,  

 

When you perform any operations on TreeView component  ( For example: Add, Delete, Rename), the changes need to reflected in Database. In that case, controller method is needed to communicate between the Database and TreeView component. 

 

In our example, when perform the below operations, corresponding controller method is triggered. 

 

Add a TreeView node: 

[HttpPost] 

        public void Post([FromBody]OrganizationDetails employee) 

        { 

            db.AddEmployee(employee); 

        } 

 

 

Remove a TreeView node: 

 

[HttpDelete("{id}")] 

        public void Delete(int id) 

        { 

            db.DeleteEmployee(id); 

        } 

 

Update a TreeView node: 

 

[HttpPut] 

        public object Put([FromBody]OrganizationDetails employee) 

        { 

            db.UpdateEmployee(employee); 

            return employee; 

        } 

 

Query2 – Child node are not loaded in TreeView component. 

 

We suspect that your reported problem may be occurred due to below case. 

 

Case1: Expand/Collapse is not visible in UI. 

 

When you not mapped the HasChildren attribute for TreeView component, it does not create a expand/expand icon for Self-referential data of TreeView component. Because, HasChildren attribute is mandatory for Self-referential data to map the parent and child nodes. 

 

Refer the below screenshot. 

 

<SfTreeView @ref="tree" TValue="Employee"> 

        <TreeViewFieldsSettings TValue="Employee" Id="Id" Text="Name" ParentID="ParentId" HasChildren="HasTeam" Expanded="IsExpanded"> 

            <SfDataManager Url="api/Default" Adaptor="Adaptors.WebApiAdaptor" CrossDomain="true"></SfDataManager> 

        </TreeViewFieldsSettings> 

        <TreeViewEvents TValue="Employee" NodeClicked="nodeClicked"></TreeViewEvents> 

        <SfContextMenu @ref="menu" Target="#treeview" Items="@MenuItems"> 

            <ContextMenuEvents ItemSelected="MenuSelect"></ContextMenuEvents> 

        </SfContextMenu> 

    </SfTreeView> 

 

 

 

Case2: LoadOnDemand. 

 

TreeView has load on demand (Lazy load), by default. It reduces the bandwidth size when consuming huge data. It loads first level nodes initially, and when parent node is expanded, loads the child nodes based on the ParentID/Child member. 

 

When you click the expand icon, request send to the controller to fetch the child node of TreeView component based on corresponding parent id. Refer the below code snippet. 

 

  [HttpGet] 

        public object Get() 

        { 

            // Get the DataSource from Database 

            var data = db.GetAllEmployees().ToList(); 

            var queryString = Request.Query; 

            if (queryString.Keys.Contains("$filter")) 

            { 

                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(); 

                string filter = string.Join("", queryString["$filter"].ToString().Split(' ').Skip(2)); // get filter from querystring 

                data = data.Where(d => d.ParentId.ToString() == filter).ToList(); 

                return data.Skip(skip).Take(top); 

            } 

            else 

            { 

                data = data.Where(d => d.ParentId == null).ToList(); 

                return data; 

            } 

        } 

 

If we misunderstood your requirement, could you please share the more details regarding your requirement. It will help us to resolve your issue at the earliest. 

 

Regards,  

Sowmiya.P