Oracle JET Example - Implementing Editable Collection Table

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.