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. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

TreeGrid additional queries and data mapping

Thread ID:

Created:

Updated:

Platform:

Replies:

141587 Dec 19,2018 01:40 PM UTC Jan 9,2019 11:41 AM UTC Angular - EJ 2 6
loading
Tags: TreeGrid
AC
Asked On December 19, 2018 01:40 PM UTC

Hello,

it is difficul to find yet information about new TreeGrid component so I have several questions about it:

1. How can I add additional parameters while getting data from WebAPI? I am trying to do it like in grid but it is not working correctly for me. I am trying to do it like this:
First of all I am setting additional parameters (query property):



And after that I am setting my grid data:



My html looks like this:


My TreeGridComponent have query that I need, but the request sent to WebAPI do not have my additional parameters:


Maybe I am doing something wrong?

2. I want to map data by parent id. How I need to do that?
My data structure looks like this:
id      parent_id      name
1     null          'name1'
2     1               'name2'
3     1               'name3'
4     3               'name4'
5     null          'name5'
6     2               'name6'

I need to map it by parent_id property to look my tree grid like this:
name1
-- name2
---- name6
-- name3
---- name4
name5







Vignesh Natarajan [Syncfusion]
Replied On December 20, 2018 10:51 AM UTC

Hi Customer, 
 
Thanks for contacting Syncfusion support. 
 
Query 1 : How can I add additional parameters while getting data from WebAPI? 
 
From your query, we understand that you need to pass additional parameter to server. We suggest you to use the addParams method of Query. 
 
Refer the below code example 
 
<div class="control-section"> 
    <ejs-treegrid #treegrid [dataSource]='data' idMapping='TaskID'  parentIdMapping='ParentItem'  [treeColumnIndex]='1' allowPaging='true'  [pageSettings]='pageSetting' [query]="query"> 
       <e-columns> 
           <e-column field='TaskID' headerText='Task ID' width='120' textAlign='Right'></e-column> 
           <e-column field='TaskName' headerText='Task Name' width='150'></e-column> 
           <e-column field='StartDate' headerText='Start Date' width='120' format="yMd" textAlign='Right'></e-column> 
           <e-column field='EndDate' headerText='End Date' width='120' format="yMd" textAlign='Right'></e-column> 
           <e-column field='Duration' headerText='Duration' width='110' textAlign='Right'></e-column> 
           <e-column field='Progress' headerText='Progress' width='110'></e-column> 
       </e-columns> 
   </ejs-treegrid> 
</div> 
 
[app.compnent.ts] 
 
import { Component, OnInit } from '@angular/core' 
import { DataManager, WebApiAdaptor, Query } from '@syncfusion/ej2-data';  
 
const SERVICE_URI: string = 'https://ej2services.syncfusion.com/production/web-services/api/SelfReferenceData' ; 
 
@Component({ 
  selector: 'app-root', 
  templateUrl: './app.component.html', 
  styleUrls: ['./app.component.css'], 
}) 
export class AppComponent implements OnInit { 
  public data: DataManager; 
  public query: Query; 
 
  ngOnInit(): void { 
    this.datanew DataManager({ url: SERVICE_URI , adaptor: new WebApiAdaptor, crossDomain: true }); 
    this.query = new Query().addParams("hi", "hi"); 
} 
 
} 
 
Refer the below screenshot for the output 
 
 
 
We have prepared a simple online demo for your reference. Please refer the below link for the demo. 
 
 
Query 2 : I want to map data by parent id. How I need to do that? 
 
Since you need to map the data using parent_id field you need to define the parent_id field as parentIdMapping property of TreeGrid and id field as idMapping property of TreeGrid. 
 
Please refer the below code example. 
 
