usky-oa
/
jnpf-web-datareport


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292
							<!doctype html>
<html xmlns="http://www.w3.org/1999/html">
<head>
  <meta charset='utf-8'>
  <title>Context Menu - Handsontable</title>

  <!--
  Loading Handsontable (full distribution that includes all dependencies apart from jQuery)
  -->
  <link data-jsfiddle="common" rel="stylesheet" media="screen" href="../dist/handsontable.css">
  <link data-jsfiddle="common" rel="stylesheet" media="screen" href="../dist/pikaday/pikaday.css">
  <script data-jsfiddle="common" src="../dist/pikaday/pikaday.js"></script>
  <script data-jsfiddle="common" src="../dist/moment/moment.js"></script>
  <script data-jsfiddle="common" src="../dist/zeroclipboard/ZeroClipboard.js"></script>
  <script data-jsfiddle="common" src="../dist/numbro/numbro.js"></script>
  <script data-jsfiddle="common" src="../dist/numbro/languages.js"></script>
  <script data-jsfiddle="common" src="../dist/handsontable.js"></script>

  <!--
  Loading demo dependencies. They are used here only to enhance the examples on this page
  -->
  <link data-jsfiddle="common" rel="stylesheet" media="screen" href="css/samples.css?20140331">
  <script src="js/samples.js"></script>
  <script src="js/highlight/highlight.pack.js"></script>
  <link rel="stylesheet" media="screen" href="js/highlight/styles/github.css">
  <link rel="stylesheet" href="css/font-awesome/css/font-awesome.min.css">

  <!--
  Facebook open graph. Don't copy this to your project :)
  -->
  <meta property="og:title" content="Context Menu">
  <meta property="og:description"
        content="This page shows how to use and configure right-click context menu with Handsontable">
  <meta property="og:url" content="http://handsontable.com/demo/contextmenu.html">
  <meta property="og:image" content="http://handsontable.com/demo/image/og-image.png">
  <meta property="og:image:type" content="image/png">
  <meta property="og:image:width" content="409">
  <meta property="og:image:height" content="164">
  <link rel="canonical" href="http://handsontable.com/demo/contextmenu.html">

  <!--
  Google Analytics for GitHub Page. Don't copy this to your project :)
  -->
  <script src="js/ga.js"></script>
</head>

<body>


<div class="wrapper">
<div class="wrapper-row">
<div id="global-menu-clone">
  <h1><a href="../index.html">Handsontable</a></h1>

</div>

<div id="container">
<div class="columnLayout">

<div class="rowLayout">
  <div class="descLayout">
    <div class="pad">
      <h2>Context Menu</h2>

      <p>This page shows how to use and configure right-click context menu with Handsontable:</p>

      <ul>
        <li><a href="#default">context menu with default options</a></li>
        <li><a href="#specific">context menu with specific options</a></li>
        <li><a href="#custom">context menu with fully custom configuration</a></li>
      </ul>
    </div>
  </div>
</div>

<div class="rowLayout">
  <div class="descLayout">
    <div class="pad" data-jsfiddle="example1">
      <a name="default"></a>

      <h2>Context Menu with default options</h2>

      <p>Tu run the basic configuration of the Context Menu, just set the contextMenu option to true.</p>

      <p>From version 0.11, context menu also works for row and column headers. When the context menu for the row
        header is opened, the column options are disabled. Likewise, when the context menu for the column header is opened,
        the row options are disabled</p>

      <div id="example1"></div>

      <p>
        <button name="dump" data-dump="#example1" data-instance="hot1" title="Prints current data source to Firebug/Chrome Dev Tools">Dump
          data to console
        </button>
      </p>
    </div>
  </div>

  <div class="codeLayout">
    <div class="pad">
      <div class="jsFiddle">
        <button class="jsFiddleLink" data-runfiddle="example1">Edit in jsFiddle</button>
      </div>

      <script data-jsfiddle="common">
        function getData() {
          return [
            ['', 'Kia', 'Nissan', 'Toyota', 'Honda'],
            ['2008', 10, 11, 12, 13],
            ['2009', 20, 11, 14, 13],
            ['2010', 30, 15, 12, 13]
          ];
        }
      </script>

      <script data-jsfiddle="example1">
        var example1 = document.getElementById('example1'),
          settings1,
          hot1;

        settings1 = {
          data: getData(),
          startRows: 5,
          startCols: 5,
          minRows: 5,
          minCols: 5,
          maxRows: 10,
          maxCols: 10,
          rowHeaders: true,
          colHeaders: true,
          minSpareRows: 1,
          contextMenu: true
        };
        hot1 = new Handsontable(example1, settings1);
      </script>
    </div>
  </div>
</div>

