select status of child datatable

montoyam

I have three datatables. parent table is Cases. child table is CaseDefendants, child of child (grandchild ) is DefendantContactInfo.

So, when Cases row is selected, I filter CaseDefendants for the selected Case:

        ajax: {
            url: 'api/CaseDefendants',
            type: 'post',
            data: function (d) {
                var selected = CasesTable.row({ selected: true });
                if (selected.any()) {
                    d['CaseFilterID'] = selected.data().Cases.CaseID;
                }
            }
        },

When you select a defendant row for that case, I then filter DefendantContactInfofor that selected CaseDefendant:

        ajax: {
            url: 'api/DefendantContactInfo',
            type: 'post',
            data: function (d) {
                var selected = CaseDefendantsTable.row({ selected: true });
                if (selected.any()) {
                    console.log("selected");
                    d['DefendantFilterID'] = selected.data().CaseDefendants.CaseDefendantID;
                } else {
                    console.log("un-selected");
                    d['DefendantFilterID'] = null;
                }
            }
        },

The selection works just fine. The issue is when I unselect, or select a different parent record (cases). On unselect of cases I reload the ajax for the two children tables:

    function toggleAndRefresh() {

        var selectedRows = CasesTable.rows({ selected: true }).count();
        CaseDefendantsTable.button(0).enable(selectedRows === 1);
        DefendantContactInfoTable.button(0).enable(selectedRows === 1);
        CaseActionsTable.button(0).enable(selectedRows === 1);
        CaseNotesTable.button(0).enable(selectedRows === 1);

        CaseDefendantsTable.ajax.reload();
        DefendantContactInfoTable.ajax.reload();
        CaseActionsTable.ajax.reload();
        CaseNotesTable.ajax.reload();
    }

However, notice the console.logs that I have below on the 'grandchild' ajax. When I select a new parent records and the first child (CaseDefendants) no longer has a selected record, for some reason the console.log of the grandchild ajax is still showing "selected" even though there is no casedefendant record selected. I'm guessing there is code to force an 'unselect' of the first child datatable, but I would think that it should already be identified as unselected.

kthorngren

My guess is its a timing issue when using ajax and its asynchronous operation. I updated one of my parent/child table examples to demonstrate:
http://live.datatables.net/biliniyu/14/edit

I added a console.log statement in the parent's deselect event and in the ajax.dataSrc of the child table. Even though the console.log in the deselect event follows after the childTable.ajax.reload(); it will show one row selected (if you select a row in the child) but once the ajax response is received and processed the child shows no selected rows.

I think your grandchild is fetching its rows before the child ajax is complete. Maybe try moving DefendantContactInfoTable.ajax.reload(); into the dataSrc of the child.

Kevin

montoyam

that was the exact issue and the exact fix. Thank you so much.

So much to learn regarding dataTables and javascript!!