Last week I did my first editor child table in an existing project using instructions found here;
https://datatables.net/blog/2019/parent-child-editing-in-child-rows#DataTable-configuration
It went flawlessly.
Today I am attempting to put a child table in a NEW editor project and am getting two error messages.
For the purpose of building up a quick test, the child table is an exact clone of the main table (child TABLE ONLY, No editing is desired for this test). Ill incorporate editor on the child table on a later test.
Here are the error messages I am getting;
![]()
Here is my cshtml, its almost stock editor-generator ( I have no idea why the code formatting is not behaving on this post, sorry guys )
@{
ViewBag.Title = "AlternativeBilling";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<!doctype html>
<style>
.DTE_Field_Input {
color: #ff6a00;
}
</style>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>DataTables Editor - GR_AlternativeBilling</title>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/jq-3.7.0/moment-2.29.4/jszip-3.10.1/dt-2.0.8/af-2.7.0/b-3.0.2/b-colvis-3.0.2/b-html5-3.0.2/b-print-3.0.2/cr-2.0.3/date-1.5.2/fh-4.0.1/kt-2.12.1/r-3.0.2/rr-1.5.0/sc-2.4.3/sp-2.3.1/sl-2.0.3/datatables.min.css">
<link href="~/Content/DataTable/generator-base.css" rel="stylesheet" />
<link href="~/Content/DataTable/editor.dataTables.min.css" rel="stylesheet" />
<script type="text/javascript" charset="utf-8" src="https://cdn.datatables.net/v/dt/jq-3.7.0/moment-2.29.4/jszip-3.10.1/dt-2.0.8/af-2.7.0/b-3.0.2/b-colvis-3.0.2/b-html5-3.0.2/b-print-3.0.2/cr-2.0.3/date-1.5.2/fh-4.0.1/kt-2.12.1/r-3.0.2/rr-1.5.0/sc-2.4.3/sp-2.3.1/sl-2.0.3/datatables.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/vfs_fonts.js"></script>
<script type="text/javascript" charset="utf-8" src="~/Scripts/DataTable/dataTables.editor.min.js"></script>
<script type="text/javascript" charset="utf-8" src="~/Scripts/DataTable/table.GR_AlternativeBilling.js"></script>
</head>
<body class="dataTables">
<div class="container">
<h1>
DataTables Editor <span>GR_AlternativeBilling</span>
</h1>
<table cellpadding="0" cellspacing="0" border="0" class="display" id="GR_AlternativeBilling" width="100%">
<thead>
<tr>
<th>Patient</th>
<th>Insurance</th>
<th>Employer</th>
<th>ContactName</th>
<th>ContactPhone</th>
<th>ContactEmail</th>
<th>Method</th>
<th>NumberOfVisits</th>
<th></th>
</tr>
</thead>
</table>
</div>
</body>
</html>`
and here is my js also pretty much stock editor-generator
/*
* 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": "PatientName"
},
{
"label": "Insurance:",
"name": "Insurance"
},
{
"label": "Employer:",
"name": "Employer"
},
{
"label": "ContactName:",
"name": "ContactName"
},
{
"label": "ContactPhone:",
"name": "ContactPhone"
},
{
"label": "ContactEmail:",
"name": "ContactEmail"
},
{
"label": "Method:",
"name": "Method"
},
{
"label": "NumberOfVisits:",
"name": "NumberOfVisits"
}
]
} );
var mainTable = new DataTable('#GR_AlternativeBilling', {
ajax: '/AlternativeBilling/DataTransport',
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(:first-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 createChild(row, data) {
// This is the table we'll convert into a DataTable
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({
ajax: '/AlternativeBilling/DataTransport',
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,
});
}
function destroyChild(row) {
var table = $("table", row.child());
table.detach();
table.DataTable().destroy();
// And then hide the row
row.child.hide();
}
});
Edited by Kevin: Syntax highlighting. Details on how to highlight code using markdown can be found in this guide
