Refresh treegrid

[Unknown]

Hello,

is there a possibility to refresh tree grid content (like grid content with method refreshcontent())?

[Punniyamoorthi Elangovan]

Hi AC, 

Thank you for contacting Syncfusion support. 

The tree grid content can be refreshed by using the refresh method. If the data should be refreshed, you can call the method with the updated data as the method parameter, or else you can just call the method without any parameter to refresh the UI alone. Please find more details of this method here. 

Please let us know if you require further assistance on this. 

Regards, 

Punniyamoorthi 

[Unknown]

Hello,

I am trying to use refresh method like:

treeGridData = new ej.DataManager(url: 'myAPIUrl'); // treeGridData is dataSource property of ej-treegrid

requestQuery: ej.Query = new ej.Query().select("").where("", ej.FilterOperators.equal, "").sortBy("ParentId"); // requestQuery is query property of ej-treegrid

treeGridComponent.widget.refresh(treeGridData, requestQuery);

After this refresh I am getting an error:

What am I doing wrong? I am getting data from my WebAPI.

Also one more question - is there a possibility to refresh only one line in treeGrid after some changes in other component? For example I am changing row data in one component and after saving changes I want to refresh only one changed line instead of all treeGrid.

[Punniyamoorthi Elangovan]

Hi AC, 

Thank you for your update 

We have analysed your reported issue, but we are unable to reproduce the reported issue at our end. We have prepared a TreeGrid sample with “25000" records and dynamically updated the data source in TreeGrid using refresh method. Please refer the below code snippet. 

$("#dataManager").click(function () { 

            dataManager = ej.DataManager({ 

                url: window.baseurl + "Wcf/TreeGridGantt/TreeGantt.svc/SelfReferenceDatas", 

                crossDomain: true, 

                offline:true 

            }); 

            var treegridObj = $("#TreeGridContainer").ejTreeGrid("instance"); 

            var query = ej.Query().sortBy("TaskID", ej.sortOrder.Descending, false); 

            treegridObj.refresh(dataManager, query) 

        }) 

We have also prepared the JS Playground sample, Please find the sample link below 

https://jsplayground.syncfusion.com/pd0gf5pu 

 

Please let us know if you require further assistance on this. 

Regards, 

Punniyamoorthi 

 

[Punniyamoorthi Elangovan]

Hi AC,  

Please find the below update 

Query: is there a possibility to refresh only one line in treeGrid after some changes in other component? For example I am changing row data in one component and after saving changes I want to refresh only one changed line instead of all treeGrid. 

Answer: We can achieve this by using refreshRow public method. In this method we have to pass the edited record index as an argument. Please refer the below code snippet. 

$("#updateRecord").click(function () { 

            var treegridObj = $("#TreeGridContainer").ejTreeGrid("instance"); 

            treegridObj.refreshRow(3);//Passing the edited record index 

        }) 

Please let us know if you require further assistance on this. 

Regards, 

Punniyamoorthi 

[Allyson José]

Punniyamoorthi 

The Angular Component dont contains refreshRow method and refresh method Expected 0 arguments.

The refresh is not working either.

[Jayakumar Duraisamy]

Hi Allyson, 

We have analyzed the reported error in our sample but unable to replicate it. Hence, we have prepared the sample and refreshed TreeGrid data source using “refresh” method. 

Please find the code example below: 

click (event) {                  

            var dataManager = new ej.DataManager(this.treeData), 

            treegridObj = $("#TreeGridControl").ejTreeGrid("instance"), 

            query = new ej.Query().sortBy("taskID", ej.SortOrder.Descending, false); 

            treegridObj.refresh(dataManager, query);               

    } 

 

Please find the code example to refresh particular row using “refreshRow” method. 

clickRow (event) { 

            var treeObj = $("#TreeGridControl").ejTreeGrid("instance"), 

            item = treeObj.model.updatedRecords; 

              if(item.length > 0){ 

                           item[2].taskName  = "NewName";                                      

                            //To refresh the required record                

                            treeObj.refreshRow(2); 

                                      } 

            } 

Please find the sample from below location 

