1. Home
  2. Forum
  3. Angular - EJ 2
  4. SelectedNodes

SelectedNodes

Hi Team,
I am working with treeview and i am reloading tree view nodes with api call from database. Once i reload them "selectedNodes" property does not work. I want to keep the selected node same even after the treeview reload completes.

import { Component, ViewChild } from '@angular/core';
import { TreeViewComponent } from '@syncfusion/ej2-angular-navigations';

@Component({
selector: 'my-app',
template: `
`,
})
export class AppComponent {
@ViewChild('tree', { static: true })
public tree: TreeViewComponent;
constructor() {}
public countries: Object[] = [
{ id: 1, name: 'Australia', hasChild: true, expanded: true },
{ id: 2, pid: 1, name: 'New South Wales', isSelected: true },
{ id: 3, pid: 1, name: 'Victoria' },
{ id: 4, pid: 1, name: 'South Australia' },
{ id: 6, pid: 1, name: 'Western Australia', isSelected: true },
{ id: 7, name: 'Brazil', hasChild: true },
{ id: 8, pid: 7, name: 'Paraná' },
{ id: 9, pid: 7, name: 'Ceará' },
{ id: 10, pid: 7, name: 'Acre' },
{ id: 11, name: 'China', hasChild: true },
{ id: 12, pid: 11, name: 'Guangzhou' },
{ id: 13, pid: 11, name: 'Shanghai' },
{ id: 14, pid: 11, name: 'Beijing' },
{ id: 15, pid: 11, name: 'Shantou' },
{ id: 16, name: 'France', hasChild: true },
{ id: 17, pid: 16, name: 'Pays de la Loire' },
{ id: 18, pid: 16, name: 'Aquitaine' },
{ id: 19, pid: 16, name: 'Brittany' },
{ id: 20, pid: 16, name: 'Lorraine' },
{ id: 21, name: 'India', hasChild: true },
{ id: 22, pid: 21, name: 'Assam' },
{ id: 23, pid: 21, name: 'Bihar' },
{ id: 24, pid: 21, name: 'Tamil Nadu' },
{ id: 25, pid: 21, name: 'Punjab' },
];
public field: Object = {
dataSource: this.countries,
id: 'id',
parentID: 'pid',
text: 'name',
hasChildren: 'id',
expanded: 'id',
selected: 'isSelected',
};
public enablePersistence: boolean = true;
public allowMultiSelection: boolean = false;
selectNode() {
this.tree.fields.enablePersistence = false;
this.countries = [
{ id: 1, name: 'Australia', hasChild: true, expanded: true },
{ id: 2, pid: 1, name: 'New South Wales' },
{ id: 3, pid: 1, name: 'Victoria' },
{ id: 4, pid: 1, name: 'South Australia' },
];

this.tree.fields.dataSource = this.countries;
this.tree.selectedNodes = ['3'];
this.tree.refresh;
}
}




1 Reply
IL Indhumathy Loganathan Syncfusion Team February 10, 2022 04:04 PM UTC

Hi Akshay, 
 
Greetings from Syncfusion support. 
 
From the explanation, we understood that you wanted to maintain the selection of nodes after updating the TreeView datasource. You can achieve this just by mapping the selected field property in the updated datasource. Check the below code snippet. 
 
  //Updating the TreeView datasource. 
  public click(): void { 
    this.countries = [ 
      { id: 1, name: 'Australia', hasChild: true, expanded: true }, 
      { id: 2, pid: 1, name: 'New South Wales', isSelected: true }, 
      { id: 3, pid: 1, name: 'Victoria' }, 
      { id: 4, pid: 1, name: 'South Australia' }, 
    ]; 
    this.treeObj.fields = { 
      dataSource: this.countries, 
      id: 'id', 
      parentID: 'pid', 
      text: 'name', 
      hasChildren: 'hasChild', 
      expanded: 'id', 
      selected: 'isSelected', 
    }; 
  } 
 
 
 
Kindly check whether the shared sample meets your requirements. If it is not, replicate the exact issue you have been facing in the shared sample. It would be helpful for us to provide a prompt solution. Please let us know if you need any further assistance. 
 
Regards, 
Indhumathy L 


Loader.
Up arrow icon