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

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 checkbox the value of Due(4th column) should be populated to the 'Recieved'(column). If I uncheck it then the Received should be blank which is same as table onload.

What I do is as follows:

$("#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 is working fine.

But the problem is that after checking checbox the value the value of 4the column is populated to 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 it.

Please refer the pics for step by step details:

How can I avoid refresh the cells after editing?

@madalin ivascu ok buddy. So what should I need to change to? What is your suggestion? Can you elaborate and post as an answer? it will be so helpful. — Santhucool, Feb 22 '16 at 11:08
@ madalin ivascu that is just case of code improvement. I dont think it will do Because after editting it is not calling that function at all. It call some handsontable built in function. I need to modify it such a way that it should handle my issue. — Santhucool, Feb 22 '16 at 11:13
Is that all the code related with your issue? The problem you described seems to be more related with "change" event rather than "click" and you've posted only code related with click event. — Ruben Marrero, Mar 02 '16 at 05:20
@ 127.0.0.1 whether it is a click or change it is simply a a radio button that is stand alone. Only dependency with `handsontable` is defined inside the function that you can refer from question. — Santhucool, Mar 02 '16 at 05:52

score 0 · Answer 1 · answered Mar 10 '16 at 05:57

The problem occurred because I need to update the data array once I have changed the row value to another. When I change the content it only change on Screen. While when I edit the cell it will call the render function and it will take the old data array that is why it is showing the column without 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
        });

In else:

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

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

1 Answers1