Handsontable custom renderer nulls in data

Tags: #<Tag:0x00007efc7290cae8>
#1

Hello guys.

I’m working on a project including handsontable. I’m trying to achieve SUM of 2 coulmns as shown in the picture.

Screenshot_1.png753×313 5.2 KB

Currently i’m doing this with a custom column renderer, something that looks like this:
Screenshot_2.png1040×782 91.9 KB

As you can see on the first picture this works good, BUT if i try to access the data from the handsontable table later in the script, the calculated column is always null, shown in the picture below:
Screenshot_3.png942×293 6.7 KB

Thanks in advance, and sorry for any inconveniences.

#2

Have you tried formulas?

Here’s an example http://jsfiddle.net/handsoncode/ka4ked5y/

#3

First of all thank you for your fast reply.
The problem with formulas is they are initialized at the data declaration.
My data is an empty array of arrays, [[]], and i need the table to be filled dynamically.
So, as the user fills in data, one of the columns should do a SUM on some of the values entered in it’s row.

#4

OK. Let’s check some options here.

If you get the data from a database maybe it will be better to handle the SUM on the back-end (just store it as well). The case is when we use a renderer it doesn’t add a value to the cell. It only ‘makes it appear’. That’s why when you edit the cell the value of 7 is not there in the editor and it doesn’t load by calling getData and getSourceData.

You would need to use setDataAtCell but in the renderer it creates an infinite loop and setDataAtCell calls renderer again.

The main issue is that you have to add this value on the table initialization (haven’t we?) but we are also blocked by the fact that the values are loaded on the initialization.

That is s tough case @filip I will check if there’s anything else that can be done.

Can you let me know when you need to call the getData? Do you need to get the data after initialization or for some option/hook that is called while table is initialized but not yet loaded?

#5

I need to get the data after all fields are filled and the calculations are done.

The end goal is to create a excel-like table that can be filled in, with dynamic calculations on some of the fields(they change depending on the user entrance).

#6

So, did you try to use the typical setDataAtCell?

After the table is initialized with the Quantity and Unit price columns call the setDataAtCell for Extended Price column and check if it works as expected. Theoretically, it should work fast and surely will return 7 in the getData method.

#7

I managed to create a functional grid at least, so thank you for your time and i appreciate your help!

#8

You’re welcome @filip
feel free to ask me anything.

#9