<div class="control-section"> 
     <ejs-treegrid #treegrid [dataSource]='data' idMapping='TaskID'  parentIdMapping='ParentItem' hasChildMapping='isParent' [treeColumnIndex]='1' [query]="query"> 
        <e-columns> 
            <e-column field='TaskID' headerText='Task ID' width='120' textAlign='Right'></e-column> 
            <e-column field='TaskName' headerText='Task Name' width='150'></e-column> 
            <e-column field='StartDate' headerText='Start Date' width='120' format="yMd" textAlign='Right'></e-column> 
            <e-column field='EndDate' headerText='End Date' width='120' format="yMd" textAlign='Right'></e-column> 
            <e-column field='Duration' headerText='Duration' width='110' textAlign='Right'></e-column> 
            <e-column field='Progress' headerText='Progress' width='110'></e-column> 
        </e-columns> 
    </ejs-treegrid> 
 
</div> 
 
Please refer the following for the details of idMapping, parentIdMapping and treeColumnIndex properties. 
 
 
 
 
 
Note: If hasChildMapping is not defined then two posts are sent to the server while . 
 
In the first post the data is fetched from the service and bound to the TreeGrid and in the second post all the parent id’s are collected for rendering the expand/collapse icon for the respective parent record.  
 
Also when hasChildMapping is not defined then the data must be returned in the form of JSON data from the server side instead of result and count.  
 
Please refer the below code example. 
 
 
  public ActionResult UrlData(DataManagerRequest dm, string ExportType) 
        { 
            
            DataOperations dp = new DataOperations(); 
            List<TreeDataFormat> data = TreeDataFormat.GetDataFormat(); 
            
                    ----------- 
 
            if (!dm.RequiresCounts && dm.Select != null) 
            { 
                dp.PerformSelect(data, dm.Select); 
                return Json(data); 
            } 
            return Json(new { result = data.ToList(), count = data.Count }); 
        } 
 
 
Please refer the below screenshot. 
 
 
 
Note: Currently we have not published the document for all the features available in TreeGrid. We will be publishing the document in future based on demand. 
 
Please get back to us if you have further queries. 
 
Regards, 
Vignesh Natarajan 
 


AC
Replied On December 20, 2018 02:13 PM UTC

Hello,

it was helpful and also I found my mistake - I was using from import for Query and DataManager so because of that I was not able to get my additional parameters in request.

Also I have one more question - how can I add same additional query parameters when I am getting data on row expanding? Because for now I am getting default parameters which row I am expanding, but I am not getting my other parameters in request.

But in query I have all parameters  need:


And one more question - I am using parameter like in example hasChildMapping. I am getting data as true or false but in both ways the TreeGrid are showing arrows to expand. When the result is false I think it shouldn't show arrows because it do not have any child records. Maybe I am doing something wrong?

This ir my html:

This is the answer from WebAPI:

And this is the TreeGrid that I see (third one should be not expandable):




Vignesh Natarajan [Syncfusion]
Replied On December 21, 2018 05:05 AM UTC

Hi Customer, 

We have analyzed the reported query and we have confirmed it is bug and logged a defect report ‘Additional Params are not getting passed to the server when parent record is expanded’. The fix for this issue will be included in our upcoming Patch release on December 24, 2018. Until then we appreciate your patience. 


Regards, 
Sathyanarayanamoorthy 

 


AC
Replied On December 27, 2018 09:02 AM UTC

Hello,

problem with additional parameters are fixed - thank you.

Problem with arrows where they are not needed are still exists. In first level the arrows are show in every row ignoring hasChildMapping parameter. In other levels after expanding the arrows near rows are shown correctly.

Sathyanarayanamoorthy Eswararao [Syncfusion]
Replied On December 31, 2018 10:10 AM UTC

  
Hi Customer, 

Query:  In first level the arrows are show in every row ignoring hasChildMapping parameter.   

We have confirmed that the issue “Expand icon is displayed for the record which has hasChildMapping field as false” as a defect and have logged a defect report for the same. The fix for this issue will be included in the upcoming Patch release on January 9 2019. 

We appreciate your patience until then. 

Regards, 
Sathyanarayanamoorthy 


Vignesh Natarajan [Syncfusion]
Replied On January 9, 2019 11:41 AM UTC

Hi Customer, 

We are glad to announce that patch release (v 16.4.46) is rolled out successfully and in that release, we have included the fix for “Expand icon is displayed for the record which has hasChildMapping field as false” issue. 

Please get back to us if you need further assistance. 

Regards, 
Vignesh Natarajan. 
 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;