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. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Refresh treegrid

Thread ID:

Created:

Updated:

Platform:

Replies:

142576 Apr 6,2018 07:26 AM UTC Feb 12,2019 12:54 PM UTC Angular - EJ 2 8
loading
Tags: TreeGrid
AC
Asked On April 6, 2018 07:26 AM UTC

Hello,

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

Punniyamoorthi Elangovan [Syncfusion]
Replied On April 9, 2018 11:10 AM UTC

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 


AC
Replied On April 18, 2018 11:15 AM UTC

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 [Syncfusion]
Replied On April 19, 2018 01:22 PM UTC

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 
 
Please let us know if you require further assistance on this. 
Regards, 
Punniyamoorthi 
 


Punniyamoorthi Elangovan [Syncfusion]
Replied On April 19, 2018 02:46 PM UTC

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é
Replied On February 7, 2019 12:46 PM UTC

Punniyamoorthi 

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

The refresh is not working either.

Jayakumar Duraisamy [Syncfusion]
Replied On February 8, 2019 09:07 AM UTC

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 
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é
Replied On February 8, 2019 01:03 PM UTC

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 
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 [Syncfusion]
Replied On February 12, 2019 12:54 PM UTC

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. 
 
 
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 26th February 2019  and it will be included in the 2019 Volume 1 release. Until then we appreciate your patience. 
 
Regards, 
Vignesh Natarajan. 
 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;