Remote Data not working in tree grid

[Kunal Bajaj]

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: 

http://...../api/catalog/display_requested_view?id=${this.layer_id}

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

http://...../api/catalog/display_requested_view?id=${childLayerId}

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

    });

    console.log(this.objectsData);

    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

    [dataSource]='objectsData.contents'

    enableLoadOnDemand="true"

    idMapping='id'

    ParentIdMapping="id"

    hasChildMapping=true

    [treeColumnIndex]='0' 

    gridLines='Both'

    [selectionSettings] = 'selectionOptions'

    (click)="clickaction($event)"

    height='400'

    [allowFiltering]='true'

     >

        <e-columns>

            <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>

        </e-columns>

    </ejs-treegrid>

</div>

API Response: 

Attached

Attachment: ApiResponse_5cdd7337.rar

[Farveen Sulthana Thameeztheen Basha]

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.

Regards, 

Farveen sulthana T 

 

[Kunal Bajaj]

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: 

http://...../api/catalog/display_requested_view?id=1090

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

[Farveen Sulthana Thameeztheen Basha]

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:- 

App.component.html 

<ejs-treegrid #treegrid [dataSource]='data' [editSettings]='editSettings' hasChildMapping='isParent' [toolbar]='toolbar' idMapping='TaskID' parentIdMapping='ParentID' (expanding)="Begin($event)" [treeColumnIndex]='1'> 

  <e-columns> 

    <e-column field='TaskID' headerText='Task ID' isPrimaryKey=true width='150'></e-column> 

    <e-column field='TaskName' headerText='Task Name' width='150'></e-column> 

  </e-columns> 

</ejs-treegrid> 

App.component.ts 

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:- 

https://ej2.syncfusion.com/angular/documentation/api/treegrid/#expanding 

 

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

Regards, 

Farveen sulthana T