Loop through Rows and Columns

[PDev]

let rowCollection=this.treegrid.getRows();

let colCollection=this.treegrid.getColumns();

I want to read up all the updated values from tree grid. So far, I have rowCollection[0].children[0].innerText but what i am looking at is find the values based on column Names. something like rowCollection[1].cells["name"]. is something like this possible ? 

[Pon Selva Jeganathan]

Hi PDev,    

   

Thanks for contacting syncfusion forum.  

  

Query: Loop through Rows and Columns

Before we start proceeding with your query, we request you to share us the below details in order to provide you with the solution as early as possible.

1. After updating, we can get the details from the data source from using Treegrid Instance

Please refer to the below screenshot: 

[PDev]

My users are doing batch update from excel as well as cell updates. all i want is to get the full array from the treegrid which i can store and same i can load when my page loads to bind the treegrid. 

Can you help ?

[Pon Selva Jeganathan]

Hi PDev,    

   

Thanks for the update.  

  

Query: Loop through Rows and Columns

Based on your query, we understand you need to get all the edited cell values. We suggest you to use  batch editing to get the batch changes.  

Please refer to the below help documentation,

https://ej2.syncfusion.com/angular/documentation/treegrid/edit/#batch

Please refer to the below demo,

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

Also, using beforeBatchSave event, you can get all the edited cell values on Batch EditMode. 

Please refer to the below API documentation,

https://ej2.syncfusion.com/documentation/api/treegrid/#beforebatchsave

If your requirement doesn’t meet after following the above reference, please share the following information with us.

1. Share the video demonstration of your requirement.     
2. Kindly share the detail explanation of your requirement.

The provided information will be helpful to provide you response as early as possible. 

 

Regards,  

Pon selva   

[PDev]

i am afraid,None of them are useful. 

I have a save button outside of treegrid and i cant afford to do update call on every cell change or row change event. all i wanted was JSON object for whole of the grid so i can update the full json which has edited cell/row information. 

Not sure what i did is right but i had to loop through the data using below. May you can validate if the approach is okay.

let rowCollection=this.treegrid.getRows();

let colCollection=this.treegrid.getColumns();

let result=[];

rowCollection.forEach(obj=>{

//let primaryKey=this.treegrid.getCellFromIndex(obj.rowIndex,0)["innerText"];

let _data={};

let isParent=false;

colCollection.forEach(col=>{

try{

//let colName=this.treegrid.getColumnHeaderByIndex(col["index"])["innerText"];

let data=this.treegrid.getCellFromIndex(obj.rowIndex,col["index"])["innerText"];

if(col.field.indexOf("-")>-1){

data=data==""?null:Number(data.replace(/[$,]/g,'').replace(Config.Currency,''));

_data[col.field]=data;

}else if(col.field=="isParent"){

isParent=Config.stringToBoolean(data);

data=isParent;

_data[col.field]=data;

}else if((col.field=="ParentItem" && isParent==false) || col.field=="ID"){

data=parseInt(data);

_data[col.field]=data;

}else if(col.field=="name"){

_data[col.field]=data;

}else{

}

}catch(e){

console.log("Error occured while fetching data");

}

});

result.push(_data);

});

[Pon Selva Jeganathan]

Hi Michal,   

  

Thanks for contacting syncfusion forum. 

 

We are able to reproduce the issue at our end. And we need to validate by using dependent components and will update you with further details on April 30, 2021.   

 

Until then we value your patience.   

  

Regards,    

Pon selva    

[Pon Selva Jeganathan]

 

Hi PDev,    

   

Please ignore the previous update. 

Query: Loop through Rows and Columns

Based on your query, we understand you update the row and column changes into the datasource using button click. To achieve this requirement, we suggest that you to use dataSource  property and refresh method of the Tree Grid. We can get the row details using datasource property from treegridInstance and update the changed values into it by looping over it. Using the refresh method, we can refresh the changes into the datasource. Please refer to the below code snippet, 

 

 

<button 

    ejs-button 

    #button1 

    cssClass="btn btn-default" 

    content="Update" 

    id="update" 

    (click)="onClicked()" 

  ></button> 

 

<ejs-treegrid #treegrid [dataSource]="data" height="400" childMapping="subtasks" [treeColumnIndex]="1" 

        [editSettings]="editSettings" [toolbar]="toolbar" (beforeBatchSave)="beforeBatchSave($event)"> 

….. 

    </ejs-treegrid> 

 

onClicked(): void { 

    // your code 

    var treegrid = document.getElementsByClassName("e-treegrid")[0] 

      .ej2_instances[0]; // tree grid instance 

 

    treegrid.dataSource[2].taskName = "test";  // change the task name valu 

    treegrid.dataSource[1].subtasks[1].taskName = "test1"; 

    treegrid.refresh(); 

     

    var len = treegrid.dataSource.length; 

    for (var i = 0; i < len; i++) { 

      //for parent record 

      var data = treegrid.dataSource[i]; 

      var taskname = treegrid.dataSource[i].taskName; 

      console.log(taskname); 

 

      // for child record 

      var childlen = treegrid.dataSource[i].subtasks.length; 

      for (var j = 0; j < childlen; j++) { 

        var data = treegrid.dataSource[i].subtasks[j]; 

        var taskname = treegrid.dataSource[i].subtasks[j].taskName; 

        console.log(taskname); 

      } 

 

 

 

Please refer to the below sample,

https://stackblitz.com/edit/angular-batch-edit-pfmxqu?file=app.component.html

Please refer to the below API documentation,

[PDev]

Thanks for the answer but while looping on datasource. it does not reflect updated records in it. 

it will still show data which was there at the time of binding the treegrid. my grid is editable and i think above example will not be useful

[Pon Selva Jeganathan]

Hi PDev,    

   

Thanks for the update.  

  

Query: Loop through Rows and Columns

Based on your query, we can get the row details using datasource property from treegridInstance and we have change the values into it by looping over it. Using the refresh method, we can refresh the changes into the datasource (as we have mentioned earlier in previous update). Please refer to the below code snippet,  

 

 

<button 

    ejs-button 

    #button1 

    cssClass="btn btn-default" 

    content="Update" 

    id="update" 

    (click)="onClicked()" 

  ></button> 

 

<ejs-treegrid #treegrid [dataSource]="data" height="400" childMapping="subtasks" [treeColumnIndex]="1" 

        [editSettings]="editSettings" [toolbar]="toolbar" (beforeBatchSave)="beforeBatchSave($event)"> 

….. 

    </ejs-treegrid> 

 

onClicked(): void { 

    // your code 

    var treegrid = document.getElementsByClassName("e-treegrid")[0] 

      .ej2_instances[0]; // tree grid instance 

 

     

    var len = treegrid.dataSource.length; 

    for (var i = 0; i < len; i++) { 

      //for parent record 

      var data = treegrid.dataSource[i]; 

    treegrid.dataSource[2].taskName = "test";  

      var taskname = treegrid.dataSource[i].taskName; 

      console.log(taskname); 

 

      ….. 

treegrid.refresh(); 

      } 

 

 

Please refer to the below sample,

https://stackblitz.com/edit/angular-batch-edit-nru31h?file=app.component.ts

If your requirement doesn’t meet after following the above reference, please share the following information with us.

1. Share the video demonstration of your requirement.     
2. Kindly share the detail explanation of your requirement.
3. Share the complete code example.

The provided information will be helpful to provide you response as early as possible.  

 

Regards,  

Pon selva