Need to bind childnodes in tree grid in angular 7

Dayakar Reddy

Asked On November 7, 2019 04:56 PM UTC

I need to show a tree grid (initially all collapsed) and then when I click on a row, it should pull the data from api call at backend and bind it under the parent row.

I need to bind child nodes in treegrid in angular, can you provide sample code?

My requirement is more like in this https://www.syncfusion.com/forums/143305/hierarchial-data-load-on-demand-or-dynamically

html file

 <ejs-treegrid #treegrid [dataSource]='treeData' (actionFailure)="onActionFailure($event)"
                        idMapping='id' hasChildMapping='hasChildren' parentIdMapping='root' enableLoadOnDemand="true"
                        [treeColumnIndex]='0' (expanding)='onTreeListExpanding($event)'
                        (expanded)='onTreeListExpanded($event)'>
                        <e-columns>
                            <e-column field='code' headerText='Code'></e-column>
                            <e-column field='name' headerText='Name'></e-column>
                        </e-columns>
                    </ejs-treegrid>

TS file

  treeData1: DataManager;
  treeData: DataManager;

ngOnInit() {
    this.pageSettings = { pageSize: 3 };

    const authToken = this.authService.getIdToken();

    this.treeData1 = new DataManager({
      url: 'https://localhost:44396/api/v1/systems/GetTags',
      adaptor: new UrlAdaptor,
      requestType: 'POST',
      crossDomain: true,
      headers: [{ Authorization: 'Bearer ' + authToken }]
    });
    // this.query = new Query();
    this.treeData1.executeQuery(new Query()).then((e: any) => {
      this.treeData = e.result;
     //console.log(this.treeData1)
    });
  }

  onActionFailure(e: any): void {
    console.log(e.error)
  }

  onTreeListExpanding(event: any): void {

     // this.query = new Query();
     this.treeData1.executeQuery(new Query()).then((e: any) => {
      this.treeData = e.result;
     //console.log(this.treeData1)
    });
  }

  onTreeListExpanded(event: any): void {
    console.log(event);
  }

Reply | Reply with quote

Padmavathy Kamalanathan [Syncfusion]

Replied On November 8, 2019 10:33 AM UTC

Hi Dayakar,

Thanks for contacting Syncfusion Forums.

QUERY: I need to show a tree grid (initially all collapsed) and then when I click on a row, it should pull the data from api call at backend and bind it under the parent row.

As you have mentioned, your query is same as the one in the forum https://www.syncfusion.com/forums/143305/hierarchial-data-load-on-demand-or-dynamically

The Sample for your requirement has been given in that same forum.

Please check the below link,

https://ej2.syncfusion.com/angular/demos/#/material/treegrid/remotedata

You can edit and check that sample in the stackblitz also.

If you need further details, please get back to us with more detail.

Regards,

Padmavathy Kamalanathan

Reply | Reply with quote

Dayakar Reddy

Replied On November 8, 2019 10:58 AM UTC

Hi Padmavathy,

Pleas provide solution for below queries

1) I have already gone through the link which you have provided, but i could not able to bind the child nodes properly using Rest API call.

Please provide some sample to bind child nodes using rest api service calls

2) One of the child has sub child but there is no arrow getting displayed in treegrid to expand. that record has hasChildren property is true.

3) Please provide me solution for how to enable paging in treegrid, when i enable below code , i am getting error in console, ERROR TypeError: Cannot set property 'allowPaging' of undefined ,

this.treegrid.allowPaging = true;

this.pageSettings = { pageSize: 3, pageSizeMode: 'Root' };

this.treegrid.pageSettings = this.pageSettings;

4) Please provide solution for how to do CRUD operations in treegrid for angular

Please find the attachment for reference i attached html and component. and some screenshots

Attachment: treegrid_8f3b4da0.zip

Reply | Reply with quote

Dayakar Reddy

Replied On November 12, 2019 04:00 PM UTC

Hi Padmavathy ,

Can you help me on treegrid?

https://ej2.syncfusion.com/documentation/treegrid/data-binding/?no-cache=1&_ga=2.129772363.616942144.1572843273-1160880328.1570417103#handling-child-data

I am binding child data for treegrid using dataStateChange event of treegrid but Missing expand icon in child nodes even though hasChildMapping property isParent is true, please set hasChildData: true to childData array objects in the below link in index.ts file and please check the UI expand icon is missing for child node.

https://codesandbox.io/s/eager-microservice-ydpq7

Please provide solution for this i have attached the code and screenshots for your reference along with json data for chilsnode .

Thanks,

Dayakar.

Attachment: treegrid_7ee5de0a.zip

Reply | Reply with quote

Padmavathy Kamalanathan [Syncfusion]

Replied On November 12, 2019 04:14 PM UTC

Hi Dayakar,

Thanks for contacting Syncfusion Forums.

QUERY: Provide sample for binding child nodes

From your query we understand that you need to bind child node to parent node of TreeGrid using API.

Please check the below sample,

https://www.syncfusion.com/downloads/support/directtrac/general/ze/angular-core-webapi-treegrid580155377.zip

QUERY2: One of the child node has sub child but there is no arrow getting displayed in treegrid to expand

From your code we can see that you are using Custom Binding(using dataStateChage) to bind data to TreeGrid. Since you are using our DataManager, you need not to use the Custom Binding. Custom Binding is meant for custom logic data. In our data manager, we have did everything needed for binding child node by inbuilt.

So we suggest you use our dataManager with webApi Adaptor. Please check the sample provided above.

QUERY3: getting error in pageSettings definition

Please check the below code,

  <ejs-treegrid [dataSource]='data' childMapping='subtasks' [treeColumnIndex]='1'
    [pageSettings]='pageSetting' allowPaging='true'>
