Opening child row conflicts with triggering child table update

martinconnollybart

I have a parent table and child table. I have it set so that selecting a row in the parent table triggers an Ajax reload of the child table. I also want to open a child row in the parent table when I click on the first column as per this example: https://datatables.net/examples/api/row_details.html
Selecting anywhere apart from the first column in the parent table updates the child correctly. Clicking the arrow in the first column opens the child row correctly - but it deselects the row and thus the child table gets emptied!
How can I stop this? I want the child row to show AND the child table to be updated if I click the first column.
Here's my code (some bits left out as they're not relevant here)

       function formatExtraFunderData (d) {
                return (
                    '<dl>' +
                    '<dt>Their priorities:</dt>' +
                    '<dd>' + d.theirpriorities +'</dd>' +
                    '<dt>Next deadline:</dt>' +
                    '<dd>' + d.nextdeadline +'</dd>' +
                    '<dt>Notes:</dt>' +
                    '<dd>'+d.fnotes+'</dd>' +
                    '</dl>'
                );
            }
            var fundTable = new DataTable('#TFunders', {
                ajax: 'php/table.TFunders.php',
                columns: [

                    {
                        className: 'dt-control',
                        orderable: false,
                        data: null,
                        defaultContent: ''
                    },
                    {
                        "data": "fundname", "label":"Fund Name"
                    },
                    {
                        "data": "contact"
                    },
                    {
                        "data": "parentorg"
                    },
                    {
                        "data": "lastupdate", "label":"Last Update"
                    }
                ],
                dom: 'Bfrtip',
                select: {
                 style: 'single'
                },
                buttons: [
                    { extend: 'create', editor: fundEditor },
                    { extend: 'edit', editor: fundEditor },
                    { extend: 'remove', editor: fundEditor }
                ],
                scrollY: "325px",
                "paging": false,
                "autoWidth": false,
                 responsive: {
                    details: { 
                         display: DataTable.Responsive.display.modal({
                            header: function (row) {
                                var data = row.data();
                                return 'Details for ' + data[0] + ' ' + data[1];
                            }
                        }),
                        renderer: DataTable.Responsive.renderer.tableAll() 
                    }
                } 

            } );
            fundTable.on('click', 'td.dt-control', function (e) {
                let tr = e.target.closest('tr');
                let row = fundTable.row(tr);

                if (row.child.isShown()) {
                    // This row is already open - close it
                    row.child.hide();

                }
                else {
                    // Open this row
                    row.child(formatExtraFunderData(row.data())).show();
                    //row.child.show();
                }

            });

      var appTable = new DataTable('#TApplications', {
                dom: 'Bfrtip',
                ajax: {
                    url: 'php/table.TApplications.php',
                    type: 'post',
                    data: function(d){
                        var selected = fundTable.row({selected: true});
                        if (selected.any()) {
                            d.funderid = selected.data().id;
                        }
                    }
                }, 


    fundTable.on('select', function(){
                appTable.ajax.reload();
                appEditor.field("TApplications.funderid")
                        .def(fundTable.row({selected:true}).data().id);
            });

            fundTable.on('deselect', function(){
                appTable.ajax.reload();
            });

            appEditor.on('submitSuccess', function () {
                fundTable.ajax.reload();

            });

            fundEditor.on('submitSuccess', function () {
                appTable.ajax.reload();
            });

allan

Clicking the arrow in the first column opens the child row correctly - but it deselects the row and thus the child table gets emptied!

Use select.selector to tell Select what items it should listen on:

select: {
  style: 'single',
  selector: 'td:not(:first-child)'
}

should do it.

Allan

martinconnollybart

Thanks Allan, yes that did it!