Tying changes made in handsontable to another value in the same row in handsontable

Question

I am using handsontable to facilitate changes to a large table, through a web browser. the catch is that the changes need to be tied to a unique ID, like a primary ID in case of RDBMS. for the data in question/example/code, custId is as good as a primary key or unique identifier.

How do i tie the changes: values in the array changes: to the custId..?

It looks like i am trying to call a function on hot5, even as hot5 is being rendered. [looks improbable, and is possibly the root cause] which is why getchangedPin2 returns null, which brings me to the second part pf the question is there a different way to achieve this..?

$(document).ready(function () {
  container = document.getElementById('example');
  hot5 = new Handsontable(container, {
    data: request,
 dataSchema: {custID: null, areaCode: null, pinNo: null, importantStatus: null, subAreaCode: null},
    colHeaders:  ['custID', 'areaCode', 'pinNo', 'importantStatus', 'subAreaCode'],
    columns: [

      { data: 'custID'},
      { data: 'areaCode'},
      { data: 'pinNo'},
      { data: 'importantStatus'},
      { data: 'subAreaCode'}
   
     ],

  afterChange: function (changes, source) {
     if (source=== 'loadData') {
         return;
     }
     showValInConsole(changes);
     console.log("the changes "+ getchangedpinNo2(changes[0],'custID'));
   },
    columnSorting: true,
    minSpareRows: 1
  });
  
    var showValInConsole = function(changes){
     var rowIndex = changes[0];
     var col = changes[1];
     var oldCellValue = changes[2];
     var newCellValue = changes[3];
     var row_ref = getchangedPin2(changes[0],'custID');

         
     console.log(rowIndex + " " + col + " "+ oldCellValue + " "+ newCellValue + " " +getchangedPin2(rowIndex,'custID') );
  };
  
  var getchangedPin2 = function(row, col){
   var urnChanged2 = hot5.getDataAtRowProp(row, col);
   return urnChanged2;
  }; 
  
  });

<link href="http://handsontable.com//bower_components/handsontable/dist/handsontable.full.min.css" rel="stylesheet"/>
<script src="http://handsontable.com//bower_components/handsontable/dist/handsontable.full.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>Test1</title>
<meta charset="ISO-8859-1">
    
    <script src="js/handsontable.full.js"></script>
    <script type="text/javascript" src="js/test.js"></script>
    <script src="js/jquery-1.11.3.min.js"></script>
    <link rel="stylesheet" media="screen" href="css/handsontable.full.css">
</head>
<body>
 <div id="hoTable"></div>
<input id="SubmitButton" type="button" value="Submit" />

</body>
</html>

Note : unable to add handsontable.full.min.css and handsontable.full.js

Could you be a little more clear? Not sure what you're asking. Also, `changes` is an array of changes so to get the row it would be `changes[0][0]`, just fyi — ZekeDroid, Aug 14 '15 at 17:25
Hi, I have edited the js part of the snippet to add a " columnSorting: true," above the "minSpareRows: 1" statement. I also admit that changes is an array of change arrays, and each change array, contains the row index, column name, old value and the new value. now with the above change in the js code, i.e. columnSorting: true, the user will be able to sort the columns [ which is a requirement ] but now, after the user sorts a column, the change array will give a row index value which will not match the pre-sorted tables. — Rony, Aug 18 '15 at 07:33
I am trying to associate the changes made to a particular custID, match/link/associate to the same custID even after the column has been sorted, which is what i have been trying to achieve by using the function getchangedPin2, i cant seem to be able to get it to work. — Rony, Aug 18 '15 at 07:33

score 0 · Accepted Answer · edited May 23 '17 at 12:15

This SO question has an answer which explains your situation. In summary, you can read the documentation here to understand the sorting plugin used by Handsontable. It makes use of what they call logicalIndex since the data array is never mutated; instead, they keep a second data structure with references to physicalIndex-es.

It all boils down to the following line of code:

physicalIndex = instance.sortIndex[logicalIndex][0];

Where your instance should be the Handson instance, and logicalIndex should be your changes[0][0].

Tying changes made in handsontable to another value in the same row in handsontable

1 Answers1