Cells deform when we edit them. Filter also deforms

Tags: #<Tag:0x00007efc64511f50>
#1

Hi @aleksandra_budnik!

I’ve attached a few screenshots to show how the cells deform when we edit them. Also, while using the filter, I need to click twice if I have to check or uncheck any item, click on select or deselect all or click on OK or Cancel buttons.

P.S.:

  1. Follow the screenshots according to the screenshot numbers.
  2. These problem are occuring on handsontable-pro.

Screenshot 1: Cells distort when we edit them.
Screenshot 2 and Screenshot 3: Click twice to check and uncheck.
Screenshot 4: This happens when when I open filter.
Screenshot 5: This happens on the first click when I try to uncheck a checkbox inside the filter.
Screenshot 6: The checkbox was unchecked on second click

Screenshot 1:

Screenshot 1.png785×179 6.84 KB

Screenshot 2:

Screenshot 3:

Screenshot 4:

Screenshot 5:

Screenshot 5.png728×420 17.1 KB

Screenshot 6:

Screenshot 6.png632×536 25.6 KB

#2

Hi @rishabhbhs

it looks like the additional CSS styling (or frameworks) may conflict with the CSS provided by Handsontable.
Can you loads it to the JSFiddle and share?

#3

Hi @aleksandra_budnik!

I managed to fix the above issues. Thanks!

How many times and on what conditions is "hot…updateSettings()’ function called?

I’m facing many issues due to that.

#4

the updateSettings() is called each time you change settings. It is a very important method. What issues do you experience?

#5

In updateSettings(), I have written a few if conditions to check which cell has to marked readOnly and which cell shouldn’t be marked readOnly. In thar process, 2 new objects with null data get added to my object.

Also, when i try to change:

hot.updateSettings({
     cells: function(row, col) {
         // my logic
     }
});

to

hot.updateSettings({
    cells: function() {
        // my logic
    }
});

Then it makes all the cells readOnly.

Please tell me the reason for both of them, if possible.

#6

Hi @rishabhbhs

I would need to get a full code sample. The following description is not enough. However before posting you can check if you erase the read only state.

If(your condition) {
make cell readOnly
} else {
readOnly: false
}

#7

Hi @aleksandra_budnik!

No! I’m not doing that.

#8

You mean sharing the code or useing else? Is the issue still unsolved?

#9

Now I have different issues.

When I was having the issues earlier, I logged the values in updateSettings() and found that when the function tried to access values which do not exist, the function used to break. Then I put a check there and things started working, i.e., I was able to check and uncheck the checkboxes.

But, I started encountering other issues after that: When I add 3-4 rows, I was unable to check and uncheck the row at 9th index (if the last row was on 11th index).

#10

Why does updateSettings() method calls the same (row, col) pair again and again?

#11

Hi @rishabhbhs

updateSettings method runs each time you change a cell so it may go in an infinite loop really easy. I would need to check your code to tell you more. Can you share a demo?

#12

I’ll try to share the demo as soon as possible. I’m severely packed with my deadlines.

#13

Please take your time if needed. I’d be here to help.

#14

While I was writing a fiddle for you, I ran into an issue where 2 handsontables were created for the same div element. And checking on 1 row would result in checking another row in the second table. The reason was because both the tables were loading the data from the same data structure. And something similar was happening in my application as well. I understood that if I destroy the HOT before rendering it again, it might solve my problem. And it did. destroy function was only needed.

But I still have one problem. When we add new rows, extra null rows automatically get added. I had to check for it and remove it after every change. Can you suggest something?

#15

Great to hear that!

I guess that I would need a demo for this action as well. The only thing that comes to my mind is this issue https://github.com/handsontable/handsontable/issues/3937
It happens when you use filtring plugin and minSpareRows.

#16

I don’t think it is the issue.
Because I have other things on my plate, i’ll take a deeper look at it later.

Meanwhile, please explain the reason for the following scenario:

Scenario: I have an array which serves as the data for the HOT. I add 2 more objects to it and call the render function. The changes are reflected when I log that array. But, the changes are not reflected on the UI.

#17

And also, how does render function work?
Does it refreshes the data bonded to it?

I’m using the render function in the aforementioned scenario.

#18

The renderer refreshes all the cells in the table, not only a cell that has been changed. [quote=“rishabhbhs, post:16, topic:2202”]
Scenario: I have an array which serves as the data for the HOT. I add 2 more objects to it and call the render function. The changes are reflected when I log that array. But, the changes are not reflected in the UI.
[/quote]

It looks like you need to use the loadData() method on the array that holds the data. Even if you already referred to it at the initialization.

#19

Okay. Thanks!

Doesn’t HOT refreshes data automatically or on render function?

#20

It refreshes the data inside the table but if the referenced object changes you need to call loadData()