Select 2 Option HandsonTable

Merging Select 2 Option Drop Down and HandsonTable

by Gurunath Thakur

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: '+'}, {id: 2, text: '-'}, {id: 3, text: '*'}, {id: 4, text: '/'}];
$(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'
          }
		 },
         {
            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)
{
    debugger;
    if(arguments[0][0][3] == "" ||arguments[0][0][3] == 'null')
   		continue;
    switch (optionsList[parseInt(arguments[0][0][3] -1)].text) {
    case "+":
        arithAns =parseInt(number1) +  parseInt(num2);
       console.log("Addition"+arithAns); $('#example_handsontable').handsontable('setDataAtCell', arguments[0][0][0], colNo, arithAns)
        break; 
    case "-":
        arithAns =parseInt(number1) -  parseInt(num2);
 ...