FieldtypeHandsontable: Excel-like Inputfield

[Juergen]

Yep, that was the problem! Now it works....

5 minutes ago, bernhard said:

be advised that the update has a breaking change and you need to rewrite your javascript field settings after the update. the module is still alpha and more of those changes are still likely to come...

I only use it for testing purposes at the moment..... so this is not a problem.

Thanks for your quick help and response!!

[adrianromega]

Hello

Interesting module, lots of possibilities, thank you for this.

Just to let you know, there is a problem in file InputfieldHandsontable.module, line   <?= $this->getCode() ?> should be inside jquery function scope or it won't work (hot is undefined).

[bernhard]

thanks @adrianromega

thats the breaking change i was talking about here: 

 

[Robin S]

Hi @bernhard,

This module's inputfield is not initialising when AJAX-loaded. So when inputfield visibility is set to "Open when populated + Closed when blank + Load only when opened (AJAX)", and inside AJAX-loaded repeater items.

[bernhard]

On 30.9.2017 at 4:04 AM, Robin S said:

Hi @bernhard,

This module's inputfield is not initialising when AJAX-loaded. So when inputfield visibility is set to "Open when populated + Closed when blank + Load only when opened (AJAX)", and inside AJAX-loaded repeater items.

just pushed an update to support ajax fields and also fields inside repeaters

[Robin S]

Hi @bernhard,

Do you think it would be possible to support merged cells in FieldtypeHandsontable? Merging cells is a feature in Handonstable, but the merged status (i.e. colspan/rowspan) is lost when the field is saved and reloaded. I guess there would also need to be some way of determining if a cell is merged when getting it via the API.

[bernhard]

hmmm... good question.

i guess at the current setup this would not be so easy. maybe it would be better to change how the data is stored. it would be nice to let the storage know in wich column the data lives, for example. then it would be possible to move/change a table's setup after data has already been stored.

but if you find a quick solution i'm happy to accept a pr on this

[Robin S]

Looking around, it seems that getting/saving/loading the table metadata like merged cells and comments is not well supported/documented in Handsontable. And I think the merge cells plugin is undergoing an overhaul currently. There are a few hacky examples out there and when I get around to it I'll see what I can come up with and report back. But for my current project I have decided to go with a different solution for tables (tables in CKEditor plus some jQuery manipulation is proving adequate... barely ).

[bernhard]

would be nice to hear some details about your usecase and why you need merged cells

[Robin S]

9 minutes ago, bernhard said:

would be nice to hear some details about your usecase and why you need merged cells

I'm adapting a printed manual to an online document, and need to recreate tables like this:

 

[bernhard]

2 ideas:

1. do you need INPUT in those tables? otherwise datatables would maybe be a better fit: https://datatables.net/examples/basic_init/complex_header.html
   there is also my datatables module that makes it very easy to create those kind of tables.
    
2. nested headers is a PRO feature of datatables: https://docs.handsontable.com/pro/1.4.0/demo-nested-headers.html
   have you been talking about this feature?

[Juergen]

Hi @bernhard

I want to make the colheaders multilingual. Is ther a way to achive this in simple way or is it necessary to change the default textarea into a multilingual textarea?

Best regards

[bernhard]

you need to use pw's built in translation tools on the server side and send the array to your client (js):

