Datatable within Datatable within Datatable issue

Ronin2490

I have an issue with rendering multiple datatables within datatables. I have a parent list that will expand to show details of that record. Those details will be of 2 more datatables, one is just a standard table with only sorting and pulling data from another source while the other will be another datatable that also has the ablility to show details of that record, which in turn will be a standard datatable with sorting and populating from a datasource. The user should only have one parent record open at a time. My issue is that when the entire record details tree is expanded and the user switches to expand another record i get either a property cannot be found at '1' or after a certain amount of click of opening records to the last child then switching to another parent the last details table within that parent item will automatically close the details after a user opens it.

drakula1234

I am looking something like this. Can you share a sample example of how to open datatable within a new row. Thanks!

Ronin2490

This example will get you to open a new datatable within a datatable, and only allow one row open at a time. if you try to open multiple rows at a time, datatables will get conflicting errors with tables of the same name.


[code]

function CreateTransactionDatatable(m_DataTable, nTr) {
var transOpen = [];
var oData = m_DataTable.fnGetData(nTr);
var zData = m_DataTable.fnGetPosition(nTr);

var totalrequested = 0;
m_TransactionTable = $('#Tranactionstable').dataTable({
"bProcessing": true,
"bPaginate": false,
"bServerSide": true,
"bLengthChange": false,
"bJQueryUI": true,
"aoColumns": [
{
"mDataProp": null,
"sClass": "control center childtrans",
"sDefaultContent": ''
},
{ "bSortable": false, "sWidth": "50px" },
{ "bVisible": false },
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,

],
"sAjaxSource": "<%=SPContext.Current.Web.Url%>/_vti_bin/419WebService.asmx/MainGetTransactionItems",
"fnCreatedRow": function (nRow, aData, iDataIndex) {

return nRow;
},
"fnDrawCallback": function () { totalrequested = 0; },

"fnServerData": function (sSource, aoData, fnCallback) {
$.ajax({
"type": "post",
"dataType": "json",
"contentType": "application/json",
"url": sSource,
"data": ConvertAmendmentToJSON(aoData, oData[1]),
"success": function (msg) {
var json = $.parseJSON(msg.d);
fnCallback(json);
},
"error": function (o) {
alert('error in callback, you might want to replace this with debugger');
}
});

}


});

m_TransactionTable.fnDraw();




$('#Tranactionstable td.childtrans').live('click', function () {

var nTr = this.parentNode;
var i = $.inArray(nTr, transOpen);

$(transOpen).each(function () {
if (this !== nTr) {
$('td.childtrans', this).click();
m_TransactionTable.fnClose(this);
}
});

if (i === -1) {



var nMoreDetailsRow = m_TransactionTable.fnOpen(nTr, TransactionDetails(m_TransactionTable, nTr), 'details');
$('div.innerDetails2', nMoreDetailsRow).slideDown();
transOpen.push(nTr);
CreateTransactionAmendmentsdataTable(m_TransactionTable, nTr);
//TransactionAmendmentCurrentOpenParentRow = $("#innerDetails2").closest('tr');
$('img', this).attr('src', sImageUrl + "details_close.png");
}
else {
$('img', this).attr('src', sImageUrl + "details_open.png");
$('div.innerDetails2', $(nTr).next()[0]).slideUp(function () {
m_TransactionTable.fnClose(nTr);
transOpen.splice(i, 1);
});
}

});


$("#Tranactionstable th").css({ 'width': '' });




}



function CreateTransactionAmendmentsdataTable(m_TransactionTable, nTr) {


var oData = m_TransactionTable.fnGetData(nTr);

m_TransactionAmendmentsDataTable = $('#transactionAmendments').dataTable({
"bProcessing": true,
"bServerSide": true,
"bAutoWidth": false,
"bJQueryUI": true,
"bPaginate": false,
"bLengthChange": false,
"aoColumns": [

{ "bSortable": false, "sWidth": "20px" },
{ "bVisible": false },
null,
null,
null,
{ "bVisible": false }


],
"sAjaxSource": "<%=SPContext.Current.Web.Url%>/_vti_bin/419WebService.asmx/GetMainAmendmentItems",


"fnServerData": function (sSource, aoData, fnCallback) {
$.ajax({
"type": "post",
"dataType": "json",
"contentType": "application/json",
"url": sSource,
"data": ConvertAmendmentToJSON(aoData, oData[1]),
"success": function (msg) {
var json = $.parseJSON(msg.d);
fnCallback(json);
},
"error": function (o) {
alert('error in callback, you might want to replace this with debugger');
}
});

}


});

m_TransactionAmendmentsDataTable.fnDraw();



}

function TransactionDetails(m_TransactionTable, nTr) {
var oData = m_TransactionTable.fnGetData(nTr);

var sOut = '' +
'
Amendments' +
' Edit' +
'Amendment ID' +
'Title' +
'Request' +
'Notes' +
'Parent ID' +
' New Amendment

' +
'';

return sOut;
}

[/code]

drakula1234

Thank you very much...