Expand a Handsontable into a modal to view more columnss?

Tags: #<Tag:0x00007f8b19fd4cf0>
#1

Background: I need to add a feature to this website that has a handsontable. Right now, the handsontable is being displayed in a very small section of the site. As more columns are being added, it is becoming more difficult to work on it. I would like to give the HOT a wider field of view by displaying it in a modal.

Problem: Is it possible to modify the same data source with two different handsontables? i.e. one in the modal and the other (the original one) thats on the website? For example, I’d like to either enter data into the original HOT, or expand it inside the modal to see more columns and continue working on it.

Thanks in advance!!

#2

Hey @downbigrain

here http://jsfiddle.net/handsoncode/p19nrhjr/1/ I have an example where there are two table and one is in a window. Let me know if you need anything more.

#3

hey @aleksandra_budnik

thank you for providing that super quick response! It gave me ideas on how to achieve what I want!

#4

Great! I keep my fingers crossed for the progress :slight_smile:

#5

hi @aleksandra_budnik

Thanks for your help!

Based on your example, figured out how to keep both handsontables synchronised. Here it is:

var wind = document.querySelector('.wind');
var
example = document.querySelector('.example1'),
example2 = document.querySelector('.example2'),
hot = new Handsontable(example, {
data: Handsontable.helper.createSpreadsheetData(5, 5),
colHeaders: true,
renderer: 'html'
});

hot2 = new Handsontable(example2, {
data: hot.getData(),
colHeaders: true,
renderer: 'html'
});

document.querySelector('.show').addEventListener('click', function(){
dupData = hot.getData()
console.log(dupData)
hot2.updateSettings({data:dupData})
wind.style.visibility = 'visible'
});

document.querySelector('.hide').addEventListener('click', function(){
dupData = hot2.getData()
hot.updateSettings({data: dupData})
wind.style.visibility = 'hidden'
})
#6

Hi @aleksandra_budnik

There’s a slight problem when i implemented the solution.

If I use {data: getData()} from one HOT1 into HOT2 (which is inside a modal), HOT2 displays the data from HOT1 along with its column and row headers. So now I’ll see the column and row headers for both HOT 1 and 2.

May I know if its possible to use getData() without including the column and row headers?

#7

Sure. Here’s an example https://jsfiddle.net/wzyrjqah/

#8

Hi @aleksandra_budnik

I realised that it was a CSS issue (i.e. HOT does not render properly if the width was defined in % rather than px.

I guess this issue can be closed. The expanded HOT in the modal works perfectly now. Thanks for your help as always!!

#9

I’m happy to hear that :slight_smile:

Have a nice day!

#10