Datatable with inline editing within another Editor

montoyam

I am using an Editor template:

        <div id="customForm">
            <div class="floatLeft p-3 m-3">
                <fieldset>
                    <editor-field name="ReportID"></editor-field>
                    <editor-field name="ReportName"></editor-field>
                    <editor-field name="ReportDescription"></editor-field>
                    <editor-field name="Module"></editor-field>
                    <editor-field name="SQLStatement"></editor-field>
                </fieldset>
            </div>
            <div id="ParametersDiv" class="card bg-alternating p-3 m-3">
                <div class="pt-3 mb-3">
                    <h4 class="card-title" id="cardHeader">Report Parameters</h4>
                    <div class="card-body" id="ReportFilterTableDiv">
                        <table cellpadding="0" cellspacing="0" border="0" class="table table-striped table-bordered w-100" id="ReportFilters"></table>
                    </div>
                </div>
            </div>
        </div>

Notice that there is another dataTable within that Editor div. The 'imbedded' dataTalbe displays just fine, however when I try to use inline editor within that imbedded dataTable I get issues:

    var ReportFiltersEditor = new $.fn.dataTable.Editor({
        ajax: {
            url: 'api/ReportFilters',
            data: function (d) {
                d['ReportID'] = selectedReportID;
            }
        },
        table: '#ReportFilters',
        fields: [
            { label: "Report ID", name: "ReportID" },
            { label: "ParameterName", name: "ParameterName" },
            { label: "DisplayName", name: "DisplayName", type: 'textarea' },
            { label: "IsNumeric", name: "IsNumeric" }
        ]
    });

    var ReportFiltersTable = $("#ReportFilters").DataTable({
        dom: 'Brtp',
        ajax: {
            url: 'api/ReportFilters',
            type: 'post',
            data: function (d) {
                d['ReportID'] = selectedReportID;
            }
        },
        scrollY: '50vh',
        scrollCollapse: true,
        paging: false,
        columns: [
            { data: "ReportID", title: "ReportID", visible: false },
            { data: "ParameterName", title: "Report Name" },
            { data: "DisplayName", title: "Field Name" },
            { data: "IsNumeric", title: "IsNumeric" },
            {
                data: null,
                defaultContent: '<i class="fa fa-pencil"/>',
                className: 'row-edit dt-center',
                orderable: false
            },
            {
                data: null,
                defaultContent: '<i class="fa fa-trash"/>',
                className: 'row-remove dt-center',
                orderable: false
            }
        ],
        select: { style: 'single' },
        buttons: {
            buttons: [{
                extend: "createInline",
                editor: ReportFiltersEditor,
                formOptions: {
                    submitTrigger: -2,
                    submitHtml: '<i class="fa fa-play"/>'
                }
                , text: '<span class="fa fa-plus-circle fa-2x icon-purple"></span>', className: 'btn', titleAttr: 'Add Parameter'
            }]
            ,dom: {
                button: { tag: 'i', className: '' }
            }
        }
    });


    // Activate an inline edit on click of a table cell
    $('#ReportFilters').on('click', 'tbody td.row-edit', function (e) {
        ReportFiltersEditor.inline(ReportFiltersTable.cells(this.parentNode, '*').nodes(), {
            submitTrigger: -2,
            submitHtml: '<i class="fa fa-play"/>'
        });
    });

    // Delete row
    $('#ReportFilters').on('click', 'tbody td.row-remove', function (e) {
        ReportFiltersEditor.remove(this.parentNode, {
            title: 'Delete record',
            message: 'Are you sure you wish to delete this record?',
            buttons: 'Delete'
        });
        ReportFiltersTable.ajax.reload();
    });

The delete will actually delete, but I get an error message and the dataTable won't refresh:

dataTables.editor.min.js:100 Uncaught TypeError: Cannot read properties of undefined (reading 'oFeatures')
    at a.commit (dataTables.editor.min.js:100:292)
    at a.Ub [as _dataSource] (dataTables.editor.min.js:61:186)
    at a.qc [as _submitSuccess] (dataTables.editor.min.js:81:446)
    at dataTables.editor.min.js:78:469
    at Object.Mb.g.complete (dataTables.editor.min.js:57:1)
    at c (datatables.min.js:14:28327)
    at Object.fireWith (datatables.min.js:14:29072)
    at l (datatables.min.js:14:80029)
    at XMLHttpRequest.<anonymous> (datatables.min.js:14:82355)

The other issue is this embedded dataTable needs the foreign key 'ReportID' to get populated with the 'parent' record. I tried to set the value using editor.set() but it didn't seem to work although the console.log is correctly showing the right ReportID. The field is blank in the Editor so I can't do an insert.

    ReportsTable.on('select deselect', function (e) {
        var selectedRow = ReportsTable.row({ selected: true });
        if (selectedRow.any()) {
            selectedReportID = selectedRow.data().ReportID;
            ReportFiltersEditor.set('ReportID', selectedReportID);
            console.log(selectedReportID);
        } else {
            selectedReportID = 0;
        }
        SearchParametersTable.ajax.reload();
        ReportFiltersTable.ajax.reload();
    });

