Demo - TreeView with Context Menu

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>
    TreeView with Context Menu
  </h1>
  <p>
    The TreeView below has a custom context menu.
    Right-click the tree to see it:</p>

  <!-- this is the tree -->
  <div id="theTree"></div>
  
  <!-- this is the context menu -->
  <select id="theMenu" style="display:none">
    <option value="option1">Option 1</option>
    <option value="option2">Option 2</option>
    <option></option>
    <option value="option3">Option 3</option>
    <option value="option4">Option 4</option>
  </select>
</div>

CSS

/* context menu */
.wj-dropdown-panel.wj-listbox {
  padding: 6px 12px;
}

/* default trees on this sample */
.wj-treeview {
    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 context menu
	var ctxMenu = new wijmo.input.Menu('#theMenu', {
  	itemClicked: function(s, e) {
  		alert('thanks for selecting ' + s.selectedValue);
	  }
  })

	// create the tree
  var theTree = new wijmo.nav.TreeView('#theTree', {
  	itemsSource: getData(),
    displayMemberPath: 'header',
    childItemsPath: 'items'
	});
  
  // attach context menu to tree
  theTree.hostElement.addEventListener('contextmenu', function(e) {
  	e.preventDefault();
  	ctxMenu.show(e);
  });

	// create some data
	function getData() {
		return [
			{ header: 'Parent 1', items: [
				{ header: 'Child 1.1' },
        { header: 'Child 1.2' },
        { header: 'Child 1.3' }]
			},
      { header: 'Parent 2', items: [
      	{ header: 'Child 2.1' },
        { header: 'Child 2.2' }]
			},
      { header: 'Parent 3', items: [
      	{ header: 'Child 3.1' }]
			}
		];
	}
}