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

Remote Data not working in tree grid

Hi Team, 

I have to implement a tree grid, where my API has only a single query param (id).

On component loading my API would be: 

On clicking the arrow for expansion, next call should pick the 'id' from the clicked row and expand with the data hitting same API : 

My code snippet is as follows:
TS file:
ngOnInit() {
    this.objectsData = new DataManager({
      url: `http://....../api/catalog/display_requested_view?id=${this.layer_id}`,
      crossDomain: true,
      adaptor: new WebApiAdaptor
    this.selectionOptions = { cellSelectionMode: 'Box', type: 'Single', mode: 'Cell' };

HTML file: 
<div class="control-section mb-1 ml-1 mr-1 mt-1">
    <ejs-treegrid #grid
    [selectionSettings] = 'selectionOptions'
            <e-column field='Name' headerText='Name' width='90'></e-column>
            <e-column field='Tags' headerText='Tags' width='90'></e-column>
            <e-column field='Type' headerText='Type' width='90'></e-column>
            <e-column field='Description' headerText='Description' width='90'></e-column>

API Response: 

Attachment: ApiResponse_5cdd7337.rar

3 Replies

FS Farveen Sulthana Thameeztheen Basha Syncfusion Team December 10, 2019 05:57 PM UTC

Hi Kunal, 

Thanks for contacting Syncfusion Support. 

We have checked your query and we need some more additional details to find the cause of the issue. Share us the following details. 

  1. Complete TreeGrid code example
  2. Exact scenario you need to acheive. Share the detail Explanation of your requirement.
  3. Share us the Video Demo to demonstrate your requirement.

Farveen sulthana T 

KB Kunal Bajaj December 16, 2019 08:10 AM UTC

I just want to implement a tree grid, which binds remote data. API calls that we are making are as follows: 

For 1st layer data: 

The response to the following API has the content with attributes 'ID, Name, Tags, Types, Description'

Now if a person expands further, I am using the same API, and just passing the id param again with the id of child row clicked.

Attachment: docsToSync_749224b6.zip

FS Farveen Sulthana Thameeztheen Basha Syncfusion Team December 17, 2019 03:37 PM UTC

Hi Kunal,  

We have checked your query and we have achieved your requirement using expanding event of the TreeGrid. This event get triggers when we expand the expand Icon. In this event we have passed the corresponding expanded data to serverside using addParams method. By this we can pass the param to  serverside. 

Refer to the code example:- 

<ejs-treegrid #treegrid [dataSource]='data' [editSettings]='editSettings' hasChildMapping='isParent' [toolbar]='toolbar' idMapping='TaskID' parentIdMapping='ParentID' (expanding)="Begin($event)" [treeColumnIndex]='1'> 
    <e-column field='TaskID' headerText='Task ID' isPrimaryKey=true width='150'></e-column> 
    <e-column field='TaskName' headerText='Task Name' width='150'></e-column> 


ngOnInit(): void { 
    this.editSettings = { allowEditing: true, allowAdding: true, allowDeleting: true, mode: "Row" }; 
    this.toolbar = ["Add", "Edit", "Delete", "Update", "Cancel"]; 
      .    .     . 
    Begin = function (args: any) { 
        var treeGridObj = document.getElementsByClassName('e-treegrid')[0].ej2_instances; 
        treeGridObj[0].grid.query.addParams("data", args.data.TaskID); 

Refer to the API Link:- 

Please get back to us if you need any further assistance. 

Farveen sulthana T 

Live Chat Icon For mobile
Up arrow icon