[HandsOnTable] Discussion

[HandsOnTable] Discussion

  
Forge Component
(13)
Published on 2012-06-01 by J.
13 votes
Published on 2012-06-01 by J.
Hi,

I have created an example espace to use this HandsOnTable jquery excel-like editable grid.
Inside a small working example (at least for IE9, Chrome 19 and FF 12) of how it should work.

I have created a simple way with hidden-input-value to be able to submit the changed data to the server.
It's up to you how to handle it from there on.
It's a nice start if you have need for these kind of grids.
Joost Landgraf wrote:
Hi,

I have created an example espace to use this HandsOnTable jquery excel-like editable grid.
Inside a small working example (at least for IE9, Chrome 19 and FF 12) of how it should work.

I have created a simple way with hidden-input-value to be able to submit the changed data to the server.
It's up to you how to handle it from there on.
It's a nice start if you have need for these kind of grids.
 
 This looks awesome!
There is an issue with the component if you are using the javastack (apparently the id's are generated with : instead of _)
I will post a fix soon
Joost,

This is awesome, thank you very much for sharing.  I am new to the platform and we are just setting up our architecture.  One of gaps I was concerned about was the lack of a good "grid control", this cetainly removes that gap.  thanks again.
Hey,

I was searching the forums to achieve this just using the Platform and stumbled into this forge discussion, and it's exacly what i needed!
From the example looks awesome, i just noticed a small detail, when submiting the changes to server with a fresh typed cell (Typed in a number and still haven't hit enter or moved to another cell in order to update) the change will not occur.

Thanks :)
 
Hi All, 
         Shouldn't the names of web-blocks HoTAutocomplete and HoTAutoexpand be HoTAutoexpand and HoTAutocomplete respectively as right now HoTAutoexpand has Typeahead javascript function and HoTAutocomplete has autoResize function ? Thanks.

Regards
Statler & Waldorf wrote:
Hi,

I have created an example espace to use this HandsOnTable jquery excel-like editable grid.
Inside a small working example (at least for IE9, Chrome 19 and FF 12) of how it should work.

I have created a simple way with hidden-input-value to be able to submit the changed data to the server.
It's up to you how to handle it from there on.
It's a nice start if you have need for these kind of grids.
 Nice job..what version of handsontable is this using ? 
 
kota wrote:
Statler & Waldorf wrote:
Hi,

I have created an example espace to use this HandsOnTable jquery excel-like editable grid.
Inside a small working example (at least for IE9, Chrome 19 and FF 12) of how it should work.

I have created a simple way with hidden-input-value to be able to submit the changed data to the server.
It's up to you how to handle it from there on.
It's a nice start if you have need for these kind of grids.
 Nice job..what version of handsontable is this using ? 
 
 
 uhmm, same question for me.
JC Elorde wrote:
kota wrote:
Statler & Waldorf wrote:
Hi,

I have created an example espace to use this HandsOnTable jquery excel-like editable grid.
Inside a small working example (at least for IE9, Chrome 19 and FF 12) of how it should work.

I have created a simple way with hidden-input-value to be able to submit the changed data to the server.
It's up to you how to handle it from there on.
It's a nice start if you have need for these kind of grids.
 Nice job..what version of handsontable is this using ? 
 
 
 uhmm, same question for me.
 Original version was using Handsontable 0.9.6, it would be better to use a later version as this version had some bugs and they have been fixed in newer version . I am using 0.10.2 in my project. 
 
Hi Kota,

I am trying to figure out how to patch the OML using the new version of handsontable. I hope you can guide me through the configuration.

Here's what I did:

1. Downloaded this component and published it in the server (personal cloud).

2. Downloaded the Handsontable 0.10.5 (latest stable version) zip file.

3. Applied the codes from jquery.handsontable.full CSS and JS (root/dist folder of the extracted zip file) to the  HandsOnTableStuff webblock's CSS and JS respectively.

4. Downloaded the jQuery 1.11.1 JS and applied it to the jQueryMin webblock JS.

5. Published the eSpace again.

With those steps above, the table is not showing anymore. Please let me know what did I miss.

Thanks!
Finally figured it out. It just so happened that the rows and cols attributes of the handsontable has been deprecated. I just updated it to startRows and startCols and it worked fine.

Expression Value in the HandsOnTable web block:

<script>
  $(""#cont_" + hiddenInputId +""").handsontable({
    startRows: " + initialNumRows + ",
    startCols: " + initialNumCols + ",
    ...

Hi guys

Do you have an updated version of the component using the new version of Handsontable, that you can post?
The component hasn't been updated since 2012.

Thanks!
It is worth mentioning here that to get this component working, you have to set the "onclick" property on the "Save" button. If this is not done, the hiddenJSON variable is never set and the contents of the table is not stored.
So check out how it is set up in the demo project, then set it up in your own.
It took us a long time to find this property...

Hi all,

I have a situation where lots of data entry needs to happen, most goes through upload of specifically formatted excel sheets (not your standard colums header and rows of data). Next to excel upload the same specifically formatted excel sheets need to be able to be keyed in back-office style by adnministrtaive personell or through a portal by representatives of data uploading organisations. There are some 20+ different formats in which the data comes in. As it is grid style data entry where every row can have cells different from previous rows, and not rows in a table oriented data entry, I was looking at this HandsOnTable.

In my use-case, I need to be able to control cells in the HandsOnTable, like:
  • disable cells
  • fill cells with prefilled texts
  • drop down boxes with values from tables we have
  • calculate formulas
  • set colors
  • preformat the table grid for the user so they can key in data in the fields and the table checks / validates and calculates formulas.
I would prefer to create 20 preformatted table grids (store them somewhere) on one page over creating 20 custom made pages, as the formats change over time, new ones are added etc.and client won't be able to do the page changes themselves.

In the HandsOnTable examples they give you can do all those controls over the cells and the table in JavaScript, I am not sure how I can control individual cells for example in the sample application that I saw.

What I need to do for my use-case, would HandsOnTable be a good solution and how would I control from OutSystems what happens in my HandsOnTable?

Any help / direction is fully appreciated.

Saludos,

Wilko