TreeGrid additional queries and data mapping
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
SIGN IN To post a reply.
6 Replies
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.
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.
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
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):
SIGN IN To post a reply.
