Jump to content

FieldtypeHandsontable: Excel-like Inputfield

bernhard

By bernhard,
in Modules/Plugins

 Share

Recommended Posts

Juergen Hero Member

Juergen

Posted
Posted

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!!

  • Like 1
Link to comment
Share on other sites
bernhard Hero Member

bernhard

Posted
  • Author
Posted
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

  • Like 2
Link to comment
Share on other sites
Robin S Hero Member

Robin S

Posted
Posted

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.

Link to comment
Share on other sites
bernhard Hero Member

bernhard

Posted
  • Author
Posted

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 :)

Link to comment
Share on other sites
Robin S Hero Member

Robin S

Posted
Posted

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 :)).

  • Like 1
Link to comment
Share on other sites
bernhard Hero Member

bernhard

Posted
  • Author
Posted

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?
Link to comment
Share on other sites
  • 3 weeks later...
bernhard Hero Member

bernhard

Posted
  • Author
Posted

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,
  });
});

 

  • Thanks 2
Link to comment
Share on other sites
bernhard Hero Member

bernhard

Posted
  • Author
Posted

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>

59f99a9192ab0_2017-11-0110_57_27-ProgramManager.png.760fb13ae049da425fae38b427e1bd34.png

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).

  • Like 2
Link to comment
Share on other sites
  • 9 months later...
dragan Hero Member

dragan

Posted
Posted

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).

Link to comment
Share on other sites
  • 4 months later...
bernhard Hero Member

bernhard

Posted
  • Author
Posted

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.

  • Thanks 1
Link to comment
Share on other sites
  • 2 months later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...