<div class="rowLayout">
  <div class="descLayout">
    <div class="pad" data-jsfiddle="example2">
      <a name="specific"></a>

      <h2>Context Menu with specific options</h2>

      <p>You can limit options available in the context menu using contextMenu option as an array of strings:</p>

      <ul>
        <li><b>row_above</b> (designed for <a href="contextmenu.html">Context Menu</a>)</li>
        <li><b>row_below</b> (designed for <a href="contextmenu.html">Context Menu</a>)</li>
        <li><b>hsep1</b></li>
        <li><b>col_left</b> (designed for both menus)</li>
        <li><b>col_right</b> (designed for both menus)</li>
        <li><b>hsep2</b></li>
        <li><b>remove_row</b> (designed for <a href="contextmenu.html">Context Menu</a>)</li>
        <li><b>remove_col</b> (designed for both menus)</li>
        <li><b>hsep3</b></li>
        <li><b>undo</b> (designed for <a href="contextmenu.html">Context Menu</a>)</li>
        <li><b>redo</b> (designed for <a href="contextmenu.html">Context Menu</a>)</li>
        <li><b>make_read_only</b> (designed for both menus)</li>
        <li><b>alignment</b>  (designed for both menus)</li>
        <li><b>clear_column</b> (designed for <a href="dropdownmenu.html">Dropdown Menu</a>)</li>
        <li><b>borders</b> (only with <a href="custom_borders.html">Custom Borders</a> turned on)</li>
        <li><b>commentsAddEdit</b>, <b>commentsRemove</b> (only with <a href="comments.html">Comments</a> turned on)</li>
        <li><b>freeze_column</b>, <b>unfreeze_column</b> (only with <a href="column_freeze.html">Column Freezing</a> turned on)</li>
      </ul>

      <div id="example2"></div>

      <p>
        <button name="dump" data-dump="#example2" data-instance="hot2" title="Prints current data source to Firebug/Chrome Dev Tools">Dump
          data to console
        </button>
      </p>
    </div>
  </div>

  <div class="codeLayout">
    <div class="pad">
      <div class="jsFiddle">
        <button class="jsFiddleLink" data-runfiddle="example2">Edit in jsFiddle</button>
      </div>

      <script data-jsfiddle="example2">
        var example2 = document.getElementById('example2');
        var settings2 = {
          data: getData(),
          startRows: 5,
          startCols: 5,
          rowHeaders: true,
          colHeaders: true,
          minSpareRows: 1,
          contextMenu: ['row_above', 'row_below', 'remove_row']
        };
        var hot2 = new Handsontable(example2, settings2);
      </script>
    </div>
  </div>
</div>

<div class="rowLayout">
  <div class="descLayout">
    <div class="pad" data-jsfiddle="example3">
      <a name="custom"></a>

      <h2>Context Menu with with fully custom configuration</h2>

      <p>For greatest configurability, you use contextMenu option as a configuration object as described in <a
          href="http://medialize.github.com/jQuery-contextMenu/docs.html">jQuery contextMenu documentation</a>.</p>

      <p>This example shows how to set <strong>custom text</strong>, how to <strong>disable</strong>
        "Remove row" and "Insert row above" for the first row and how to add your <strong>own option</strong>.</p>

      <div id="example3"></div>

      <p>
        <button name="dump" data-dump="#example3" data-instance="hot3" title="Prints current data source to Firebug/Chrome Dev Tools">Dump
          data to console
        </button>
      </p>
    </div>
  </div>

  <div class="codeLayout">
    <div class="pad">
      <div class="jsFiddle">
        <button class="jsFiddleLink" data-runfiddle="example3">Edit in jsFiddle</button>
      </div>

      <script data-jsfiddle="example3">
        var example3 = document.getElementById('example3');
        var settings3 = {
          data: getData(),
          startRows: 5,
          startCols: 5,
          rowHeaders: true,
          colHeaders: true,
          minSpareRows: 1
        };

        var hot3 = new Handsontable(example3,settings3);

        hot3.updateSettings({
          contextMenu: {
            callback: function (key, options) {
              if (key === 'about') {
                setTimeout(function () {
                  //timeout is used to make sure the menu collapsed before alert is shown
                  alert("This is a context menu with default and custom options mixed");
                }, 100);
              }
            },
            items: {
              "row_above": {
                disabled: function () {
                  //if first row, disable this option
                  return (hot3.getSelected() && hot3.getSelected()[0]===0)
                }
              },
              "row_below": {},
              "hsep1": "---------",
              "remove_row": {
                name: 'Remove this row, ok?',
                disabled: function () {
                  //if first row, disable this option
                  return  (hot3.getSelected() && hot3.getSelected()[0] === 0)
                }
              },
              "hsep2": "---------",
              "about": {name: 'About this menu'}
            }
          }
        })
      </script>
    </div>
  </div>
</div>

<div class="footer-text">
</div>
</div>

</div>

</div>
</div>

<div id="outside-links-wrapper"></div>

</body>
</html>