Calculation is not working with custom Cell Rendering with AJAX in Handsontable

Question

In my table(Handsontable) I have four columns Cars, A, B and C. Data for Cars and A columns are loaded from MySQL database. (like PHP Demo).

Data of Column B is populated from MySQL database via AJAX depending on the value of Cars. The code is as follows:

{type: { renderer : function (instance, TD, row, col, prop, value, cellProperties) {
                Handsontable.TextCell.renderer.apply(this, arguments);
                var cr,prc;
                cr = instance.getDataAtCell(row, 0);
                prc = instance.getDataAtCell(row, 1);
                $.ajax({
                    url: "php/act-go-t.php",
                    data: {cars: cr, price: prc}, 
                    dataType: 'json',
                    type: 'POST',
                    success: function (res) {
                        if (res.result[0].tax === null) {
                            TD.innerHTML = '0.000';
                            }
                            else {
                            TD.innerHTML = res.result[0].tax;
                            }
                        },
                        error: function () {
                        TD.innerHTML = '0.000';
                        }
                    });                 
                }}}

The C column is the SUM of A and B and the code is:

{type : { renderer : function (instance, TD, row, col, prop, value, cellProperties) {
                    Handsontable.TextCell.renderer.apply(this, arguments);
                    var a,b;
                    a = instance.getDataAtCell(row, 1);
                    b = instance.getDataAtCell(row, 2);                     
                    TD.innerHTML = +a + +b;
                }}}

The problem is although the value is loaded in B but the addition is not working. If I set the type of B column to numeric({type: numeric}) except the AJAX, the addition is working fine.

Result with AJAX:

+----------+------+-------+--------------+
| Cars     |   A  |    B  |            C | 
+----------+------+-------+--------------+
| Nissan   |   20 |    10 |          20  |  
| Honda    |    5 |     6 |           5  |    
+----------+------+-------+--------------+

Result without AJAX:

+----------+------+-------+-------------+
| Cars     |   A  |    B  |           C |
+----------+------+-------+-------------+
| Nissan   |   20 |    10 |         30  |  
| Honda    |    5 |     6 |          11 |    -
+----------+------+-------+-------------+

Can anybody please tell me if I am missing something?

Soubarna Das Soubarna Das · Accepted Answer · 2016-11-07T07:27:11

In your case TD.innerHTML = res.result[0].tax; is only for displaying data, however it not inserts data into datamap.

You may try to set a id for that cell and get the value of that by jquery and summing them up. So the codes will look something like that:

{type: { renderer : function (instance, TD, row, col, prop, value, cellProperties) {

                var cr,prc;
                cr = instance.getDataAtCell(row, 0);
                prc = instance.getDataAtCell(row, 1);
                $.ajax({
                    url: "php/act-go-t.php",
                    data: {cars: cr, price: prc}, 
                    dataType: 'json',
                    type: 'POST',
                    success: function (res) {
                        if (res.result[0].tax === null) {
                            TD.innerHTML = '0.000';                                
                            }
                            else {
                            TD.innerHTML = res.result[0].tax;                                
                            }
                        },
                        error: function () {
                        TD.innerHTML = '0.000';                            
                        }
                    });  
                arguments[5] = TD.innerHTML;
                TD.id = row+'_'+col;
                Handsontable.TextCell.renderer.apply(this, arguments);

                }}}

And

{type : { renderer : function (instance, TD, row, col, prop, value, cellProperties) {
                    Handsontable.TextCell.renderer.apply(this, arguments);
                    var a,b;
                    a = $('#'+row+'_1').text();
                    b = $('#'+row+'_2').text();                     
                    TD.innerHTML = +a + +b;
                }}}

Calculation is not working with custom Cell Rendering with AJAX in Handsontable

1 Answers