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: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Remote Data not working in tree grid

Thread ID:

Created:

Updated:

Platform:

Replies:

149782 Dec 9,2019 09:22 AM UTC Dec 17,2019 03:37 PM UTC Angular - EJ 2 3
loading
Tags: TreeGrid
Kunal Bajaj
Asked On December 9, 2019 09:22 AM UTC

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 [Syncfusion]
Replied On 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.

Regards, 
Farveen sulthana T 
 


Kunal Bajaj
Replied On 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: 
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 [Syncfusion]
Replied On 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:- 

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

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

Regards, 
Farveen sulthana T 


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

Live Chat Icon For mobile
Live Chat Icon