dataTable inside Editor template

montoyam

I have an editor that on click of the submit the Editor was hidden and a DataTables was opened in a modal div.

        RequestHeaderEditor.close();
        $('#DetailPopup').modal('show');

The DataTable that was opened had it's rows deleted and re-added

        RequestRoleSelectTable
            .clear()
            .rows
            .add(arrResponsibilities.filter(function (data) {
                if (isApproved) {
                    //only add the responsibilities for the approved request
                    return (data.RequestDetails.RequestDetailID != null)
                } else {
                    console.log("adding:",data);
                    return true;
                }
            }));

This worked perfectly when the DataTable was in the modal div. However, I am now wanting to move the RequestRoleSelectTable dataTable inside of the Editor using the template feature:

        <div id="customForm">
            <fieldset>
                <editor-field name="RequestHeader.RequestID"></editor-field>
                <editor-field name="RequestHeader.ActionID"></editor-field>
                <editor-field name="RequestHeader.EffectiveDate"></editor-field>
                <editor-field name="RequestHeader.EndDate"></editor-field>
                <editor-field name="RequestHeader.UserID"></editor-field>
                <editor-field name="RequestHeader.ReplacedUserID"></editor-field>
                <editor-field name="RequestHeader.Comment"></editor-field>
                <editor-field name="RequestHeader.DepartmentID"></editor-field>
                <editor-field name="RequestHeader.RequestedBy"></editor-field>
                <editor-field name="RequestHeader.ApprovedBy"></editor-field>
            </fieldset>
            <div class="card bg-alternating">
                <div class="pt-3 mb-3">
                    <h4 class="card-title" id="cardHeader">Select Responsibilities for this user</h4>
                    <div class="card-body">
                        <table cellpadding="0" cellspacing="0" border="0" class="table table-striped table-bordered w-100" id="RequestRoleSelect">
                            <thead class="hideHeader"></thead>
                        </table>
                    </div>
                </div>
            </div>
        </div>

then on the editor's preOpen I am calling the code to clear and add the dataTable rows:

    RequestHeaderEditor.on('preOpen', function (e, node, data, items, type) {
        loadDetail(0, 0);
    });

    function loadDetail(headerID, userID) {

        $.ajax({
            url: "api/RequestRoleSelect?departmentID=" + $('#departmentID').val() + "&userID=" + userID + "&headerID=" + headerID
            , async: false
            , success: function (response) {
                arrResponsibilities = response.data;
            }
        });

        var isApproved = 0;

        RequestRoleSelectTable
            .clear()
            .rows
            .add(arrResponsibilities.filter(function (data) {
                    console.log("adding:",data);
                    return true;
            }));

        RequestRoleSelectTable.column(0).visible(!isApproved);
        RequestRoleSelectTable.columns.adjust();
        RequestRoleSelectTable.draw();

        //RequestHeaderEditor.close();
        //$('#DetailPopup').modal('show');
        console.log("done");

    }

(i stripped out a bunch of code from teh loadDetail function that is not related to this question)

I see the console logs firing, so it seems to be adding the rows to the dataTable, but when the Editor is finally displayed after the preOpen code runs, the dataTable is completely blank. Why would the dataTable render fine in a modal div, but within the editor it doesn't?

I wish I could post a test case but there is so much going on with ajax calls I don't think I can.

montoyam

oh my. I moved where i was defining the dataTable above the editor and it works perfectly now.

Please close this question