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

Inserting child records in Treegrid

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



7 Replies

PK Padmavathy Kamalanathan Syncfusion Team July 31, 2019 11:32 PM

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, 
 
 
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, 
  
If you have further queries, please get back to us. 
 
Regards, 
Padmavathy Kamalanathan 



DG Damir Gabeljic July 31, 2019 11:49 PM

Thanks, works perfectly.


PK Padmavathy Kamalanathan Syncfusion Team August 2, 2019 01:55 AM

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 



HN hoai nam replied to Padmavathy Kamalanathan June 21, 2021 02:55 AM

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



PK Padmavathy Kamalanathan Syncfusion Team June 22, 2021 04:29 AM

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



HN hoai nam replied to Padmavathy Kamalanathan June 23, 2021 06:52 PM

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"


PK Padmavathy Kamalanathan Syncfusion Team June 25, 2021 07:10 AM

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


Loader.
Live Chat Icon For mobile
Up arrow icon