Select 2 Option HandsonTable

Merging Select 2 Option Drop Down and HandsonTable

by Sagar Bendale

HTML

<div id="example_handsontable" class="handsontable"></div>
Selected Id: <span id="selectedId"></span>

CSS

</style><!-- Ugly Hack due to jsFiddle issue: http: //goo.gl/BUfGZ -->
<script src="https://code.jquery.com/jquery-1.8.3.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2.css" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/handsontable/0.12.4/handsontable.full.js"></script> <link rel="stylesheet" media="screen" href="https://cdnjs.cloudflare.com/ajax/libs/handsontable/0.12.4/handsontable.full.css"> <link rel="stylesheet" media="screen" href="http://handsontable.com/demo/css/samples.css"> <style type="text/css"> body {
  background: white;
  margin: 20px;
}

h2 {
  margin: 20px 0;
}

JavaScript

//12.4 Handson table version

var optionsList = [{
  id: 1,
  text: '+',
  pair: 'x'
}, {
  id: 2,
  text: '-',
  pair: 'y'
}, {
  id: 3,
  text: '*',
  pair: 'z'
}, {
  id: 4,
  text: '/',
  pair: 'w'
},{
  id: 5,
  text: '/',
  pair: 's'
}];
$(document).ready(function() {

  var columnsHeaders = ['Number 1', 'Number 2', 'Operator', 'Ans'];
  var columnsList = [{

      type: 'numeric'
    }, {

      type: 'numeric'
    }, {
      editor: 'select2',
      renderer: customDropdownRenderer,
      width: '200px',
      select2Options: {
        data: optionsList,
        dropdownAutoWidth: true,
        width: 'resolve',
        createSearchChoice: function(term, data) {
          if (data.length === 0) {
            return {
              id:term, text: term
            };
          }
        }
      }
    }, {
      type: 'numeric',
      readOnly: true
    }],

    $container = $('#example_handsontable');
  var config = {
    minSpareRows: 0,
    colHeaders: columnsHeaders,
    contextMenu: true,
    columns: columnsList
  }
  hooks = Handsontable.hooks.getRegistered();
  var arithAns;
  hooks.forEach(function(hook) {
    if (hook == 'afterChange') {
      config[hook] = function(event) {
        var changedCellData = JSON.stringify(arguments);
        var str = "";
        if (arguments[0] != null)
          for (var i = 0; i < arguments[0].length; i++) {
            var colNo = columnsHeaders.indexOf('Ans');
            var colNoDropDown = columnsHeaders.indexOf('Operator');

            var number1 = $('#example_handsontable').handsontable('getDataAtCell', 0, 0);
            var num2 = $('#example_handsontable').handsontable('getDataAtCell', 0, 1);

            if (arguments[0][0][1] == colNoDropDown) {
              if (arguments[0][0][3] == "" || arguments[0][0][3] == 'null')
                continue;
              $('#example_handsontable').handsontable('setDataAtCell', arguments[0][0][0], colNo, $('#selectedId').text());
$('#selectedId').text('')

      ...