Child Datatable inside a Editor Template to ajax update a selected records child objects

Natenezz101

The AJAX Data:
data : [
{
"family_id": "001",
"family_name": "Smith",
"family_address": "100 North Road",
"family_city": "New York",
"family_state": "NY",
"parents": [
{
"firstname": "Dad",
"phone_number": "393-340-3000",
"dob": "01-01-1966",
"favorite_food": "pizza"
},
{
"firstname": "Mom",
"phone_number": "555-111-2222",
"dob": "05-15-1974",
"favorite_food": "salad"
}
]
},
{
"family_id": "002",
"family_name": "Washington",
"family_address": "553 South Street",
"family_city": "Orlando",
"family_state": "FL",
"parents": [
{
"firstname": "Mark",
"phone_number": "454-222-9845",
"dob": "11-21-1988",
"favorite_food": "Ice Cream"
},
{
"firstname": "Ashley",
"phone_number": "398-198-8911",
"dob": "08-22-1980",
"favorite_food": "Sandwiches"
}
]
},
{
"family_id": "003",
"family_name": "Young",
"family_address": "922 West Avenue",
"family_city": "Seattle",
"family_state": "OR",
"parents": [
{
"firstname": "Tom",
"phone_number": "232-544-8839",
"dob": "03-21-1980",
"favorite_food": "Chips"
},
{
"firstname": "Amber",
"phone_number": "220-222-333",
"dob": "12-22-1984",
"favorite_food": "Cereal"
}
]
}
]

Let's say you get the following records above. Three different families: Smith, Washington, & Young.
Each family has different parents, maybe even different children and with each child's name (not in current dataset example).

I would like to make a table with the following columns : family_id (Hide) | family_name | family_city | family_state
I would like to make an editor template that allows you to update each family if needed.

The editor template would contain all the fields. However, the parents as nested JSON objects would create a datatable inside/on the datatable editor's template. When the editor is presented for lets say the Smith Family. A datatable on the editor form will appear showing the parents for the Smith Family which then could be updated and posted back with the rest of the form data by clicking the update button on the editor.

Any recommendations on how to accomplish this would be great. There seems to be many use cases for this like Orders + OrderLine Items, or Students + Class Schedule.

Couple of questions that may or may not help the discussion for this post.

1) Does the initial datatable instance for showing the list of families, does the AJAX object get copied to the mini-table in the editor showing the parents?
2) Does add.rows to another table inherit the ajax / data properties of the original table or does it just copy the data over? Think about editing, deleting, and adding child elements to the family record.
3) I've noticed: var id = editEditor.field("family_id").val(); will return the id value for the current family selected to be edited in the editor template. I typically ask for it when editEditor.on( 'open', function () { HERE }. So it seems that grabbing the data here to present it works well, but does break the AJAX ability of family_id if I use it here in this way? But this question pertains more to var parents_firstname = editEditor.field("parents[].firstname").val(); Then load parents_firstname into the data: option of the new mini child table on the editor template.

How do we launch a record into the editor, use the selected record's data to build a datatable for the child array objects? (Scalar Fields and values are easy) I almost wish there was an object type for this use case. Like
Warning Fake Code, just an idea for marking up the template for the datatable editor object.
template: '#tenantFormEdit',

<datatable>

Test Data

<editor-datatable name="parents[]"></editor-datatable>
</datatable>

Thank you in advance!

allan

Unfortunately nested DataTables inside an Editor form is not something that is currently supported. It is something we plan to add, but it is likely some time out.

The closest at the moment is something like this.

Allan

Natenezz101

I wonder if there is a way to 'extend' the current editor's data / ajax object. If I could just access the AJAX Data Object and modify it. I would be okay with the data posting with the editor's update button.

Natenezz101

An editor's field:

     {
                    label: "nextedValuesArray:",
                    name: "nextedValuesArray",
                    data: function ( data, type, set ) {
                        var str = JSON.stringify(data.nextedValuesArray);
                        return str;
                    }
       }

I was able to set a field in the editor like this. Converting the JSON Object into a string. Then later...

editEditor.on( 'open', function (data) {
        var txt2 = editEditor.field("nextedValuesArray").val();
        ..now use this to draw a table in editor template html...

})

this would at least present the Nested JSON Array tied to the current record id to the editor as a string. You could send this data into a datatable on a customer editor template. However this data wouldn't map back to the ajax source data. I wish there was a way of augmenting the ajax source data, even if it didn't post until later.

Natenezz101

    editEditor.on( 'preSubmit', function ( e, data, action ) {

                alert('doing preSubmit now');

                //Collect Child Tables Contents
                var table = $('#FMSConn').DataTable();
                var mdata = table.rows().data();
                for (i = 0; i < mdata.length; i++) {
                  console.log(mdata[i]); 
                }

Basically, my overall strategy starts with converting complex JSON Nested Objects into strings with JSON.stringify. These values will be loaded into fields. Then for each datatable that I want on the editor template, I construct with a datasource variable. I should also be able to extend an editor template or inline editor for the child table. When you close the main editor, use the preSubmit event to add back the child tables row data as nested JSON in the original editors data set. I might be able to place the new data array back into the same field that I used in the first editor.

allan

You are correct - preSubmit is where you can modify the data being sent to the server (or ajax.data).

However, if it at the field level that you want to have JSON data for a single field, then a custom field type plug-in will be the way to do this. That is how it will eventually be implemented into Editor core.

Allan