Change Data Source of TreeView in Angular

Background:

You may need to allow users to load different sets of data into a TreeView. This sample will cover how to change the data source of a TreeView through using a drop down control.

Steps to Complete:

1. Create a drop down control containing the list of data sets that users can select to display and tie it to an event

2. Inside of the event, assign the TreeView’s itemsSource property to the selected data set

Getting Started:

Create a drop down control containing the list of data sets that users can select to display and tie it to an event

First, we’ll need a control that will allow users to select which data set they’ll display. For this, we’ll use Wijmo’s AutoComplete control, supply it with a list of data set names and tie an event to the control.

<wj-combo-box #treeCombo [itemsSource]="cv" (textChanged)="updateTreeView()"></wj-combo-box>

The textChanged event will get fired whenever a user changes the selection in the AutoComplete control.

Inside of the event, assign the TreeView’s itemsSource property to the selected data set

Inside of the textChanged event, we’re going to then change the itemsSource of the TreeView based on the selected value of the AutoComplete control. In the sample we have 3 sets of data (cars, countries and electronics). We’ll compare the strings of the selected value to determine which of our 3 data sets we push onto the TreeView.

updateTreeView() {
  if(this.treeCombo.text == 'Cars') {
    this.treeView.itemsSource = this.carsData;
  } else if (this.treeCombo.text == 'Electronics') {
    this.treeView.itemsSource = this.electronicsData;
  } else {
    this.treeView.itemsSource = this.countriesData;
  }
}

The TreeView control will automatically update when the itemsSource is changed, so there is no need to refresh the control through code.

You can find a live sample of this project at this location: https://stackblitz.com/edit/wijmo-knowledgebase-angular-treeview-change-data-source