user7119409 user7119409 - 1 month ago 19
Javascript Question

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

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?

Answer

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) {
                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';
                            TD.id = row+'_'+col;
                            }
                            else {
                            TD.innerHTML = res.result[0].tax;
                            TD.id = row+'_'+col;
                            }
                        },
                        error: function () {
                        TD.innerHTML = '0.000';
                        TD.id = row+'_'+col;
                        }
                    });                 
                }}}

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;
                }}}