// some php file loaded in the backend
$config->js('colheadersformyhandsonfield', [
  'col1' => __('First column'),
  'col2' => __('Second column'),
];

then you can assign them in the js:

$(document).on('afterInit.rht', '.handsontable', function(e, hot) {
  var colheaders = ProcessWire.config.colheadersformyhandsonfield;
  hot.updateSettings({
    colHeaders: colheaders,
    minCols: colheaders.length,
    maxCols: colheaders.length,
  });
});

 

[Juergen]

Thanks for the quick response. I have tried this before but it doesnt seem to work. This was because I had a writing mistake in my code. Now it works

 

 

[bernhard]

hi donald,

the module is not intended to be used on the frontend. though it is not that hard to do it...

example home.php

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
		<title><?php echo $page->title; ?></title>

    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/handsontable/0.34.5/handsontable.full.min.css" />
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/handsontable/0.34.5/handsontable.full.min.js" />
	</head>
	<body>
		<h1><?php echo $page->title; ?></h1>
		<?php if($page->editable()) echo "<p><a href='$page->editURL'>Edit</a></p>"; ?>

    <?php
    bd($page->cars);
    ?>
	
    <div id="example"></div>
    <script type="text/javascript">
    var container = document.getElementById('example');
    var hot = new Handsontable(container, {
      data: <?= json_encode($page->cars->data) ?>,
      rowHeaders: false,
      colHeaders: <?= json_encode($page->cars->colHeaders) ?>,
    });
    </script>

	</body>
</html>

the field config for the backend:

$(document).on('afterInit.rht', '.handsontable', function(e, hot) {
  var colheaders = ['Volvo', 'Audi', 'BMW'];
  hot.updateSettings({
    colHeaders: colheaders,
    minCols: colheaders.length,
    maxCols: colheaders.length,
    maxRows: 1,
    minRows: 1,
    rowHeaders: false,
  });
});

 

16 hours ago, Donald said:

3. Their also exists the older module of matrix field. At least to me it seems both modules (matrix field and handsontable) do quite the same. What are the advantages/disadvantages of both? Mostly I just want to output excel like tables in the frontend with an easy backend control.

i don't know any technical details of the other module. i built this module to have a quick and easy way to INPUT some table data and be able to copy&paste from excel. for me the benefits of this module compared to the matrix field is the look&feel. it's more compact and more excel-like, so it's easier to grasp for my clients.

but the field has some major limitations you have to keep in mind. for example changing inputfield config after some data already has been stored would lead in data destruction. its also not possible to use this data in selectors. and multilang values are not supported. thats no problem as long as you have only have numbers as data because you can translate column headers (see above example).

[dragan]

Any idea why this all of a sudden stops working?

My config:

var colheaders = ['service', 'remarks', 'days', 'day_rate', 'total'];
hot.updateSettings({
  colHeaders: colheaders,
  minCols: colheaders.length,
  maxCols: colheaders.length,
  rowHeaders: false,
  minRows: 1,
  copyPaste: true,
  autoWrapRowBoolean: true,
  autoWrapColBoolean: true,
  wordWrap: true,
  minSpareRows: 1,
  maxSpareRows: 1,
  dropdownMenu: true,
  columns: [
    {},
    {},
    {},
    {},
    {},
]
});

In my browser console, I see Uncaught ReferenceError: hot is not defined. The CSS + JS is loaded.

in page-edit mode, I only see the field label and: "Please save this page to be able to change this content". No matter how many times I save, the JS error persists and nothing is shown (inline styles set to display: none - even when overriding it, I just see a blank textarea).

[bernhard]

25 minutes ago, dragan said:

Any idea why this all of a sudden stops working?

I guess "all of a sudden" means "after upgrading to the latest version" ?

[dragan]

Ay, that was it. Changed it to 

$(document).on('afterInit.rht', '.handsontable', function(e, hot) {

etc. and it all works as before ?

[flydev]

@bernhard  Could it be possible to update the module's lib dependencies to the latest version 6.2.2 ?

[bernhard]

Hi @flydev

Funny thing, I haven't  used this module for a while, but started using/needing it again yesterday. I saw that there is lots of room for improvement, but unfortunately I have some tough deadlines and can't work on it at the moment. I've just pushed an update with v6.2.2 of handsontable - it seems to work so far. Please report back if you encounter any problems.

[flydev]

Tested during two dev hours this morning, no problem so far ?

Thanks you dude.

[bernhard]

The folks at Handsontable have just released a new version 7.0.0: https://handsontable.com/blog/articles/2019/3/handsontable-7.0.0-is-here

Unfortunately a single dev licence is 790$ so we either have to stay at 6.2.2 or watch out for another library... Does anyone of you know a proper alternative?

[kongondo]

https://jspreadsheets.com/ lead me to this: jQuery.sheet/WickedGrid > https://spreadsheets.github.io/WickedGrid/ but I am not sure it is still in development...

[bernhard]

I've also found this site but didn't find anything that attracted me...

I think it might make sense to rebuild RockGrid to RockTabulator and use http://tabulator.info/docs/4.0/clipboard instead of Handsontable... Any thoughts?

[Beluga]

Latest docs: http://tabulator.info/docs/4.2/clipboard