allan

Hi,

Which version of Editor are you using here? Editor 2 included a number of improvements around this area. Part of the issue is that doing it this way results in multiple DTE elements which is likely the cause of the issue. If you can link to a test case showing the issue though, I'll be able to debug it fully.

Allan

montoyam

I am using Editor 2.0.4. I thought using Inline editing I would be able to work around an extra editor div

Let me see if I can put a test case together.

montoyam

If I am wanting to use ajax in my test case, how do I get to a second dataset, such as Sites?

Right now I am using for my parent table: '/examples/ajax/data/arrays.txt'
is there a url for me to use Sites as children records? (is sites a good one to use? I would need a table that is one-to-many to the employee test data)

allan

There isn't actually I'm afraid. We need to improve our Ajax offerings for the live site!

You could just reference the same file for the nested DataTable. It would be okay for a test case.

Thanks,
Allan

montoyam

sorry, I don't know what that means.

kthorngren

Use /examples/ajax/data/arrays.txt' for the nested table or use a different ajax data source from one of the other JS BIN examples. For test case purposes the actual data doesn't matter.

Kevin

montoyam

I am trying to create a test case but I am getting an error that I don't understand:

http://live.datatables.net/gujuziti/1/edit

I have not finished all the JavaScript needed to explain my issue but could someone help with this initial error?

kthorngren

There are some syntax errors. Click on the errors button at the bottom of the Javascript tab start clicking on them from the top. They should place you in the script near the error. I think the bad line breaks are due to starting the line with a comma instead of having the comma on the previous line, for example:

                }
                , text: '<span class="fa fa-plus-circle fa-2x icon-purple"></span>', className: 'btn', titleAttr: 'Add Parameter'

Kevin

montoyam

ah, thanks. I didn't see the section at the bottom of the javascript tab. I got it fixed.

montoyam

I fixed those errors, but now I am getting an error yet nothing is showing at the bottom of the javascript tab

kthorngren

Looking at the browser's console you are getting this error:

dataTables.searchPanes.js:1749 Uncaught Error: SearchPane requires Select

You can add select via the Add Library option or use the Download Builder. Better might be to remove searchpanes and any other code that is not needed to replicate the issue. The less code we need to look through the better

Kevin

montoyam

thank you again for your help. I am much further in providing a test case. Now, I am getting the error 'Unable to find row identifier' for the editor. I have tried idSrc and rowId, but neither seems to resolve the issue. Should I just create an array of data and use that instead of trying to use ajax calls with this sample data? Will Editor be able to add a record using an array like that?

montoyam

ignore my last post. I switched it to using array data instead of ajax calls. I will post when the test case is ready to go

montoyam

Ok. the test case is ready to be looked at:
http://live.datatables.net/gujuziti/1/edit

(I don't understand why on the test case the editor template is not showing all the fields, but it does work in my project file so I am not concerned about that)

The updates in the ReportFiltersEditor seems to be working. There are two issues:
1) Deleting of the Report Filters does not appear to be working
2) When adding a filter record, I need to set the ReportID to the selected Report record. In the test case I get an error when I uncomment that block of code at the bottom. On my real project, I can keep that code, but it just doesn't set the value of the ReportID field.

allan

Many thanks. I'm afraid I think you are going to run into problems with this approach since it isn't using the datatable field type.

In the test case I get an error when I uncomment that block of code at the bottom. On my real project, I can keep that code, but it just doesn't set the value of the ReportID field.

The error in the test case is happening due to ReportFiltersTable.ajax.reload();, but there is no ajax option for that table.

I suspect I'd need to see a working example to help debug that. However, is there a reason not to use the datatable field type?

Allan

montoyam

but in the examples I am seeing that the datatable field type is linked to a field in the parent record. in my case I am needing it as a parent/child where the child is linked to the parent record, not a single field on the parent record. Does that make sense? Does datatable field type work like that?

allan

Sorry, it's probably just too late on a Friday, but I'm not getting it. I'm not clear what the difference is. In our nested editing example it operates as a parent / child type error?

Allan

montoyam

Ah, I see that nested editing does allow one to many:
https://editor.datatables.net/examples/datatables/mJoin.html

however, I am using MVC and my tables are in a Schema and if I am not mistaken (I have an existing open question regarding this) .net does not allow for table alias in an MJoin yet, as it does in PHP.

montoyam

I found that if I delete without prompting it works fine:

        /*
        ReportFiltersEditor.remove(this, {
            title: 'Delete record',
            message: 'Are you sure you wish to delete this record?',
            buttons: 'Delete'
        });
        */
        ReportFiltersEditor.remove(this, false).submit();

and for the issue where the ReportID was not getting populated, this seems to work:

    ReportFiltersEditor.on('initSubmit', function (e, action) {
        ReportFiltersEditor.field('ReportID').val(selectedReportID);    
    });

colin

Glad all working, thanks for reporting back,

Colin