How to implement this full editable table using Editor?

whuang · September 2019

Hi Allan,

Could you let me know if it is possible to implement all the features in attached image?

The features would be:

The whole table is editable and the last line always to be a new line to be able to add new item.
Some fields are lookup field with glass popup and auto-complete enabled. The list will be filtered along with user's input.
There will be a save button outside of the table to save the content into database.

Thanks,

Winson

colin · September 2019

Yep, see Editor
There are a few threads on autocomplete, such as this one here
By default, Editor pushes the changes back to the server immediately. You can queue them up, as described by this blog post.

Cheers,

Colin

whuang · September 2019

Hi Colin,

Thanks for your response and that is helpful.

I still have some questions:

Basically I will need the inline editor but would like all cells are default to edit status instead of clicking and become edit mode. In this way, user can use keyboard to tab over all cells just like Excel.
The auto-complete part is good in the lookup column but how to have the popup happens when clicking lookup glass button so user can select from the list and fill in the column when closing the popup?
Still don't know how to make the last row always be the new line like attached image does?

colin · September 2019

This example here sounds like what you're after.
This thread here talks about autoComplete. You could use jQuery UI autocomplete, or it's also available in Select2. Unfortunately, I don't have a working example.
You could use row().child() for that, see here. With some styling it could look like that.

Cheers,

Colin

colin · September 2019

See another autoComplete thread here.

allan · September 2019

Worth noting that for 1, Editor does not support exactly what you are looking for. Only a single cell can be editable at a time in Editor.

And 2 - use Select2, not AutoComplete (its implementation just doesn't make a lot of sense to me).

Allan

Answers