Form Popup for Edit

Tags: #<Tag:0x00007efc6b4ea570>

I was wondering if there was any pre-built functionality where editing or inserting data would launch a modal popup window or something for the user to type the data in. Another work around would be to load a table with the headers and 1 row, and rotate it sideways or something so the column headers are basically the first row, and the 2nd row is the edit\insert data.

Hi @mmoles
Sure, you can lauch a window whenever you want, you just need to pick the best callback.

For inserting a new row it would be beforeCreateRow and when user want to edit a cell you should pick beforeChange.

That

Another work around would be to load a table with the headers and 1 row, and rotate it sideways or something so the column headers are basically the first row, and the 2nd row is the edit\insert data.

sounds pretty amazing but it is too complicated for me to understand :slight_smile: I guess that we will be able to find an easier way to create what you want.

Basically I want an edit button like how they do it for DataTables - https://editor.datatables.net/examples/simple/simple.html

I am stuck making my own then since I need to us the handsontable library because of the awesome job they did on filtering, it does exactly want I need it to do. I am just lazy\efficient in hopes to not have to write code that hundreds of other people have probably written already.

Hm… We did not have an example like this but I was curious on how to do it pretty fast and here’s the result: http://jsfiddle.net/handsoncode/n98Lsbwq/

The code needs some smooth retouches as I’m sure there’s an excess code however it does the same job as the DataTables

Let me know if it works for you.

EDIT: I’ve checked the example again and it adds only 4 inputs (and my example has 5 columns). You could overwrite it to add a function that will create inputs and append them dynamically. It will allow your users to use all functionalities as adding or removing rows and columns or changing positions of rows and columns.

Thats basic, but I would need to add date fields, data type validations, perhaps drop downs, and that sort of thing. It also would be nice for it to handle those things dynamically. Also would probably need to disable the table if you dont want it to span over the whole page so people cant edit the table while thats open causing mismatched data.

Its something we can all do, but to do it well takes time and effort.

Yes it surely takes time and effort @mmoles

Disabling editing is just a one line of code - adding readOnly: true to your instance settings however dropdown logic needs more coding.

I do not have an example with dates but I can help you to create it if you would encounter any difficulties.

I appreciate the help. I will go ahead and take care of it myself though. This would be a nice little addition for the library in the future though =D

OK :slight_smile: I’m here if you’d need me.

ps. thanks for the hint, I think it would be great to add it in our (planned but not yet added) how to section.

Hi @aleksandra_budnik ,

This is exactly what we also want to implement in our project.

This example - http://jsfiddle.net/handsoncode/n98Lsbwq/ is good. I am looking if we can have drop-downs fields and NextRow & PreviousRow buttons on form view.

I was wondering if there’s any progress on this idea. And just like @mmoles , I am looking if someone has already written code for this, so that I need not need to write it. :slight_smile:

I’d be happy to help with the idea @prashant.gandhi still doing anything from a scratch is a part of our commercial offer :slight_smile:

Do you already created a draft and need some tips?

@aleksandra_budnik wrote:

Disabling editing is just a one line of code - adding readOnly: true to your instance settings

Umm, not quite, Aleks :slight_smile: There is quite a bit more you may need to do to disable editing. Have a look at my stackoverflow post (which only gives as much as I need, but it’s a start):

Hi @jon

sure, disabling the table completely actually needs more that switching the readOnly state.