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.
Unfortunately, activation email could not send to your email. Please try again.

Select row after changing the datasource in treegrid

Thread ID:

Created:

Updated:

Platform:

Replies:

132055 Aug 10,2017 05:33 AM Aug 18,2017 01:52 AM Angular 7
loading
Tags: ejTreeGrid
Stephan Holl
Asked On August 10, 2017 05:33 AM

Hello,

is there a way to get an event when the treegrid  finished to update the internal state after a datasource change.
I want to select a row in the treegrid programmatically. Like

loadData( selectRow?: number) {
     this.datasource = loadSomeData();
 
     if( selectRow != null) {
          this.selectedRowIndex = selectRow;
}
}

in the html-template I have the assignment
      [dataSource]="datasource"
[selectedRowIndex]="selectedRowIndex"

Hope you can help    


Suriyaprasanth Ravikumar [Syncfusion]
Replied On August 11, 2017 06:31 AM

Hi Stephan, 
 
In TreeGrid “selectedRowIndex” and “dataSource” properties are two way bondable. 
When we refresh the data source dynamically “actionComplete” event will triggered with argument “requestType” as “refreshDataSource”.  
We have analyzed your code snippet, provided code snippets are fine. There is a chance to error if any asynchronous call inside the method “loadSomeData”. 
We have prepared a sample and updated data source and selected row index values dynamically, please find the code snippet and sample location below. 
  
[HTML] 
<ej-treegrid id="TreeGridControl" [dataSource]="treeGridData [selectedRowIndex]="selectedRowIndex" (actionComplete) ="actionComplete($event) > 
            ... 
        </ej-treegrid> 
<button (click)=" loadData(1)">ChangeDatasource</button> 
 
[TS] 
export class AppComponent { 
    public treeGridData: any = {}; 
    public datasource: any = {}; 
    public selectedRowIndex: any; 
    public constructor(){ 
         this.datasource =  [{ 
                      //.. 
         }] 
          this.selectedRowIndex = 4; 
    } 
  public loadData( selectRow?: number) { 
     this.datasource = this.loadSomeData();  
     if( selectRow != null) { 
          this.selectedRowIndex = selectRow; 
   } 
    }   
    public loadSomeData(){ 
        this.treeGridData = [{ 
                      //.. 
      }] 
      return this.treeGridData; 
    } 
// Event trigger while changing datasource dynamically. 
    actionComplete(args){ 
        if(args.requestType == "refreshDataSource"){ 
           //code to done after the dynamic change of datasource. 
        } 
    } 
} 
 
Please let us know if you require any other assistance on this. 
 
Thanks, 
Suriyaprasanth R. 


Stephan Holl
Replied On August 14, 2017 05:55 AM

Hello Suriyaprasanth R.,

it seems like I'm doing something wrong.

I want to implement the following use case:

  • I load data from an external datasource and want to select one node in the tree programmatically. The node is identified by an unique id.
My current solution:
  1. I load the data and assigned it to the datasource
  2. I search for the row index with the function searchRowForId( id )
  3. I set the value selectedRowIndex
[TS]
@ViewChild('myTree') treeGrid: TreeGridComponent;
...

searchRowForId(id: number): number {
const tree = this.treeGrid.widget;
const dataRow = tree.model.currentViewData;

let rowIdx = -1;
for (let i = 0; i < dataRow.length; ++i) {
if (dataRow[i].id === id) {
rowIdx = i;
break;
}
}
return rowIdx;
}


My problem:

Case 1: I load the data an immidiatly I call my Function

[TS]

public loadData(idToSelect?: number) {
this.datasource = this.loadSomeData();
if (idToSelect!= null) {
this.selectedRowIndex = searchRowForId( idToSelect );
}
}

in this case the function return -1 because the currentViewData is empty.

Case 2: I call the function searchRowForId() in actionComplete and try to select the node there

-> the same result currentViewData is empty.


Any ideas?



Jonesherine Stephen [Syncfusion]
Replied On August 15, 2017 11:28 AM

Hi Stephan, 
We have analyzed the reported query. We have prepared the sample and fetched the required row id by using “updatedRecords” which carries all TreeGrid records. 
Please find the code example below: 
searchRowForId(id: number): number {     
       var treeObj = $('#TreeGridControl').ejTreeGrid("instance") 
       var dataRow = treeObj.model.updatedRecords; 
        let rowIdx = -1; 
        for (let i = 0; i < dataRow.length; ++i) { 
            if (dataRow[i].taskID === id) { 
                rowIdx = i; 
                break; 
            } 
        } 
        return rowIdx; 
    } 
If still issue exists at your end please revert us by modifying the sample based on your application. 
Please find the sample from below location 
 
Regards, 
Jone sherine P S 


Stephan Holl
Replied On August 16, 2017 08:34 AM

Hi,

the issue still exists. I modified the example. Please turn on the console output, I added some output where the issue occurs.

The use case: I press the button to load new data and want to select a sub-node.

Internally I search for the row index, then I try to expand the parent-nodes if necessary and then I select the node.


Attachment: SelectionRow1_8dcaea23.zip

Suriyaprasanth Ravikumar [Syncfusion]
Replied On August 17, 2017 08:32 AM

Hi Stephan, 
In TreeGrid “selectedRowIndex” and “dataSource” properties are two way bondable.  
When we update the value of “dataSource” and “selectedRowIndex” properties, it will be reflected in TreeGrid control asynchronously. 
So we can’t get updated record details in same method of data source update. When we refresh the data source “actionComplete” event will be triggered with argument “requestType” as “refreshDataSource”. 
We can achieve your requirement by using this event. We have prepared a sample and updated the selected row index value on data source update action. 
Please find the code snippet and sample location below.  
 
[TS] 
public selectRow: any; 
 
public constructor() { 
        this.datasource = dataSet1; 
        this.selectedRowIndex = 4; 
    } 
 
    public loadData(selectRow?: number) { 
       this.datasource = this.loadSomeData(); 
        this.selectRow = selectRow; 
    } 
 
    public loadSomeData() { 
 
        return dataSet2; 
    } 
     
    // Event trigger while changing datasource dynamically. 
    actionComplete(args) { 
        // code to done after the dynamic change of datasource. 
        if (args.requestType === 'refreshDataSource') { 
            if (this.selectRow != null) { 
                let rowIndex = this.searchRowForId(this.selectRow); 
                this.expandParentNodes(rowIndex); 
                const treeObj = $('#TreeGridControl').ejTreeGrid('instance'); 
                treeObj.model.selectedRowIndex = rowIndex; 
            } 
        } 
    } 
 
Thanks, 
 Suriyaprasanth R.

Stephan Holl
Replied On August 17, 2017 11:27 AM

Hi,

it works - thank you ....


Suriyaprasanth Ravikumar [Syncfusion]
Replied On August 18, 2017 01:52 AM

Hi Stephan,  
Thanks for the update. Please let us know if you need any other assistance.  
Regards,  
Suriyaprasanth R. 


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.

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.

;