KB - Wijmo 5 - Change TreeView Data Source JavaScript

by Joel Parks

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.grapecity.com/wijmo/5.latest/styles/wijmo.min.css">
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.nav.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.input.min.js"></script>
<div class="container">
    
  <h1>Changing TreeView Data Source</h1>

  <div id="theTree"></div>
  <div id="theCombo"></div>
</div>

CSS

/* default trees on this sample */
.wj-treeview {
    display:block;
    //height: 350px;
    font-size: 120%;
    margin-bottom: 8px;
    padding: 6px;
    background: #f0f0f0;
    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}
body {
  margin-bottom: 24pt;
}

JavaScript

onload = function() {

	// create the tree
  var tree = new wijmo.nav.TreeView('#theTree', {
  	itemsSource: getElectronics(),
		displayMemberPath: 'header',
    childItemsPath: 'items',
	});
  
  var combobox = new wijmo.input.ComboBox('#theCombo', {
    textChanged: function(s, e) {
    	if(s.text == 'Cars') {
      	tree.itemsSource = getCars();
      } else if(s.text == 'Electronics') {
      	tree.itemsSource = getElectronics();
      } else {
      	tree.itemsSource = getCountries();
      }
    },
    itemsSource: getCatagories()
	});
  
  function getCatagories() {
  	return ['Electronics', 'Cars', 'Countries'];
  }
  
  // get the tree data
  function getElectronics() {
		return [
    	{ header: 'Electronics', items: [
				{ header: 'Trimmers/Shavers' },
        { header: 'Tablets' },
        { header: 'Phones', items: [
					{ header: 'Apple' },
          { header: 'Motorola' },
          { header: 'Nokia' },
          { header: 'Samsung' }]
				},
        { header: 'Speakers' },
        { header: 'Monitors' }]
			}
		];
	}
  
  function getCars() {
    return [{
      header: 'Cars', items: [
        { header: 'Ford' },
        {
          header: 'Toyota', items: [
            { header: 'Camry' },
            { header: 'Corolla' },
            { header: 'Tundra' },
          ]
        },
        { header: 'Kia' },
        { header: 'Fiat' },
        { header: 'Volkswagen'}
      ]
    }];
  }
  
  function getCountries() {
    return [{
      header: 'Countries', items: [
        { header: 'Japan' },
        { header: 'Germany' },
        {
          header: 'US', items: [
            { header: 'New York' },
            { header: 'Seattle' },
            { header: 'Pittsburgh' },
          ]
        },
        { header: 'China' },
        { header: 'India'}
      ]
    }];
  }
}