Child Editor when editing shows data from Parent editor

Child Editor when editing shows data from Parent editor

dpanscikdpanscik Posts: 202Questions: 47Answers: 0

I'm sure as often is the case the issue is an easy one. Just not sure where to look.

I started with editor generator and attempted to add in a child editor as per the instructions here;
https://datatables.net/blog/2019/parent-child-editing-in-child-rows#DataTable-configuration

I am seeing two symptoms which I believe might be related.

Symptom #1 - When opening the parent table, I am greeted by an error message regarding the child editor.

Symptom #2 - When I try to edit a child table, the editor is loaded with data from the parent, not the child.




Step 1 - Click on the carrot to open the child table




Step 2 - Click on the child table's edit button




Step 3 - Editor should open up with the 2 fields from the child table, instead editor opens up with the fields from the parent table.

here is my code;


/* * Editor client script for DB table GR_AlternativeBilling * Created by http://editor.datatables.net/generator */ addEventListener("DOMContentLoaded", function () { var editor = new DataTable.Editor( { ajax: '/AlternativeBilling/DataTransport', table: '#GR_AlternativeBilling', fields: [ { "label": "Patient Name", "name": "PatientName" }, { "label": "Insurance:", "name": "Insurance" }, { "label": "Employer:", "name": "Employer" }, { "label": "Contact Name:", "name": "ContactName" }, { "label": "Contact Phone:", "name": "ContactPhone" }, { "label": "Contact Email:", "name": "ContactEmail" }, { "label": "Method:", "name": "Method" }, { "label": "Number Of Visits:", "name": "NumberOfVisits" } ] }); function createChild(row, data) { // This is the table we'll convert into a DataTable //var table = $('<table class="display childGrid" width="100%"/>'); var table = $('<table class="display childGrid" width="100%"/>'); // Display it the child row row.child(table).show(); // Initialise as a DataTable var childTable = table.DataTable({ "orderCellsTop": true, "processing": true, // for show progress bar "language": { "processing": '<span class="sr-only h1" >Loading...</span> ' }, "filter": false, // this is for disable filter (search box) "orderMulti": false, // for disable multiple column at once "pageLength": 25, "lengthChange": true, "search": { "caseInsensitive": true }, "responsive": false, //for automatic child tables ajax: '/AlternativeBilling/DataTransport_Notes?TableName=AlternativeBilling&TableID=' + data.TableID, columns: [ { "data": "NoteType", "title": "Note Type", }, { "data": "Note", "title": "Note", }, { "data": "EditedBy", "title": "Edited By", }, { "data": "EditedDate", "title": "Edit Date", }, ], layout: { topStart: { buttons: [ { extend: 'create', editor: editor }, { extend: 'edit', editor: editor }, { extend: 'remove', editor: editor } ] } }, select: true, processing: true, }); } var mainTable = new DataTable('#GR_AlternativeBilling', { "search": { "caseInsensitive": true }, "serverSide": true, ajax: { "url": "/AlternativeBilling/DataTransport", "type": "POST", "datatype": "json", }, columns: [ { "data": "PatientName" }, { "data": "Insurance" }, { "data": "Employer" }, { "data": "ContactName" }, { "data": "ContactPhone" }, { "data": "ContactEmail" }, { "data": "Method" }, { "data": "NumberOfVisits" }, { className: 'details-control dt-control', orderable: false, data: null, defaultContent: '', width: '10%' }, ], layout: { topStart: { buttons: [ { extend: 'create', editor: editor }, { extend: 'edit', editor: editor }, { extend: 'remove', editor: editor } ] } }, select: true, processing: true, }); // Activate an inline edit on click of a table cell mainTable.on('click', 'tbody td:not(:last-child)', function (e) { editor.inline(this); }); $('#GR_AlternativeBilling tbody').on('click', 'td.details-control', function () { var tr = $(this).closest('tr'); var row = mainTable.row(tr); if (row.child.isShown()) { // This row is already open - close it destroyChild(row); tr.removeClass('shown'); } else { // Open this row //format(row.data()); createChild(row, row.data()); tr.addClass('shown'); } }); function updateChild(row) { $("table", row.child()) .DataTable() .ajax.reload(); } function destroyChild(row) { var table = $("table", row.child()); table.detach(); table.DataTable().destroy(); // And then hide the row row.child.hide(); } var childEditor = new $.fn.dataTable.Editor({ ajax: { url: '/AlternativeBilling/DataTransport_Notes', data: function (d) { d.site = rowData.TableID; } }, table: table, fields: [{ label: "NoteType:", name: "NoteType" }, { label: "Note:", name: "Note" }, { label: "EditedBy", name: "EditedBy" }, { label: "EditedDate", name: "EditedDate" } ], select: true, processing: true, }); });

Any ideas of things I can check here?

This question has an accepted answers - jump to answer

Answers

  • kthorngrenkthorngren Posts: 21,388Questions: 26Answers: 4,961

    I am greeted by an error message regarding the child editor.

    The blog has a link to the full Javascript code. You will want to refer to the full code. First you will see that the child editor is created in the createChild() function which is where the table variable is created.

    Editor should open up with the 2 fields from the child table, instead editor opens up with the fields from the parent table.

    In the child Datatable the following buttons are created:

                        buttons: [
                            { extend: 'create', editor: editor },
                            { extend: 'edit', editor: editor },
                            { extend: 'remove', editor: editor }
                        ]
    

    They are assigned to the main table editor. They need to be assigned the chiled editor, for example:

                        buttons: [
                            { extend: 'create', editor: childEditor },
                            { extend: 'edit', editor: childEditor },
                            { extend: 'remove', editor: childEditor }
                        ]
    

    Kevin

  • dpanscikdpanscik Posts: 202Questions: 47Answers: 0

    Thanks Kevin. Making progress here.

    When I change the buttons to control childEditor, the child table data does not load and I get a console error message.




    Here are the child table buttons set incorrectly to control the parent editor




    The data in the child table loads




    Now when I change the child table buttons to control the child editor




    The data in the child table data does not load




    and i get the following console error message saying there is an error with dataTables.editor.min.js on line 6

  • kthorngrenkthorngren Posts: 21,388Questions: 26Answers: 4,961

    Did you move the child editor code inside the createChild() function and place it before the Datatables init code?

    Kevin

  • dpanscikdpanscik Posts: 202Questions: 47Answers: 0

    i have indeed. here is my code reshuffled

    /*
     * Editor client script for DB table GR_AlternativeBilling
     * Created by http://editor.datatables.net/generator
     */
    
    addEventListener("DOMContentLoaded", function () {
        function createChild(row, data) {
    
            // This is the table we'll convert into a DataTable
            //var table = $('<table class="display childGrid" width="100%"/>');
            var table = $('<table class="display childGrid" width="100%"/>');
            // Display it the child row
            row.child(table).show();
    
            // Initialise as a DataTable
            var childTable = table.DataTable({
                "orderCellsTop": true,
                "processing": true, // for show progress bar
                "language": {
                    "processing": '<span class="sr-only h1" >Loading...</span> '
                },
                "filter": false, // this is for disable filter (search box)
                "orderMulti": false, // for disable multiple column at once
                "pageLength": 25,
                "lengthChange": true,
                "search": {
                    "caseInsensitive": true
                },
                "responsive": false, //for automatic child tables
                ajax: '/AlternativeBilling/DataTransport_Notes?TableName=AlternativeBilling&TableID=' + data.TableID,
                columns: [
    
    
                    {
                        "data": "NoteType",
                        "title": "Note Type",
    
    
                    },
                    {
                        "data": "Note",
                        "title": "Note",
    
                    },
                    {
                        "data": "EditedBy",
                        "title": "Edited By",
    
                    },
                    {
                        "data": "EditedDate",
                        "title": "Edit Date",
    
                    },
    
    
                ],
                layout: {
                    topStart: {
                        buttons: [
                            { extend: 'create', editor: childEditor },
                            { extend: 'edit', editor: childEditor },
                            { extend: 'remove', editor: childEditor }
                        ]
                    }
                },
    
                select: true,
                processing: true,
            });
    
    
            var childEditor = new $.fn.dataTable.Editor({
                ajax: {
                    url: '/AlternativeBilling/DataTransport_Notes',
                    data: function (d) {
                        d.site = rowData.TableID;
                    }
                },
                table: table,
                fields: [{
                    label: "NoteType:",
                    name: "NoteType"
                }, {
                    label: "Note:",
                    name: "Note"
                }, {
                    label: "EditedBy",
                    name: "EditedBy"
                }, {
                    label: "EditedDate",
                    name: "EditedDate"
                }
                ],
    
                select: true,
                processing: true,
            });
    
        }
    
    
        var editor = new DataTable.Editor({
            ajax: '/AlternativeBilling/DataTransport',
            table: '#GR_AlternativeBilling',
            fields: [
                {
                    "label": "Patient Name",
                    "name": "PatientName"
                },
                {
                    "label": "Insurance:",
                    "name": "Insurance"
                },
                {
                    "label": "Employer:",
                    "name": "Employer"
                },
                {
                    "label": "Contact Name:",
                    "name": "ContactName"
                },
                {
                    "label": "Contact Phone:",
                    "name": "ContactPhone"
                },
                {
                    "label": "Contact Email:",
                    "name": "ContactEmail"
                },
                {
                    "label": "Method:",
                    "name": "Method"
                },
                {
                    "label": "Number Of Visits:",
                    "name": "NumberOfVisits"
                }
            ]
        });
    
    
    
    
    
        var mainTable = new DataTable('#GR_AlternativeBilling', {
            "search": {
                "caseInsensitive": true
            },
            "serverSide": true,
            ajax: {
                "url": "/AlternativeBilling/DataTransport",
                "type": "POST",
                "datatype": "json",
            },
            columns: [
    
                {
                    "data": "PatientName"
                },
                {
                    "data": "Insurance"
                },
                {
                    "data": "Employer"
                },
                {
                    "data": "ContactName"
                },
                {
                    "data": "ContactPhone"
                },
                {
                    "data": "ContactEmail"
                },
                {
                    "data": "Method"
                },
                {
                    "data": "NumberOfVisits"
                },
                {
                    className: 'details-control dt-control',
                    orderable: false,
                    data: null,
                    defaultContent: '',
                    width: '10%'
                },
            ],
            layout: {
                topStart: {
                    buttons: [
                        { extend: 'create', editor: editor },
                        { extend: 'edit', editor: editor },
                        { extend: 'remove', editor: editor }
                    ]
                }
            },
    
            select: true,
            processing: true,
        });
    
    
    
    
        // Activate an inline edit on click of a table cell
        mainTable.on('click', 'tbody td:not(:last-child)', function (e) {
            editor.inline(this);
        });
    
    
        $('#GR_AlternativeBilling tbody').on('click', 'td.details-control', function () {
    
    
            var tr = $(this).closest('tr');
            var row = mainTable.row(tr);
    
            if (row.child.isShown()) {
                // This row is already open - close it
                destroyChild(row);
                tr.removeClass('shown');
            }
            else {
                // Open this row
                //format(row.data());
                createChild(row, row.data());
                tr.addClass('shown');
            }
    
        });
    
        function updateChild(row) {
            $("table", row.child())
                .DataTable()
                .ajax.reload();
        }
    
    
        function destroyChild(row) {
            var table = $("table", row.child());
            table.detach();
            table.DataTable().destroy();
    
            // And then hide the row
            row.child.hide();
        }
    
    
    
    });
    
  • kthorngrenkthorngren Posts: 21,388Questions: 26Answers: 4,961
    Answer ✓

    You need to initialize the child editor before the Datatables init code so that the childEditor variable is created to be used with the child Datatable button config:

                        buttons: [
                            { extend: 'create', editor: childEditor },
                            { extend: 'edit', editor: childEditor },
                            { extend: 'remove', editor: childEditor }
                        ]
    

    That why you are getting cannot read properties of null because childEditor doesn't exist.

    Kevin

  • dpanscikdpanscik Posts: 202Questions: 47Answers: 0

    Ahh. Got it. I misunderstood. I thought you were saying the child table/editor needs to be before the parent table/editor.

    I see now that child editor needs be be before the child table.

    All fixed. Its working now.

    Thank you.

Sign In or Register to comment.