Handsontable: setDataAtCell on the trigger of an event

Question

I am new to handsontable library of Javascript and hence apologize if the question seems too basic.

What I am trying to do is that if someone writes /changes the data written in the first row of the table, the value in the cell at column 5 and row 5 should be set to "changed". I know that to set a value I would need to use hot.setDataAtCell(5,5,"changed"). What I don't know is how to trigger this command i.e. I need to find a way to identify when any cell in the first row of a column has been changed. I have tried overriding the afterChange callback, but the code keeps on hanging.

Answer 1

This should solve your problem,

Example:

 var cellChanges = [];

$(document).ready(function () {
    var myData = [{
        0: 'aaaaaaaaaaaaa',
        1: 'bbbbbbbbb',
        2: 'ccccccc'
    }, {
        0: 'aaaa',
        1: 'b',
        2: 'bbbb'
    }, {
        0: 'aaaa',
        1: 'x',
        2: 'bbbb'
    }, {
        0: 'aaaa',
        1: 'w',
        2: 'bbbb'
    }, ];

    $("#editOrders").handsontable({
        data: myData,

        autoWrapRow: true,
        minSpareRows: true,
        columnSorting: true,
        fillHandle: false,
        currentRowClassName: 'currentRow',
        colHeaders: ["demo", "demo", "demo"],
        afterChange: function (changes, source) {
            if (!changes) {
                return;
            }
            $.each(changes, function (index, element) {
                var change = element;
                var rowIndex = change[0];
                var columnIndex = change[1];

                var oldValue = change[2];
                var newValue = change[3];

                var cellChange = {
                    'rowIndex': rowIndex,
                    'columnIndex': columnIndex
                };

                if(oldValue != newValue){
                    cellChanges.push(cellChange);
                }
            });
        },
        afterRender: function () {
            var instance = $('#editOrders').handsontable('getInstance');
            $.each(cellChanges, function (index, element) {
                var cellChange = element;
                var rowIndex = cellChange['rowIndex'];
                var columnIndex = cellChange['columnIndex'];
                var cell = instance.getCell(rowIndex, columnIndex);
                var foreColor = '#000';
                var backgroundColor = '#ff00dd';
                cell.style.color = foreColor;
                cell.style.background = backgroundColor;
            });
        },
        columns: [{
            //LINE
            data: 0
        }, {
            //LINE
            data: 1
        }, {
            //LINE
            data: 2
        },

        ]
    });

});

and here is the link to jsfiddle;
http://jsfiddle.net/8hv4z/18/