Parent Child Editing

rf1234

@kthorngren @allan @colin

Could you guys help me with this please.

I have developed a lot of parent / child data tables with Editor like in this blog post: https://datatables.net/blog/2016-03-25

This means that the respective child table for each selected parent row is a separate data table displayed underneath the parent table. The child data table is empty whenever no row of the parent table has been selected. (I actually hide the child data table in that case.)

How can I do this using child rows in the parent data table without a second data table at the front end? Couldn't figure this out.

What I would like to do is to click on the child row button of a parent row and then see the respective child table entries as child rows of the parent row like in this example: https://datatables.net/examples/api/row_details.html.

I would also like to be able to select one of the child rows and edit it with a separate Editor instance like in the blog post. So my question is really rather on how to display everything together in one data table using child rows instead of having the child table as a separate data table.

kthorngren

I think Allan posted recently that he was working on a blog for using Editor with Child Detail rows. Here is my take on how to do this:
http://live.datatables.net/sawiwavi/1/edit

This example allows for having multiple child rows open with Editor instances for each by generating a unique ID for each child table from the name field. Too lazy to grab the row index to use for the ID It tracks each created Editor instance in an array so its only created once. Don't think there is a way to destroy Editor instances - might not be necessary. The unique IDs wouldn't be needed if only one child row was allowed to be open at a time.

There is not a server back end for the Editor in this example. Don't think the Datatables JS Bin environment has anything that can be used. Also I didn't create an Editor instance for the parent table.

@allan or @colin likely have better ideas of how to do this. Any input would be appreciated. Hope this gets you started.

Kevin

rf1234

Hi Kevin,

thanks a lot!!! Let's see whether @allan or @colin have more input on this.

I think this could be another really useful application for Data Tables and Editor. Best would be in my opinion if all of the child and parent table buttons were on top of the parent table - or in some kind of context menu.

Roland

kthorngren

You can use the Direct Insertion method to place the buttons where you want on the page. I updated the example to show this:
http://live.datatables.net/nuwezala/1/edit

Doing this you will probably want to have only one child open at a time. I didn't make this change in the example. The example uses buttons().destroy() to remove the buttons when closing the child. For some reason they aren't removed so I also use $().empty() to empty the div I put the buttons in.

Kevin

rf1234

That's awesome, Kevin! Will try this asap. But will take a while due to my other obligations ...
Roland

allan

Nice one Kevin - thanks for this!

And yes, I'm going to try and publish a post this week on doing parent/child editing in a child row of the parent DataTable.

Allan

rf1234

Thanks Allan!