Refresh 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())?

Reply | Reply with quote

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

Reply | Reply with quote

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.

Reply | Reply with quote

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

https://jsplayground.syncfusion.com/pd0gf5pu

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

Regards,

Punniyamoorthi

Reply | Reply with quote

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

Reply | Reply with quote

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.

Reply | Reply with quote

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

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

Reply | Reply with quote

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

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.

Reply | Reply with quote

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>

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

Reply | Reply with quote

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

Thread ID:

Created:

Updated:

Platform:

Replies:

Please sign in to access our forum

CONTACT US