[REACT-194] V8 - some issues when moving column (arranging)

Tags: #<Tag:0x00007efc6d169110> #<Tag:0x00007efc6d168f58>
#1

Hi,

I just want to confirm if you also experience this:

  • when you move a column
  • it will not reflect the change, it stays as it is, the column did not move, but when I check the localstorage it was successfully moved - the hot_manualColumnMove in the localstroage`` [0, 1, 3, 2, 4, 5] … meaning the fourth column was indeed moved
  • now when I click on any column header, it will suddenly flash the changes, meaning the table would show the moved column (expected position [0, 1, 3, 2, 4, 5]) and then back to original position ([0, 1, 2, 3, 4, 5]). Back and forth every time I click another column header. Just like a one second flash

I just hope I was able to explain it clearly. Thanks!

#2

Hi @hugh

Can you attach a demo where we can reproduce the issue?
Please describe all the steps to do so.

#3

Hi @piotr.nowak,

Can you give me a base template for v8 beta 2 please? At least I have something to start with. Much better if using React wrapper.

Thanks!

#4

Here is a CDN links for 8.0.0-rev1 - https://cdn.jsdelivr.net/gh/handsontable/handsontable@5051859a956f409efcfdf435deb5db3ad33922f2/dist/handsontable.full.min.js
https://cdn.jsdelivr.net/gh/handsontable/handsontable@5051859a956f409efcfdf435deb5db3ad33922f2/dist/handsontable.full.min.css

And here is an npm for beta2 version of 8.0.0 - https://www.npmjs.com/package/handsontable/v/8.0.0-beta.2

#5

Hi @piotr.nowak,

Okay, here is the demo https://stackblitz.com/edit/mc-react-hot-demo

#6

Thanks @hugh

But I can’t reproduce your issue.

First of all, I can move the column.

25
Zrzut ekranu 2020-07-29 o 10.41.25.png913×206 38.2 KB

And when I refresh a page the column order is still appropriate.

#7

Hi @piotr.nowak,

Yes, in the localstorage, it reflects and saves all the moves, but the column itself inside the table does not. It just stays as is.

Hmmmm maybe we are not on the same page here. What I’m trying to achieve is also move the column header not only the data inside the column.

Imagine you have an Firstname and Email columns. If you plan to move Email in the first position and only the data of column is moved not including the Column Header, then inside Firstname column would be all the emails data.

#8

I used your demo - https://stackblitz.com/edit/mc-react-hot-demo
So we should be on the same page.

Are you can reproduce the issue on your demo?

#9

Hi @piotr.nowak, @aleksandra_budnik ,

I will try to explain it clearly.

I think the issue here that I’m trying to say is this:

For example, we have A, B, C, D, E, F, as our column headers. If we drag column E one step backward, the expected column positioning should be: A, B, C, E, D, F. That is what I want to happen. Coz based on the current demo that I created, after we drag column E one step backward, only the data of column E was moved, the position remained still: A, B, C, D, E, F, – only the data was moved. That is not what I want to happen.

What I want to happen is if I drag a column, I want also the column header name, in this case E, to be moved. Like I’ve said, expected output position should be: A, B, C, E, D, F – coz we moved E one step backward.

#10

Hi @piotr.nowak,

UPDATE: I Changed the demo, and used real column headers (not using letters from the generator) and data. I can confirm that it is now moving the way I expected.

Please recheck the demo. It’s now working. BUT, my problem now, is that it is working in the demo, but inside my real project it is not. Before using v8 beta 2, it was working on V7, but right now it won’t. After I move a column, it will just flicker or flash for 1 second and then revert original position. When I turn off the persistentState, it will work perfectly again. But if I turn on persistentState, the flicker would come back again and will not reposition as expected.

I cannot recreate this issue for I also don’t know what’s going on.

#11

Ok. I understand well right now.
Thanks for the explanation.

Unfortunately, we don’t have this feature in our moving functionality.
I would call it feature request. So I created an issue on our repo - https://github.com/handsontable/handsontable/issues/7156

#12

Hi @piotr.nowak,

Thanks for the quick response. By the way, have you checked my latest reply above, before your latest message?

Thank you!

#13

Yes, I checked your demo again and I still can’t recreate your issue.
It’s hard to say what you miss in your local project.

Maybe you could send zip your app to support@hmadsontable.com with the license key.

#14

Hello @piotr.nowak , @aleksandra_budnik

I have found the issue but I need your help how to solve this. https://stackblitz.com/edit/mc-react-hot-demo

Please check again the demo. The one causing the issue is the afterSelection where I change the fillHandle setting.

Thanks!

#15

Hi @piotr.nowak, @aleksandra_budnik,

Update to my reply above: the columns also flickers whenever I use hotInstance.render(), hotInstance.setDataAtCell, any events that uses the hotInstance (I assume). I think on V7, this was not happening.

I hope to hear some reply from you guys. Thanks!

#16

Hi Hugh.

Thank you for sharing the demo. Stackblitz had some issues (demo did not load at all) so I moved the code to JSFiddle https://jsfiddle.net/d01t4svw/ and here it works as it should you can autofill all the values besides cell 1,1.
I read the topic and saw that you had some flickering/flash effect. Could you share a video replication?

#17

HI @aleksandra_budnik,

Before I proceed, hmm, I noticed that you’re not using React for the JSFiddle demo. It is important to use React wrapper to replicate the issue. Since my project is using React. Let me check again with the stackblitz demo, why it is not loading on your side.

Thank you.

#18

Can you please check that one? Have you tried using other browsers? Thank you!

#19

Hi @aleksandra_budnik,

Just in case the demo still does not work, here is a video, sorry for the quality.

https://streamable.com/wtvi7m

#20

In the meanwhile, I also created a React example https://jsfiddle.net/L5hyxae6/2/
I’ve tested it on macbook air with Catalina 10.15.3 on Chrome 84, FF 78 na Safari 13.0.5 all seem to work fine.

When I try to open yours I get a blank demo without any errors

57
Zrzut ekranu 2020-08-4 o 09.08.57.png1113×525 84.5 KB

Could you use the same logic for JSFiddle (you can use my demo as a base)?