Handsontable: Updating renderers after removing row

Question

I am trying to implement Handsontable into our reporting system. Ive done everything i wanted except one thing. I am highlighting error cell using renderers (simply by setting red color on background). However when i remove row by context menu->remove row, all renderers remain on their x-y positions. I'd like them to follow their rows instead.

$container.handsontable({
        data: data,
        rowHeaders: true,
        colHeaders: true,
        minSpareRows: 1,
        contextMenu: true,
        stretchH: 'all',
        comments: true,
        cells: function(row, col, prop) {
            var cellProperties = {};
            {foreach $excelError as $error}
                    if (row === {$error['row']} && col === {$error['col']}) {
                        cellProperties.renderer = {$error['renderer']};
                        cellProperties.comment = {$error['desc']};
                    }
            {/foreach}

            if (row === 0) {
                cellProperties.renderer = firstRowRenderer;
            }
            return cellProperties;
        }
    });

Despite variable name $error it also contents correct row data which just pain cells with white color. The errorRenderer function looks like this (white one is similar to this one)

var errorRenderer = function(instance, td, row, col, prop, value, cellProperties) {
       Handsontable.renderers.TextRenderer.apply(this, arguments);
       $(td).css({
                background: 'red',
                color: "white",
                fontWeight: "bold"
       });
 };

Any idea how to fix that? I'd be fine even just with catch of that remove row event as i can call ajax and rerender cells again.

Thank you for any ideas.

EDIT:

Fixed solution:

    var cellsProp = new Array();
    {foreach $excelError as $error}
    cellsProp[{$error['row']}] = new Array();
    cellsProp[{$error['row']}][{$error['col']}] = {$error['renderer']|noescape};
    {/foreach}

    var removing = false;

    $container.handsontable({
        data: data,
        rowHeaders: true,
        colHeaders: true,
        minSpareRows: 1,
        contextMenu: true,
        stretchH: 'all',
        comments: true,
        cells: function(row, col, prop) {
            var cellProperties = {};

            if (typeof cellsProp[row] != "undefined") {
                cellProperties.renderer = cellsProp[row][col];
            }

            if (row === 0) {
                cellProperties.renderer = firstRowRenderer;
            }
            return cellProperties;
        }, 
        beforeRemoveRow: function(index, amount) {
            if (removing == false) {
                for (x = index; x < cellsProp.length; x++) {
                    cellsProp[x] = cellsProp[x+1];
                }
            }
            removing = true;
        },
        afterRemoveRow: function(index, amount) {
            removing = false;
        }
    });

Two things. One, why not just use the native validation functions and supply it your own? this way it colors correctly. Second, after you delete a row, could you try this for me? Make another change and hit enter. Did the color fix itself? — ZekeDroid
It has to be user friendly. Thats why i use the context menu. And i am not that skilled in JS to make it on my own which is also reason why i use handsontable. I am a backend programmer. If you have idea how to override original function to make it works i am listening. Anyway i tried what you wanted and its still wrong. — Tomáš Neumaier
Oh I didn't mean get rid of the context menu, I meant that you could simply add the validator function to each column and you're done. Look at handsontable.com/demo/validation.html. Here you see how to apply a custom validator which will add the red as you describe and work well with the context menu when you delete the row — ZekeDroid
Well, customer uploads his (huge) csv file into system. Then he press the evaluation button which will call ajax and return x-y pos of incorrect cells. The idea is that he/she should fix incorrect value or delete whole row. Columns are not independent and value in column A may (or may not) be dependent on value in column B. And there are hunders of rows. I can see your point doing all this stuff via JS & Ajax however it wont be possible. It wouldnt work. Thats why i do whole evaluation process in backend via PHP. Some larger reports may take tens seconds to be evaluated even in PHP. — Tomáš Neumaier
Fair enough. If that's the case then you're correct in using the renderer. I'm still not understanding the issue because here's how rendering and the context menu work: when you render something, it calls this function. Initially it looks like it sets colors correctly. After you remove the row, it should trigger the 'afterChange' event which would call renderers again. At this point, that row no longer exists so it should not be getting called at all, right? — ZekeDroid

ZekeDroid ZekeDroid · Accepted Answer · 2015-04-06T18:02:32

The error is in the PHP. When a row is deleted, your PHP still thinks that a specific row index is in error. If you could you provide a function that would remove a row from your PHP, we can create a function beforeRemoveRow which triggers after a row is removed.

In here we can call your PHP function and give it the row index to remove. Your program should now work.

The function would look like this, and would be added to the list of options on your hot definition:

beforeRemoveRow: function(index, amount) {
    phpFunctionRemoveRow(index);
}

EDIT:

With this logic of hard-coded coordinates, removing a row would always give you the behavior of turning (x,y) red. This is what was meant by having an "error" in your php. It means that since you receive the coordinates with errors from PHP, you can't expect the hardcoded index values to change.

Something still doesn't make sense. If you have no interaction with PHP after render (you don't call it after render), and you say that PHP is correct, then does this mean you're never going to be modifying your table? What if someone makes a change and you have to re-validate your table?

If, however, you are capable of doing this, then what I would do is the following:

After a change to the table, call your php function to revalidate. This will change that errors array you have in php but because the cells option is static, you won't see changes. At that point, you'd use:

hotInstance.updateSettings({ cells: getCellsAgain() });

In that function, getCellsAgain(), you'd call your php code again to tell you the new indeces. That's the best you'll get without doing the validation on the JS side.

Handsontable: Updating renderers after removing row

1 Answers