Manual Column Move and updating Nested Headers

Tags: #<Tag:0x00007efc6dbbd3c8>
#1

Hello,
What we want to achieve is to let the users move the columns with the headers as well.
And in the process we encountered an issue with max call stack exceed.

here is the example: http://jsfiddle.net/Resems/7zjzg5pd/8/

How to repro

  • move any columns anywhere (even multiple times)
  • reinit the table (we saved the headers and the position so next time when the table will reinit it will maintain the same look and feel)
  • move any column anywhere (it stops and breaks)

And in the console log we get max stack exceeded.

Is there any way to avoid this problem ?

Thank you.

[help needed] How to move the column with its header
#2

Hi @martin

Currently you are able to move columns with their headers, like here: http://jsfiddle.net/handsoncode/aaooasLo/ Headers do not move with data only if you have colHeaders set to true (no custom headers) like here http://jsfiddle.net/handsoncode/b1bumcto/

Can you tell me more about the desired behavior? Also I can see nestedHeaders option involved but there are no more headers levels than one.

#3

Hello, our use case it is directly related to nested headers.

The initial example setup would be (we allow the creation of tables with decomposed values) :

image.png1184×803 66.1 KB

What we would like to achieve is to let the user move any column header anywhere,the end result if we move the Column AD as first column

image.png1198×820 66.4 KB

as you see the example is working, but after reinitialising the table it goes into an infinite loop.

Thank you.

#4

I can setup a jsfiddle example with the described examples above if needed.

#5

Hi @martin

Thank you for the screens - I see what you would like to achieve.

What I did to test it is I took your demo http://jsfiddle.net/Resems/7zjzg5pd/8/ and changed headers variable from a single array to an array of arrays to get nested headers. But as I can see there’s a lot to do. Please take a look.

(here’s the mentioned demo http://jsfiddle.net/handsoncode/x95v48py/)

Basically nestedHeaders is a new feature and we have some tasks to accomplish as well - to make it more flexible when it comes to moving. In our current behavior (source: http://jsfiddle.net/handsoncode/p78boyp5/) we move only data inside the table while headers are stable.

Presented feature will be definitely something great, without any doubts, however, will present structure it will be hard to even create a working workaround.

#6

Alexandra hey, i have updated the jsfiddle as well,
here is the link, i have created a working version of what we would like to achieve.

http://jsfiddle.net/Resems/7zjzg5pd/9/

here you can see that it is working perfectly before you reinit the table, as soon as you reinit the table and move columns it goes through max call stack size :frowning:

so for now there is no way to avoid it ?

Thanks !

#7

Hi @martin

This demo is great! Have you tried to use updateSettings to reset values instead of destroying the instance? I think that I saw an issue related to destroy method.

#8

Hey @aleksandra_budnik,
Unfortunately in specific cases we have to reinitialize the entire plugin.

Thanks, we will continue our search :slight_smile:

#9

I have shown your demo to our devs and they all said that this is amazing. We would be more than happy to see a similar solution in the official version of Handsontable.

ps. I have tested it more and when you move the country column inside Channel you get something like that

still, I am very impressed and I keep my fingers crossed for progress and I’ll appreciate any news on this subject.

#10

Hello @aleksandra_budnik, yes that is a desired behavior as column headers C D E F G belong to Entity(Parent) Channel and Sign Date and Country are separate Entities.

So whenever you move, the table always shows the relation between Parent - Child :slight_smile:

#11

Ohh I see. This actually makes sense and it’s even cooler that you have created a fully functional feature.I become really curious about your implementation of Handsontable. Is there any possibility to see it online?

#12

@aleksandra_budnik sure, we also though, if you guys would like, we could arrange a demo.
Please write us an email so we can arrange it or you can visit our product, datapine.com

Back to the topic.
We have fixed the issue we are currently having with nested headers.
The problem we found is the way the plugin works, with predefined arranged columns manual movement.
If the plugin has a predefined sorted columns order when initializing, on each updateSettings it tries to move the columns by the initial order even tho we move the columns in a different order.
The solution for now is to initialize/re-initialize with no order, and set the column mapper to our previous saved positions on the plugin initialize.
Then handsontable behaves correctly.

Here is a full working example: http://jsfiddle.net/Resems/7zjzg5pd/10 .
But now we have a different issue, in the provided example above, the beforeInit is never called.
As far as looking into the code and plugin itself, it rewrites the callback and never calls it.
Is there any way to fix this ?

Thank you.

1 Like
#13

Hi @martin

sorry for a delay. I see that my last message wasn’t sent.

Please check this topic https://github.com/handsontable/handsontable/issues/3819 beforeInit is a specific callback that cannot be called inside the table initialization settings.

#14

@aleksandra_budnik thank you.

#15