usky-oa
/
jnpf-web-datareport


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130
							<!doctype html>
<html xmlns="http://www.w3.org/1999/html">
<head>
  <meta charset='utf-8'>
  <title>Comments - 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="Comments">
  <meta property="og:description"
        content="This page shows how to use cell comments in 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/comments.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" data-jsfiddle="example1">
      <a name="default"></a>

      <h2>Comments</h2>

      <p>With option <code>comments: true</code>, you can add and remove cell comments through the context menu.</p>

      <p>To initialize Handsontable with predefined comments, provide <code>comment</code> cell property:
        <code>{row: 1, col: 1, comment: {value: "Test comment"}}</code></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="example1">
        var container = document.getElementById('example1'),
          hot1;

        hot1 = Handsontable(container, {
          height: 200,
          data: Handsontable.helper.createSpreadsheetData(50, 50),
          rowHeaders: true,
          colHeaders: true,
          minSpareRows: 1,
          contextMenu: true,
          comments: true,
          cell: [
            {row: 1, col: 1, comment: {value: 'HOT1 Test comment'}},
            {row: 2, col: 2, comment: {value: 'HOT1 Sample'}},
            {row: 12, col: 2, comment: {value: 'HOT1 Another comment'}},
            {row: 2, col: 22, comment: {value: 'HOT1 Super important comment'}},
            {row: 15, col: 15, comment: {value: 'HOT1 15 x 15 position'}}
          ]
        });
      </script>
    </div>
  </div>


</div>

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

</div>

</div>
</div>

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

</body>
</html>