Oracle JET allows to implement inline editable tables. User can double click row or press Enter to switch to edit mode. Use Esc to switch back to readonly mode. With F2 can toggle between editable and readonly. Check it yourself in JET cookbook Editable Collection Table to see how it works.
I have followed instructions from the cookbook and implemented editable JET table on top of ADF BC REST service. Row with key 201 is switched to edit mode:
When we exit edit mode, event is handled in JavaScript and changed row is printed to the log. Here we can collect all changed rows into array and submit to the server all at once or we can fire individual REST calls per each changed row - depends on implementation:
To handle row edit, table must be set with editMode: 'rowEdit' property:
Row template property must be defined to render different HTML elements in readonly and editable modes. This property can be initialized dinamically with different template name retrieved from function:
Based on row edit mode, function returns template name:
Readonly template renders output texts, editable template renders input texts:
Changed row data is logged by ojbeforeroweditend listener function:
Download sample application - JETEditableTableApp.zip.
I have followed instructions from the cookbook and implemented editable JET table on top of ADF BC REST service. Row with key 201 is switched to edit mode:
When we exit edit mode, event is handled in JavaScript and changed row is printed to the log. Here we can collect all changed rows into array and submit to the server all at once or we can fire individual REST calls per each changed row - depends on implementation:
To handle row edit, table must be set with editMode: 'rowEdit' property:
Row template property must be defined to render different HTML elements in readonly and editable modes. This property can be initialized dinamically with different template name retrieved from function:
Based on row edit mode, function returns template name:
Readonly template renders output texts, editable template renders input texts:
Changed row data is logged by ojbeforeroweditend listener function:
Download sample application - JETEditableTableApp.zip.
Thanks
ReplyDeleteCan we trigger event only on press of Tab button instead of Enter button ?
ReplyDeleteI want inputtext to allow multiple lines.
Hi Andrejus,
ReplyDeleteWe often need to use an editable detail table with a master. Can you explain how the JET Common model implements associations?
For example, I have a department with related employees and I want to edit both master and child and push the data to REST.
How does JET common model handle that?
Regards,
Sarah
There is nothing like out of the box master-detail support. You need to code all yourself - this is JS :)
ReplyDeleteRegards,
Andrejus
Hi Andrejus,
ReplyDeleteI was reading about Backbone associations and wanted to know if JET common model has implemented that since it uses Backbone JS. Thank u for clarifying.
Regards,
Sarah