How to implement this full editable table using Editor?

whuang

Hi Allan,

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

The features would be:

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

Thanks,

Winson

colin

Hi @whuang ,

1. Yep, see Editor
2. There are a few threads on autocomplete, such as this one here
3. 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

Hi Colin,

Thanks for your response and that is helpful.

I still have some questions:

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

2. 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?

3. Still don't know how to make the last row always be the new line like attached image does?

colin

Hi @whuang ,

1. This example here sounds like what you're after.
2. 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.
3. You could use row().child() for that, see here. With some styling it could look like that.

Cheers,

Colin

colin

See another autoComplete thread here.

allan

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