Inserting child records in Treegrid

[Damir Gabeljic]

Hi

what's the proper way to add child row to Treegrid?

First I tried do push record to dataSource array, but nothing happens.

Then I tried to use treegrid addRecord method, but the results aren't as expected.

I have modified one of your samples for my scenario: https://stackblitz.com/edit/angular-vrtsl2

Another question is how to make new row visible (scroll to it)?

Thanks in advance

 Damir

[Padmavathy Kamalanathan]

Hi Damir, 

 

Thanks for contacting Syncfusion Forums. 

 

QUERY1: what's the proper way to add child row to Treegrid? 

 

From your query we understand that you are unable to add child row to the TreeGrid. In the sample you have shared, you have set button to the parent rows, and on button click you need to add child row to that parent row.  

 

In order to achieve your requirement, please follow the below steps, 

 

1. For Adding/Editing you need to set isPrimaryKey to true for particular column.
2. Since you need to add record as child, set newRowPosition property of editSettings as “Child”.
3. In Button Click event, you need to call the addRecord method with the data and index of parent record as parameters.

 

Please refer the below code snippet, 

 

 

<ejs-treegrid #treegrid [dataSource]='data' height='400' childMapping='subtasks' [treeColumnIndex]='0'[editSettings]='editSettings'  (actionComplete)='actionComplete($event)'> 

  <e-columns> 

      <e-column field='taskID' headerText='Task ID' isPrimaryKey='true' width='90' textAlign='Right' ></e-column> 

      <e-column width="150"> 

        <ng-template #template let-data> 

          <button (click)="insert(data)" *ngIf="data.level == 0">INSERT CHILD</button> 

            </ng-template> 

        </e-column> 

  </e-columns> 

</ejs-treegrid> 

 

export class AppComponent implements OnInit{ 

 

  public data: Object[] = []; 

  public editSettings: Object; 

   

  @ViewChild('treegrid') 

  public treegrid: TreeGrid; 

 

  ngOnInit(): void { 

    this.data = sampleData; 

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

 

} 

insert(data: any) { 

  var value =  { taskID: 33333, taskName: 'Plan timeline'}; 

 this.treegrid.addRecord(value, data.index); 

// call addRecord method with data and index of parent record as parameters 

} 

 

 

 

 

Please refer the below help documentations, 

https://ej2.syncfusion.com/documentation/api/treegrid/column/#isprimarykey 

https://ej2.syncfusion.com/documentation/api/treegrid/editSettingsModel/#newrowposition 

https://ej2.syncfusion.com/documentation/api/treegrid/edit/#addrecord 

 

 

QUERY2: how to make new row visible (scroll to it)? 

 

In order to scroll to the newly added row, call the selectRow method with the index of the added row as parameter in the actionComplete event with args.requestType as “save”. 

 

Please refer the below code snippet, 

 

 

actionComplete(args): void { 

  if (args.requestType == "save") { 

    var index = args.index; 

    this.treegrid.selectRow(index); // select the newly added row to scroll to it  

  } 

} 

 

Please refer the below sample, 

https://stackblitz.com/edit/angular-vrtsl2-198z7h 

  

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

 

Regards, 

Padmavathy Kamalanathan 

[Damir Gabeljic]

Thanks, works perfectly.

[Padmavathy Kamalanathan]

Hi Damir, 

We are happy to hear that your issue has been resolved. 

Feel free to get back to us, if you need further assistance. 

Regards, 

Padmavathy Kamalanathan 

[hoai nam]

Hi

in the sample: https://stackblitz.com/edit/angular-vrtsl2-198z7h

i added [enableCollapseAll]="true".

and i removed *ngIf="data.level == 0"

now i try addRecord into Quebec on Canada and addRecord into  newRow then it went error.... https://stackblitz.com/edit/angular-vrtsl2-8vtkxe?file=app.component.html

help me please !!!

Thank in advance

Hoai Nam

[Padmavathy Kamalanathan]

Hi Hoai Nam, 

 

Greetings from Syncfusion Support. 

 

Query: now i try addRecord into Quebec on Canada and addRecord into  newRow then it went error 

 

We can add record to both Quebec and Canada in the shared sample (both in the version as in your sample as well as in our latest version). Please check the below sample and video demo for your reference, 

 

Sample: https://stackblitz.com/edit/angular-vrtsl2-611zy3?file=app.component.html  

Video demo: https://www.syncfusion.com/downloads/support/forum/146318/ze/ADDREC~11022872762  

 

Still facing issue, kindly share us the below details, 

1. Video demo of the issue with issue replication procedure.
2. You have mentioned that you are getting error. Kindly share us the error details (with complete stack trace)
3. Kindly share your produce version details
4. If possible share us issue reproducible sample or reproduce the issue in the sample shared above.

 

Regards, 

Padmavathy Kamalanathan           

[hoai nam]

Hi  Padmavathy Kamalanathan,

Sample: https://stackblitz.com/edit/angular-vrtsl2-611zy3?file=app.component.html  

and this is an error video when i try to do it : https://drive.google.com/file/d/1u0IN5-wrFuGp3Uo_m0Aul_eQE4h6o3-O/view?usp=sharing

i"m doing a project use tree grid with n level and CRUD that.

My produce version: 

"@syncfusion/ej2-angular-treegrid": "~18.4.44"

[Padmavathy Kamalanathan]

Hi Hoia Nam, 

 

Thanks for your update. 

 

We can reproduce the issue with your sample. On further validation, we found that the primary key created while adding new record was not unique. This caused the reported issue. 

 

For proper working of CRUD functionality, we need to set primary key column and it’s value should be maintained unique. So, when adding new record, we suggest you to use unique value for primary key column (name column in your case). 

 

We have modified the sample. Please check the below shared sample, 

https://stackblitz.com/edit/angular-add-inner-childs?file=app.component.ts  

 

Please check the below code snippet, 

  insert(data: any) { 

    var childRow = { 

      name: Math.random() 

        .toString(36) 

        .substring(7) 

    }; //unique name value 

    this.treegrid.addRecord(childRow, data.index);  

   // call addRecord method with data and index of parent record as parameters 

  } 

 

Please check the below screenshot, 

 

 

Kindly get back to us for further assistance. 

 

Regards, 

Padmavathy Kamalanathan