------
  </ejs-treegrid>

in ts

export class DefaultPagingComponent implements OnInit {
public data: Object[] = [];
public pageSetting: Object;
ngOnInit(): void {
-------
  this.pageSetting = { pageCount: 2, pageSizes: true } ;
}
}

We suggest you to define the allowPaging property as shown above. Please check the below sample,

https://ej2.syncfusion.com/angular/demos/#/material/treegrid/default-paging

QUERY4: Provide sample for CRUD operation

We have provided sample above for performing CRUD with webApi Adaptor. Please check that.

If you have further queries, please get back to us.

Regards,

Padmavathy Kamalanathan

Reply | Reply with quote

Dayakar Reddy

Replied On November 12, 2019 04:34 PM UTC

Hi Padmavathy Thank you for the reply.

I am following the below approach

https://ej2.syncfusion.com/documentation/treegrid/data-binding/?no-cache=1&_ga=2.129772363.616942144.1572843273-1160880328.1570417103#handling-child-data

But i want to use Custom Binding(using dataStateChage) based on my requirement we need to display large number of records in treegrid, can you suggest me how to display expand icon for child nodes when we use custom binding?

though the isParent is set to true the expand is missing for child nodes.

Thanks,

Dayakar.

Reply | Reply with quote

Sathyanarayanamoorthy Eswararao [Syncfusion]

Replied On November 13, 2019 12:33 PM UTC

Hi Dayakar,

Query : though the isParent is set to true the expand is missing for child nodes.

We were also able to replicate the issue on our side. We have confirmed that the reported issue is a bug and have logged a defect report for the same. The fix for this issue will be in the patch release which is expected to be rolled out on November 27 2019.

Till then we appreciate your patience. You can track the status of the reported issue from the below link.

https://www.syncfusion.com/feedback/10138/expand-icon-is-not-displayed-for-child-records-even-when-haschildmapping-field-is

Regards,

Sathyanarayanamoorthy

Reply | Reply with quote

Dayakar Reddy

Replied On November 14, 2019 05:34 AM UTC

Hi Padmavathy , Thank you for the reply, Instead of custom binding now i am using syncfusion dataManager. expand icon is now getting displayed. your sample code helped me.

I have below query

1) i am doing CRUD operations on treegrid, how to add additional fields to through request to rest api when we add record in treegrid when we use dataManager or how to update the request from typescript anuglar

https://www.syncfusion.com/downloads/support/directtrac/general/ze/angular-core-webapi-treegrid580155377.zip

// POST: api/Orders

[HttpPost]

public object Post([FromBody]SelfReferenceData value)

{

SelfReferenceData.tree.Insert(0, value);

var data = SelfReferenceData.tree.ToList();

return Json(new { result = data, count = data.Count });

}

Reply | Reply with quote

Padmavathy Kamalanathan [Syncfusion]

Replied On November 18, 2019 03:42 AM UTC

Hi Dayakar,

We have achieved your requirement by using the Custom Adaptor concept and overriding the insert method of the WebApiAdaptor. Please refer the below code example.

Please refer the below documentations for more details.

https://ej2.syncfusion.com/angular/documentation/treegrid/data-binding/?no-cache=1#custom-adaptor

import { Component, ViewChild, ViewEncapsulation, OnInit, Inject } from '@angular/core';

import { DataManager, WebApiAdaptor, Query, DataUtil } from '@syncfusion/ej2-data';

import { TreeGridComponent } from '@syncfusion/ej2-angular-treegrid';

let primaryKey: any;

let selectedRecord: any;

@Component({

selector: 'fetchdata',

templateUrl: './fetchdata.component.html',

encapsulation: ViewEncapsulation.Emulated

})

export class FetchDataComponent {

public data: any;

public toolbarOptions: string[] | undefined;

public editSettings: Object | undefined;

@ViewChild('treegrid')

public treegrid: TreeGridComponent;

ngOnInit(): void {

this.editSettings = { allowEditing: true, allowAdding: true, allowDeleting: true, mode: "Row", newRowPosition:"Below" };

this.toolbarOptions = ['Add', 'Delete', 'Update', 'Cancel'];

this.data = new DataManager({

url: 'api/SelfReferenceData',

adaptor: new CustomAdaptor()

});

}

actionBegin(args: any): void {

if (args.requestType == "save" && args.action == "add") {

primaryKey = selectedRecord.TaskID;

}

rowSelected(args: any): void {

selectedRecord = args.data;

}

////// Extending the WebApiAdaptor and overriding the insert method.

class CustomAdaptor extends WebApiAdaptor {

public insert(dm: DataManager, data: Object, tableName?: string): Object {

dm.dataSource.url = dm.dataSource.url + "?$key=" + primaryKey //// sending the primary key of selected record in query string

return {

type: 'POST',

url: dm.dataSource.url,

data: JSON.stringify(data),

};

}

[Controller.cs]

[HttpPost]

public object Post([FromBody]SelfReferenceData value)

{

var queryString = Request.Query;

StringValues keys;

queryString.TryGetValue("$key", out keys); /// retrieving the key value from querystring

int key = Int32.Parse(keys[0]);

SelfReferenceData.tree.Insert(0, value);

var data = SelfReferenceData.tree.ToList();

return Json(new { result = data, count = data.Count });

}

If you need any further assistance please get back to us. We will be happy to assist you.

Regards,

Padmavathy Kamalanathan

Reply | Reply with quote

Thread ID:	Created:	Updated:	Platform:	Replies:
148913	Nov 7,2019 04:56 PM UTC	Nov 18,2019 03:42 AM UTC	Angular - EJ 2	8

Thread ID:

Created:

Updated:

Platform:

Replies:

Please sign in to access our forum

CONTACT US