DataTables 1.10.1 Child row stripping Jquery plugin formatting ("tabs" & "accordion")

mvcvb2012

Hello,
I have recently started looking at DT 1.10.1 in anticipation of upgrading a ASP.NET MVC3 VB.NET application that currently uses DT 1.9.4 (JQuery 1.7, JQuery UI 1.8).

I have encountered an issue with Child rows.

Some of the MVC application's tables allow the user to expand a row to see more detail. This detail view uses Jquery "tabs" to segregate the different types of data (e.g. for a customer, the detail view may have a tab for their contact details, another for recent purchases, etc...).

Under 1.9.4 this formatting works fine, however, under 1.10.1, the view has no tabs applied and shows, for example, the contact view followed by the purchases view.

I have written two test applications one running with 1.9.4 and the other with 1.10.1.

The scripting differences between the two are given below:

--- 1.09.4 ------------------------------------------------------------------------------
$('#customers tbody').on('click', 'td.details-control', function () {
// Get this row as an object...
var tr = $(this).closest('tr');
var nTr = $(this).parents('tr')[0];
if (table.fnIsOpen(nTr)) {
// This row is already open - close it
table.fnClose(nTr);
tr.removeClass('shown');
}
else if (!table.fnIsOpen(nTr)) {
// Get tabulated view...
$.get("/Home/SampleView",
function (viewdata) {
table.fnOpen(nTr, viewdata, "details");
}
);
tr.addClass('shown');

};

--- 1.10.1 ------------------------------------------------------------------------------
$('#customers tbody').on('click', 'td.details-control', function () {
// Get this row as an object...
var tr = $(this).closest('tr');
var row = table.row(tr);
if (row.child.isShown()) {
// This row is already open - close it
row.child(false).remove();
tr.removeClass('shown');
}
else if (!row.child.isShown()) {
// Get tabulated view...
$.get("/Home/SampleView",
function (viewdata) {
row.child(viewdata, "display").show();
}
);
tr.addClass('shown');

};

These test applications are running in a Visual Studio 2012 developer web-server but I have run the Debug tool on the two versions:

DataTables 1.9.4 version's debug code: utagub

DataTables 1.10.1 version's debug code: egibus

Each debug was taken with the first row of the parent table expanded.

Looking at the DT documentation and examples I cannot find any showing a Child row that is formatted with a JQuery plugin. Does 1.10.1 not support this anymore "off the shelf", and I now need to add a few more steps or switch on an option?

Many thanks.

mvcvb2012

To help with diagnosis, below is the view that is being returned in the 'viewdata' parameter:

$("#tabs").tabs();

SampleView

• One
• Two
• Three

[ Tab One ]

[ Tab Two ]

[ Tab Three ]

mvcvb2012

Apologies, with the proper Markdown formatting:

<script type="text/javascript">
    $("#tabs").tabs();
</script>

<h3>SampleView</h3>

<div id="tabs">
    <ul>
        <li><a href="#fragment-1"><span>One</span></a></li>
        <li><a href="#fragment-2"><span>Two</span></a></li>
        <li><a href="#fragment-3"><span>Three</span></a></li>
    </ul>
    <div id="fragment-1">
        <b>[ Tab One ]</b>
    </div>
    <div id="fragment-2">
        <b>[ Tab Two ]</b>
    </div>
    <div id="fragment-3">
        <b>[ Tab Three ]</b>
    </div>
</div>

mvcvb2012

To clarify the issue I am having: my view uses JqueryUI's "tabs" to format a HTML unordered list.

DT 1.9.4's row.fnOpen() renders my view correctly.

DT 1.10.1's row.child() does not. It does not interpret the "tabs" and just displays the basic HTML.

Has anybody else encountered this issue? Is it an undocumented feature of the new version?

mvcvb2012

Hello,
Erm, no-one in the DataTables community has a response to this? I would think it pretty fundamental that this functionality has been changed and no-one else has an issue?
Any help would be appreciated in my attempt to port my application from 1.9.4 to 1.10.
Thanks