Inline editing for DataTables
To make editing more user-friendly, we can use AJAX to allow editing of object properties directly in the table.
Blueprint information
- Status:
- Complete
- Approver:
- Gabriel Hurley
- Priority:
- Low
- Drafter:
- Gabriel Hurley
- Direction:
- Approved
- Assignee:
- Ladislav Smola
- Definition:
- Approved
- Series goal:
- Accepted for icehouse
- Implementation:
- Implemented
- Milestone target:
- 2014.1
- Started by
- Ladislav Smola
- Completed by
- David Lyle
Related branches
Related bugs
Sprints
Whiteboard
[jcoufal] Final design for the inline editation available here: http://
[jcoufal] Design variants ready, currently under UX group discussion.
[jcoufal] I am working on mock-ups for this BP.
[lsmola]
Some notions about the problem:
N.1. When javascript is disabled, inline editing will be disabled. The whole table is wrapped by form, so the basic filtering and actions work without javascript, we will not change this structure.
So easiest ways to do the inline editing will be by showing the form in popup.
N.2. Cell editing will be probably best, because not all cells of the table should be edited (like status, etc.)
So basic workflow of the cell editing should be:
- Click on the cell shows shows popup
- Saving or canceling will be then possible
- There could be icon of pencil, when cell is editable, or mouse pointer will just change on hover of the editable cell.
N.3 Multi-part data
- would be good to have blueprints for Ajax Upload already implemented
N.4 Creating a new table row
- problem in here is that the table row doesn't always contain all required fields. So this should probably show form with all required fields, rather than all columns of table. Right?
N.5 There is a way to show the form fields directly in the table(without popup). But it will be harder to implement.
Now, how I imagine it should be implemented:
when defining a table column, you could connect it to some form e.g.
name = tables.
So this would work exactly like forms in the modal, that are there now.
It may be good to have some default form, so you could type just editable=True and it will find out the type of the column and show the form input for this column automatically (so you don't have to define a Form class and a view). Though I am not exactly sure how this could be implemented.
[gabrielhurley] I agree completely on points 1 and 2. I would say leave point 3 for some future date. We don't need to worry about uploading inline currently. Let's keep the scope of this to editing existing text-based (or boolean/
Gerrit topic: https:/
Addressed by: https:/
Inline Table editing
[2013-07-16 | Gabriel] I'd rather see this land as a robust, well-tested feature early in I than try to rush it into H. I'm willing to reconsider if great code shows up early in H3, but for now I'm going to defer this.
[2013-08-06 | lsmola] Whole Popup variant (N2) got cancelled after talk with jcoufal. There will be only inline edit variant for cells (N5).
[2013-08-14 | lsmola] Adding this to the all dashboard tables will be implemented as one commit per one dashboard table.
Gerrit topic: https:/
Work Items
Work items:
Cell Edit Action inside Table: DONE
Connect Update Action to Table: DONE
Validation Process of the Cell: DONE
Update Table after save (only current cell): DONE
Design: DONE
Implementing design in Bootstrap: DONE
Apply the solution to whole Dashboard: TODO
Tests: DONE
Dependency tree
* Blueprints in grey have been implemented.