Parent / child editing

marianidiego

Link to test case: https://datatables.net/blog/2019-01-11
Debugger code (debug.datatables.net): /
Error messages shown: /
Description of problem:

I use the function shown as described. It works!
Only if I put the parameter "repository=true" in the Father table, it doesn't work anymore.

The child table is created and closed immediately after for an event that I can't find.

marianidiego

responsive: true, // Don't work

kthorngren

Are you saying you are trying to use responsive and child detail rows at the same time? If so they aren't able to share the same detail row user space. You will need to use Responsive Modal display like this example.

Kevin

marianidiego

But I would still like to link to each row, a child table.... how can I implement?

like this link: https://social.microsoft.com/Forums/id-ID/3a896bdd-b1c3-41db-8243-a55e47099d3b/how-to-create-report-that-looks-like-an-access-table-with-parent-child-relationship?forum=sqlreportingservices

marianidiego

Find!

Im define the fatherTable:

    fatherEditor = new $.fn.dataTable.Editor( {
                    "ajaxUrl": "class/Editor-PHP/prodotti_test2.php",
                    "language": {"url": "http//cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/Italian.json"},
                    "domTable": "#example",
                    "fields": [             
    .....
    var fatherTable = $('#example').DataTable({
                    dom: 'Bfrtip',
                    ajax: 'class/Editor-PHP/prodotti_test2.php',
                    columns: [
                        {
                            "class":   
    ....

than, im define select event:

                fatherTable.on( 'select', function ( e, dt, type, indexes ) {
                    if ( type === 'row' ) {
                        createChild(dt);
                    }
                });

                fatherTable.on( 'deselect', function ( e, dt, type, indexes ) {
                    if ( type === 'row' ) {
                        destroyChild(dt);
                    }
                });

Finally, I define createchild e destroychild function:

            function createChild ( row ) {

                // Initialise as a DataTable
                var rowData = row.data();
                if (typeof sonEditor == 'undefined'){
                    var sonEditor = new $.fn.dataTable.Editor( {
                        ajax: {
                            url: 'class/Editor-PHP/prodotti_dettagli.php',
                            data: function (d) {
                                d.products_id = rowData.products_id;
                            }
                        },
                        "domTable": "#lang_desc",
....


            function destroyChild(row) {    
                 $('#lang_desc').DataTable().clear().draw();
            }

colin

Excellent, thanks for reporting back,

Colin