Parent Child Editing

Parent Child Editing

rf1234rf1234 Posts: 2,801Questions: 85Answers: 406

@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.

This question has accepted answers - jump to:

Answers

  • kthorngrenkthorngren Posts: 20,139Questions: 26Answers: 4,734
    edited January 2019 Answer ✓

    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 :smile: 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

  • rf1234rf1234 Posts: 2,801Questions: 85Answers: 406

    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

  • kthorngrenkthorngren Posts: 20,139Questions: 26Answers: 4,734
    Answer ✓

    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

  • rf1234rf1234 Posts: 2,801Questions: 85Answers: 406

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

  • allanallan Posts: 61,431Questions: 1Answers: 10,048 Site admin
    Answer ✓

    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

  • rf1234rf1234 Posts: 2,801Questions: 85Answers: 406

    Thanks Allan!

This discussion has been closed.