parent/child with searchPane - panes duplicating on hide/show

montoyam

I have a parent/child editor setup as explained here: https://datatables.net/blog/2019-01-11

It works great, but when I added a SearchPane, each time I expand a parent record to show the child table, a new group of SearchPanel tables are added. So if I click the show/hide three times I will have the orginal group of SearchPanel tabels plus 3 more right next to them.

        // Add event listener for opening and closing details
        $("#EmployeePool tbody").on("click", "td.details-control", function () {
            var tr = $(this).closest("tr");
            var row = EmployeePoolTable.row(tr);

            if (row.child.isShown()) {
                // This row is already open - close it
                destroyChild(row);
                tr.removeClass("shown");
            } else {
                // Open this row
                createChild(row);
                tr.addClass("shown");
            }
        });

    function createChild(row) {
        var rowData = row.data();

        // This is the table we'll convert into a DataTable
        var table = $('<table class="display" id="skillTable" />');

        // Display it the child row
        row.child(table).show();

        // Editor definition for the child table
        var SkillsEditor = new $.fn.dataTable.Editor({
            ajax: {
                url: "api/EmployeeSkills",
                data: function (d) {
                    d["EmployeePoolIDFilter"] = rowData.EmployeePool.EmployeePoolID;
                }
            },
            table: table,
            fields: [
                { label: "Skill:", name: "EmployeeSkills.Skill" },
                {
                    label: "Employee:",
                    name: "EmployeeSkills.EmployeePoolID",
                    type: "select",
                    placeholder: "Select an Employee",
                    def: rowData.EmployeePool.EmployeePoolID
                },
                {
                    label: "Added By",
                    name: "EmployeeSkills.EnteredBy",
                    def: function () {
                        return userNameCookie;
                    }
                    , type: "readonly"
                },
                {
                    label: "Record Added",
                    name: "EmployeeSkills.RecordAdded",
                    type: "readonly",
                    def: function () {
                        var d = new Date();
                        return d;
                    }
                }
            ]
        });

        // Child row DataTable configuration, always passes the parent row's id to server
        var SkillsTable = table.DataTable({
            dom: "t",
            pageLength: 5,
            ajax: {
                url: "api/EmployeeSkills",
                type: "post",
                data: function (d) {
                    d["EmployeePoolIDFilter"] = rowData.EmployeePool.EmployeePoolID;
                }
            },
            columns: [
                { title: "Skill", data: "EmployeeSkills.Skill" },
                {
                    data: null,
                    className: "center",
                    defaultContent: '<a href="" class="editor_edit">Edit</a> / <a href="" class="editor_remove">Delete</a>'
                }
            ],
            select: true
        });

        // On change, update the content of the parent table's host row
        // This isn't particularly efficient as it requires the child row
        // to be regenerated once the main table has been reloaded. A
        // better method would be to query the data for the new user counts
        // and update each existing row, but that is beyond the scope of
        // this post.
        SkillsEditor.on('submitSuccess', function (e, json, data, action) {
            row.ajax.reload(function () {
                $(row.cell(row.id(true), 0).node()).click();
            });
        });

        // Edit record
        $('#skillTable').on('click', 'a.editor_edit', function (e) {
            e.preventDefault();
            console.log($(this));
            SkillsEditor.edit($(this).closest('tr'), {
                title: 'Edit record',
                buttons: 'Update'
            });
        });

        // Delete a record
        $('#skillTable').on('click', 'a.editor_remove', function (e) {
            e.preventDefault();

            SkillsEditor.remove($(this).closest('tr'), {
                title: 'Delete record',
                message: 'Are you sure you wish to remove this record?',
                buttons: 'Delete'
            });
        });

    }

    function updateChild(row) {
        $("table", row.child())
            .DataTable()
            .ajax.reload();
    }

    function destroyChild(row) {
        // Remove and destroy the DataTable in the child row
        var table = $("table", row.child());
        table.detach();
        table.DataTable().destroy();

        // And then hide the row
        row.child.hide();
    }

sandy

Hi @montoyam ,

This issue has been previously raised with us and a fix will be available in the next release. In the mean time the fix is available in the nightly builds and you can see it working in this example.

Hope this helps,
Sandy

Loren Maxwell

@sandy, this seems eerily similar to my recent bug report concerning Row Group as well:
https://datatables.net/forums/discussion/61518/inserting-a-datatable-into-a-child-row-duplicates-rowgroup-headers

montoyam

that worked perfectly. thank you Sandy.

montoyam

Loren, hopefully they have a fix for yours too.

Loren Maxwell

Thanks, @montoyam. I'm hopeful it's the same issue!