Demo - Context Menus

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.input.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.chart.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.grid.min.js"></script>
<div class="container">

  <h1>
    Context Menus
  </h1>
  <p>
    You can use the Menu control to create context menus.</p>
  <p>
    For example, this fiddle creates a single context menu and
    handles the 'contextmenu' event on several elements to show
    the menu when the user requests it:</p>

  <div class="owners">
    <div id="FIRST" class="has-ctx-menu" style="background:#f0a0a0">
      I have a Context Menu.
    </div>
    <div id="SECOND" class="has-ctx-menu" style="background:#a0f0a0">
      I have the same Context Menu.
    </div>
    <div id="THIRD" class="has-ctx-menu" style="background:#a0a0f0">
      You guessed it, me too.
    </div>
  </div>

  <p>
    The same approach works with all Wijmo controls:</p>

  <h3>
    FlexChart with ContextMenu
  </h3>
  <div id="theChart" class="has-ctx-menu"></div>

  <h3>
    FlexGrid with ContextMenu
  </h3>
  <div id="theGrid" class="has-ctx-menu"></div>

</div>

CSS

.owners:after {
  content: "";
  clear: both;
  display: block;
}
.owners > div {
  float: left;
  margin: 20px;
  padding: 20px;
}
.wj-flexgrid {
  max-height: 250px;
}
.wj-flexchart {
  max-height: 250px;
}

.ctx-menu {
  padding: 3px;
  min-width: 120px;
  background: #FFFBDD;
  overflow: hidden;
}

.ctx-menu .wj-listbox-item {
  text-align: center;
  margin: 6px;
}

body {
  margin-bottom: 24pt;
}

JavaScript

onload = function() {

  // create the menu
  var div = document.createElement('div');
  var menu = new wijmo.input.Menu(div, {
    displayMemberPath: 'header',
    selectedValuePath: 'cmd',
    dropDownCssClass: 'ctx-menu',
    itemsSource: [
    	{ header: '<span class="glyphicon glyphicon-asterisk"></span>&nbsp;&nbsp;New', cmd: 'NEW' }, 
      { header: '<span class="glyphicon glyphicon-folder-open"></span>&nbsp;&nbsp;Open', cmd: 'OPEN' }, 
      { header: '<span class="glyphicon glyphicon-floppy-disk"></span>&nbsp;&nbsp;Save', cmd: 'SAVE' },
      { header: '<span class="wj-separator"></span>' }, 
      { header: '<span class="glyphicon glyphicon-remove"></span>&nbsp;&nbsp;Exit', cmd: 'EXIT' },
		],
    itemClicked: function(s, e) {
      alert('Executing **' + menu.selectedValue + '** for element **' + menu.owner.id + '**');
    }
  });

  // use it as a context menu for one or more elements
  var els = document.querySelectorAll('.has-ctx-menu');
  for (var i = 0; i < els.length; i++) {
    els[i].addEventListener('contextmenu', function(e) {
      menu.owner = wijmo.closest(e.target, '.has-ctx-menu');
      if (menu.owner) {
	      e.preventDefault();
	      menu.show(e);
      }
    }, true);
  }
  
  // create FlexChart and FlexGrid
  var theChart = new wijmo.chart.FlexChart('#theChart', {
  	itemsSource: getData(),
    bindingX: 'country',
    series: [
    	 { binding: 'sales', name: 'Sales' },
       { binding: 'expenses', name: 'Expenses' },
    ]
  });
  var theGrid = new wijmo.grid.FlexGrid('#theGrid', {
  	itemsSource: getData()
  });

  // create some random data
  function getData() {
    var countries = 'US,Germany,UK,Japan,Italy,Greece'.split(','),
      data = [];
    for (var i = 0; i < countries.length; i++) {
      data.push({
        id: i,
        country: countries[i % countries.length],
        sales: Math.random() * 100000,
        expenses: Math.random() * 50000
      });
    }
    return data;
  }
}