Handsontable gets the updated entire column except the edit cell after editing

Question

I have a Handsontable as follows:

 ordertable = new Handsontable(container, { data: data, colHeaders: ['Customer', 'Mode', 'Remarks', 'Due', 'Recieved'], columns: [{ data: 2, readOnly: true }, { data: 6, type: 'autocomplete', source: collectionmethod, validator: collectionmethod_validations, strict: true }, { data: 5, readOnly: false }, { data: 4, readOnly: true, type: 'numeric', format: '0.00' }, { data: 3, type: 'numeric', format: '0.00', validator: amt_validations, allowInvalid: true }], minSpareRows: 0, rowHeaders: true, contextMenu: ['row_above', 'row_below', 'remove_row', 'undo', 'redo'], colWidths: [150, 100, rest, 100, 100], autoWrapRow: true, autoWrapCol: true, beforeRemoveRow: removerow_validation }); 

I have a checkbox. And when I click the checkbox, the Due value (4th column) should be filled in the “Received” (column). If I clear it, then Received should be empty, which is similar to loading a table.

I do the following:

 $("#sel_prefill").click(function() { if ($("#sel_prefill:checked").val()) { var g = $('.htCore').find('tbody tr td:nth-child(5)'); //Due var f = $('.htCore').find('tbody tr td:nth-child(6)') // Recieved g.each(function(i, v) { f.eq(i).text(g.eq(i).text()); $(v).css({ 'text-align': 'right' }); }); } else { var g = $('.htCore').find('tbody tr td:nth-child(5)'); //Due var f = $('.htCore').find('tbody tr td:nth-child(6)') // Recieved g.each(function(i, v) { f.eq(i).text(""); //$container.handsontable('setDataAtCell', 1, 4, 5); $(v).css({ 'text-align': 'right' }); }); } }); 

It works great.

But the problem is that after checking the checbox, the value of column 4 is filled up to the 5th. But if I edit any cell from 5th column, then the entire column except editted cell gets refreshed and 5th column becomes blank. .

How can I avoid this.

Please view photos for step-by-step details:

How can I avoid updating cells after editing?

Answer 1

The problem arose because I needed to update the data array as soon as I changed the value of the string to another. When I change the content, it only changes on the screen. While I am editing the cell, it calls the rendering function, and it takes the old data array, so it shows the column with no value.

Here is my solution:

In if:

 g.each(function(i, v) { f.eq(i).text(g.eq(i).text()); data[i][3] = g.eq(i).text(); //Need to update the array also }); 

Otherwise:

 g.each(function(i, v) { f.eq(i).text(""); data[i][3] = ""; //Need to update the array also });