TreeGrid additional queries and data mapping

[Unknown]

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]

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.data =  new 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. 

 

Sample link: https://stackblitz.com/edit/angular-akbdmr-rwwpuv?file=default.component.ts  

 

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. 

 

idMapping - https://ej2.syncfusion.com/documentation/api/treegrid/#idmapping 

 

parentIdMapping - https://ej2.syncfusion.com/documentation/api/treegrid/#parentidmapping 

 

treeColumnIndex - https://ej2.syncfusion.com/documentation/api/treegrid/#treecolumnindex 

 

hasChildMapping - https://ej2.syncfusion.com/documentation/api/treegrid/#haschildmapping  

 

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 

 

[Unknown]

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]

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 

 

[Unknown]

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]

  

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]

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.