Parent/child row relationship with editable children
Parent/child row relationship with editable children
chrisxaustin
Posts: 8Questions: 3Answers: 0
I'm working on a system for managing parsers, and as part of that system I'll need 3 levels of nesting.
I'd like to avoid nested tables since the column widths would need to be linked, though this is probably an easier problem to solve.
The interface I've designed uses the following layout for each top-level item:
Group | Key | Category | Type | Action | Object | Context | Status | Reason |
--------------------------------------------------------------------------------
1) Group | Key | Message |
2) | Pattern |
3) | Category | Type | Action | Object | Context | Status | Reason |
Working version with datatables:
https://jsfiddle.net/chrisxaustin/xqktdsoc/
Somewhat convoluted hack to make it work:
* message column set to invisible
* dataSrc function to collect the data from child nodes in the top-level node to allow sorting
* row 1: category column text set to the value for message
* row 1: category column colspan=7
* row 1: remove all columns after category
* for each child pattern definition:
** append a row for pattern
** append a row for the classification fields
I'm now trying to integrate Editor. It obviously won't work out of the box since I have 3 rows for each row that it knows about.
Any thoughts?
This question has an accepted answers - jump to answer
Answers
Will you always have three rows with parent record? If so, you could use
field.namewith index options such as:patterns.0.category,patterns.1.categoryandpatterns.2.categoryto address the three different parts. That would read from the data source and send to the server okay - although it isn't something that I've tested the provided PHP / .NET libraries for.You would obviously end up with a fairly large form in the Editor view, so it might be that you could consider using the new template option in Editor 1.6 to break the form up into tabs or similar.
Allan
Here's a fiddle with my end goal (but prettier, and editable)
https://jsfiddle.net/chrisxaustin/7rr1bv2g/
Oh, unrelated - the template example doesn't seem to work in chrome. Fine in ffx.
https://editor.datatables.net/examples/simple/template
Here's a fiddle with my end goal for content. The style will change since the text in the left-hand column is a bit fugly and flows poorly.
https://jsfiddle.net/chrisxaustin/7rr1bv2g/
I think that was / is a cache issue. Reloading should allow it to work as expected.
Inline editing and access using KeyTable adds a significant level of complexity here - to the point that I actually don't think it is possible to achieve what you are looking for. For example, KeyTable will just ignore the cells that have been added dynamically in the draw callback (since they aren't "owned" by the DataTable). Likewise, inline editing needs to be able to access the cell via the DataTables' API, which isn't going to be possible here.
It might be possible to make it all work with the modal editing (it wasn't designed for use like this I'm afraid), but I think it would take a huge amount of work to make it work quite like you are looking for.
Sorry I don't have better news on this one!
Allan
Wrote an updated version that uses nested tables with their columns aligned.
Looks quite good now, but performance is very poor. I'll keep experimenting - thanks for your help.
Here's the fiddle in case anyone finds this question and wants more options to explore:
https://jsfiddle.net/chrisxaustin/esk3a51n/
Will update it after addressing performance issues and doing the editor integration. That part is commented out and not tested yet.
Here's a working version with acceptable performance using nested datatables, synchronized column widths, and editor (disabled for jsfiddle).
Hope it helps someone.
https://jsfiddle.net/chrisxaustin/bp2fgkp4/
Absolutely superb - thank you for sharing your solution with us!
Allan