Uncaught TypeError: Cannot read property 'oFeatures' of undefined

dynasoft

Link to test case:
Debugger code (debug.datatables.net):
Error messages shown:
Description of problem: Hi
I get this error in a child row scenario when expanding 2 rows of a main table. I click on add a row, close it with the x button, then go the that 2nd row and do the same, ie click to add a row then get the error. I think there is an issue with the initialising of the sub table. Here's my code:

            $('#tblDataTable1 tbody').on('click', 'td.details-control', function () {

                var tr = $(this).closest('tr');
                var row = dataTable1.row( tr );

                if ( row.child.isShown() ) {
                    // This row is already open - close it
                    DestroyDataTableRowChild(row);
                    tr.removeClass('shown');
                }
                else {
                    // Open this row
                    CreateDataTableRowChild(row);
                    tr.addClass('shown');
                }
            } );

            function CreateDataTableRowChild ( row ) {

                var rowData = row.data();

                // This is the table we'll convert into a DataTable
                var table = $('<table id="tblDataTable2_redux" class="table table-bordered table-striped table-hover tfReduceFontSize1" style="width:100%"><thead><tr><th>ID</th><th>ContactType</th><th>ContactID</th><th>@lblo.lblQuantity</th><th>@lblo.lblReference</th><th>@lblo.lblDescription</th><th>@lblo.lblLinkedWith</th><th>@lblo.lblDoc</th><th>@lblo.lblProductCategory</th><th>@lblo.lblPurchasePrice</th><th>@lblo.lblDiscount</th><th>@lblo.lblSalesPrice</th></tr></thead><tbody></tbody></table>');

                // Display it the child row
                row.child(table).show();

                // Initialise as a DataTable
                editor2 = CRUDContactTransItems_editor(table, rowData);

                dataTable2 = CRUDContactTransItems(table, rowData);                

            }

colin

We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

dynasoft

Thanks. Will try and pst a test case.

dynasoft

Hi

Solution was to set a different name for each sub table to reflect the row of the main table being accessed.

var table = $('<table id="tblDataTable2_redux" ...

should be

var table = $('<table id="tblDataTable2_' + rowData.DT_RowId + ...

allan

Yes - it is important to keep the id's unique - your solution looks like a good way to do that in this case. Another option I use sometimes is to have a counter that just increments on each sub-table being shown.

Allan