Sample: http://www.syncfusion.com/downloads/support/directtrac/general/ze/RefreshTreeGrid-302789927 

Please share your TreeGrid related code snippets or demo sample, if you are facing the same error again. We will help you to resolve this error. 

Regards, 

Jayakumar D 

[Allyson José]

Hi Allyson, 

We have analyzed the reported error in our sample but unable to replicate it. Hence, we have prepared the sample and refreshed TreeGrid data source using “refresh” method. 

Please find the code example below: 

click (event) {                  

            var dataManager = new ej.DataManager(this.treeData), 

            treegridObj = $("#TreeGridControl").ejTreeGrid("instance"), 

            query = new ej.Query().sortBy("taskID", ej.SortOrder.Descending, false); 

            treegridObj.refresh(dataManager, query);               

    } 

 

Please find the code example to refresh particular row using “refreshRow” method. 

clickRow (event) { 

            var treeObj = $("#TreeGridControl").ejTreeGrid("instance"), 

            item = treeObj.model.updatedRecords; 

              if(item.length > 0){ 

                           item[2].taskName  = "NewName";                                      

                            //To refresh the required record                

                            treeObj.refreshRow(2); 

                                      } 

            } 

Please find the sample from below location 

Sample: http://www.syncfusion.com/downloads/support/directtrac/general/ze/RefreshTreeGrid-302789927 

Please share your TreeGrid related code snippets or demo sample, if you are facing the same error again. We will help you to resolve this error. 

Regards, 

Jayakumar D 

Hi, 

As can be seen in the official documentation, the TreeGrid component for angular (ej2) has the refresh method which has no parameters.

I am using the binding hierarchy with more than 2 levels, which has an open bug. Can this affect the operation of the refresh method in (ej2)? Because it is not working on my project.

[Vignesh Natarajan]

Hi Allyson, 

 

Query : is there a possibility to refresh only one line in treeGrid after some changes in other component? 

 

From your query, we understand that you need to update (refresh) the record in EJS TreeGrid. We have achieved your requirement using the updateRow method of the edit module of Treegrid. 

 

Please refer the below code example. 

 

In the below code example we have updated a single row using the updateRow method. 

 

[default.html] 

 

<button (click)='handleClick($event)' type='button'>Modify Record</button> 

 

<div class="control-section"> 

 

     <ejs-treegrid #treegrid [dataSource]='data' height='400' childMapping='subtasks' [treeColumnIndex]='1' [editSettings]='editSettings' [toolbar]='toolbar'> 

 

                          ------- 

 

        </ejs-treegrid> 

</div> 

 

…………………………………………………………………………………….. 

 

[default.component.ts] 

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

import { sampleData } from './jsontreegriddata'; 

import { ChangeEventArgs } from '@syncfusion/ej2-dropdowns'; 

import { TreeGridComponent , EditService , ToolbarService , PageService } from '@syncfusion/ej2-angular-treegrid'; 

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

 

@Component({ 

    selector: 'control-content', 

    templateUrl: 'default.html', 

providers: [EditService , ToolbarService , PageService] 

 

}) 

 

export class DefaultComponent implements OnInit { 

   

                            ------ 

 

     @ViewChild('treegrid') 

     public treegrid: TreeGridComponent; 

     ngOnInit(): void { 

 

                   ------ 

 

    } 

    

 handleClick(event: Event) { 

  this.treegrid.grid.editModule.updateRow(0,{"taskID":1,"taskName": "Modifed","startDate": new Date(),"duration": 10}) 

} 

} 

 

We have prepared an online sample for your reference. Please refer the below link for the sample. 

 

Sample : https://stackblitz.com/edit/angular-euvnwo-c1xh6r?file=default.component.ts 

 

Query 2: is there a possibility to refresh tree grid content 

 

Currently refreshing the dataSource for the Treegrid using the dataSource property is not working properly for the remote data. We have logged a defect report for the mentioned issue and the fix for this issue will be included in the upcoming patch release on 26^th February 2019  and it will be included in the 2019 Volume 1 release. Until then we appreciate your patience. 

 

Regards, 

Vignesh Natarajan.