After change event problems

[gbssarma]

Hi

After changing the cell value i need to change the color for that cell and i need to repeat this for more than 10 cells.

But as of now this HandsOnTable is not supporting this feature.

Thanks
GBSSarma

[dittodhole]

handsontable is supporting this:

'afterChange': function (changes, source) {
    if (!changes) {
        return;
    }
    var instance = /* TODO for $handsontable-instance */;
    $.each(changes, function (index, element) {
        var change = element;
        var oldValue = change[2];
        var newValue = change[3];
        var rowIndex = change[0];
        var columnIndex = change[1];
        var cell = instance.getCell(rowIndex, columnIndex);
        var foreColor = /* TODO */;
        var backgroundColor = /* TODO */;
        cell.style.color = foreColor;
        cell.style.background = backgroundColor;
    });
}

[gbssarma]

I tried this one while debugging it is showing the color after that it is showing the previous color

[alvarotrigo]

I can not make it work: http://jsfiddle.net/8hv4z/13/

[dittodhole]

First "problem": your columnIndex does not start with 0, hence columnIndex more or less gives you just the pointer to your row-object (not the specific columnIndex).

Second problem:
jquery.handsontable.full.js line 8153ff

TD.className = '';
TD.removeAttribute('style');

The only hook afterwards is afterRender

[alvarotrigo]

I have started with columnIndex 0 and tried afterRender without success:
http://jsfiddle.net/8hv4z/14/

[dittodhole]

According to https://github.com/warpech/jquery-handsontable/wiki/Events the signature looks like this:

afterRender ()

Here's the workaround: http://jsfiddle.net/8hv4z/15/
Unfortunately this only changes the background- and foreColor of the last change...

But implementing a cache, as in http://jsfiddle.net/8hv4z/17/, makes changes "persistant"

[alvarotrigo]

Thanks @dittodhole. I have made an small modification in order to highlight only the cells if the new value is different than the old one:
http://jsfiddle.net/8hv4z/18/

Thanks again :)

[alvarotrigo]

Do you know if this could be possible using also on the previous version (Handsontable 0.8.23)?

I've noticed that afterRender is not available until version 9, and onBeforeChange was called onChange.

I am not yet using the last version because of a problem I found on the v.9.

[dittodhole]

Actually ...

According the events-docu

Events available since 0.8
onChange (changes: Array, source: String)

vs

Events available in 0.9
afterRender ()

but maybe the author knows how to implement the afterRender-event to 0.8

[papablopo]

i done in this way, thanks for share;

        afterChange: function (changes, data) {
                  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 () {
                    $.each(cellChanges, function (index, element) {
                        var cellChange = element;
                        var rowIndex = cellChange['rowIndex'];
                        var columnIndex = cellChange['columnIndex'];
                        var grilla = $('#grilla');
                         var td = grilla.handsontable('getCell', rowIndex, columnIndex );
                         td.className = 'pass'; 
                    });

i add
.handsontable .pass {
background: #ffc0ab;
}
at the handsontable css, and the cell is coloured inmediatily when u modify the value and not when modify another cel.

[ghost]

Here's a shorter version, based on papablopo's version above:
Create cellChanges global variable, available everywhere in code, before initializing handsontable:
var cellChanges = [];

Add this code in afterChange handler:
cellChanges.push({'rowid':change[0], 'colid':change[1]});

Add this code in afterRender handler:
$.each(cellChanges, function (index, el) {
$('#dataTable').handsontable('getCell', el['rowid'], el['colid']).className = 'changed';
});


Add this css in your stylesheet:
.changed { background-color:#ddfaef !important; }

[dittodhole]

@pieroweb just what i've implemented months ago :) http://jsfiddle.net/8hv4z/17/ (actually a bit buggy, but ... gives the glimpse of an idea)

[udaiarora]

@pieroweb @dittodhole This isn't working as expected after you sort. Any workarounds?

[dittodhole]

@udaiarora any (non)working fiddle to play around with? (and to show us some implementation and where exactly your problem resides...)

[udaiarora]

I was talking about your fiddle- http://jsfiddle.net/8hv4z/17/ If you sort after change you will see the bug. But that can be fixed using sortIndex. Thanks anyways

[AMBudnik]

I assume issue can be closed in lack of recent activity. If you would like to talk about your solutions here, we'll reopen the issue.