We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Feature Request: Support ID and ParentID for parent/child data sources

It would be very helpful if we could use the same data source approach as used by the tree grid to represent parent/child relationships. We want to be able to switch between ListView and TreeGrid components to visualize the data. We need this to support mobile friendly card-like view when on a phone and the full feature tree grid when on a desktop. 

If the data sources used the same approach, we could simply hide/show the correct component based upon media css settings.  

Currently, we have to create two data sources and keep them in sync and uses duplicate data. Or create one data source model which includes both which is messy with duplicate data.

For example:

Current ListView Model:
- Id
- Children 
- Field1
- Field2

Current TreeGrid Model:
- Id
- ParentId
- Field1
- Field2

Combined model:
- Id
- ParentId
- Field1
- Field2
- Children {
     - Id
     - ParentId
     - Field1
     - Field2
     - Children }

Thank you for the considerations!

3 Replies

SA Shameer Ali Baig Sulaiman Ali Baig Syncfusion Team January 23, 2020 01:51 PM UTC

Hi Scott, 
 
Greetings from Syncfusion support. 
 
We have looked into your query on ListView and TreeGrid component.  For your information, EJ2 ListView component is light weight component which is developed to bound data sources to have minimum node hierarchy, so self-referencing support is not available in it. 
 
But, EJ2 TreeGrid component large component which developed to bound more complex data source to handle complex node level hierarchy, and self-referencing support is available in it. 
 
However, we are validating the feasibility for achieving your requirement in ListView. So, we will update you the further details on this regard in two business days on 27 January 2020. 
 
We appreciate your patience until, then. 
 
Regards, 
Shameer Ali Baig S. 



SP Scott Peal replied to Shameer Ali Baig Sulaiman Ali Baig January 26, 2020 03:45 PM UTC

Hi Scott, 
 
Greetings from Syncfusion support. 
 
We have looked into your query on ListView and TreeGrid component.  For your information, EJ2 ListView component is light weight component which is developed to bound data sources to have minimum node hierarchy, so self-referencing support is not available in it. 
 
But, EJ2 TreeGrid component large component which developed to bound more complex data source to handle complex node level hierarchy, and self-referencing support is available in it. 
 
However, we are validating the feasibility for achieving your requirement in ListView. So, we will update you the further details on this regard in two business days on 27 January 2020. 
 
We appreciate your patience until, then. 
 
Regards, 
Shameer Ali Baig S. 


Thanks Shameer,

What would be super awesome is finding a way to get TreeGrid to switch views; one using a grid while on a desktop and another using bootstrap cards while on a mobile phone. While in mobile view, the views would be readonly so the toolbar could be hidden. This feature would really set the control apart from other vendor grid controls. 

This use case is what we are trying to achieve so if that worked, no need to change ListView control. Though, I do believe the control should be changed to facilitate better connectivity to SQL data sources. :)

Thanks again!


SA Shameer Ali Baig Sulaiman Ali Baig Syncfusion Team January 29, 2020 06:58 AM UTC

Hi Scott, 
  
Please, find the response for your below query. 
 
Query: Hide the Toolbar in the mobile device  
 
We have achieved your requirement of hiding the toolbar in the mobile device in the below example.  
 
In the below code example, we have obtained the user agent from the HttpContext Request Headers by using the IHttpContextAccessor class. Based on the user agent, we have rendered the toolbar for the TreeGrid. 
 
 
@using Microsoft.AspNetCore.Http  
@inject IHttpContextAccessor httpContextAccessor  
  
@using Syncfusion.EJ2.Blazor.Grids  
@using Syncfusion.EJ2.Blazor.TreeGrid  
  
<EjsTreeGrid IdMapping="TaskId" DataSource="@TreeGridData" ParentIdMapping="ParentId"TreeColumnIndex="1" AllowFiltering="true" Toolbar="@toolbar">  
    <TreeGridColumns>  
        <TreeGridColumn Field="TaskId" HeaderText="Task ID" Width="80"TextAlign="Syncfusion.EJ2.Blazor.Grids.TextAlign.Right"></TreeGridColumn>  
        <TreeGridColumn Field="TaskName" HeaderText="Task Name" Width="100"></TreeGridColumn>  
        <TreeGridColumn Field="Duration" HeaderText="Duration" Width="100"TextAlign="Syncfusion.EJ2.Blazor.Grids.TextAlign.Right"></TreeGridColumn>  
        <TreeGridColumn Field="Progress" HeaderText="Progress" Width="100"TextAlign="Syncfusion.EJ2.Blazor.Grids.TextAlign.Right"></TreeGridColumn>  
        <TreeGridColumn Field="Priority" HeaderText="Priority" Width="60"></TreeGridColumn>  
    </TreeGridColumns>  
</EjsTreeGrid>  
  
@code{  
    public List<TreeData> TreeGridData { getset; }  
  
    public string Name { getset; } = "parent";  
  
    public int Duration { getset; } = 5;  
  
    public List<string> toolbar { getset; } = null;  
  
    protected override void OnInitialized()  
    {  
  
        string useragent = httpContextAccessor.HttpContext.Request.Headers["User-Agent"].ToString();  
  
        if (!useragent.Contains("Mobile"))  
        {  
            toolbar = new List<string>() { "Search" };  
        }  
  
        this.TreeGridData = TreeData.GetSelfDataSource().ToList();  
    }  
  
    public class TreeData  
    {  
        public int TaskId { getset; }  
        public string TaskName { getset; }  
        public int? Duration { getset; }  
        public int? Progress { getset; }  
        public string Priority { getset; }  
        public int? ParentId { getset; }  
        public static List<TreeData> GetSelfDataSource()  
        {  
            List<TreeData> BusinessObjectCollection = new List<TreeData>();  
            BusinessObjectCollection.Add(new TreeData() { TaskId = 1, TaskName = "Parent Task 1", Duration = 10, Progress = 70, Priority = "Critical", ParentId = null });  
  
                         -------  
              
            return BusinessObjectCollection;  
        }  
    }  
  
  
}  
 
Also, for using the IHttpContextAccessor, you must add the following services in the startup.cs file. 
 
 
public void ConfigureServices(IServiceCollection services)  
        {  
            services.AddRazorPages();  
            services.AddServerSideBlazor();  
            services.AddHttpContextAccessor();  
            services.AddSyncfusionBlazor();  
            services.AddSingleton<WeatherForecastService>();  
        }  
 
Please, let us know if you need further assistance. 
 
Regards, 
Shameer Ali Baig S. 


Loader.
Live Chat Icon For mobile
Up arrow icon