code for show or hide subgrid
$('#exampleEditor tbody').on('click', 'td.details-control', function () {
var tr = $j(this).closest('tr');
var row = editorTable.row( tr );
if ( row.child.isShown() ) {
// This row is already open - close it
row.child.hide();
tr.removeClass('shown');
$j("#subgrid"+(row.data().column1).trim()).DataTable().destroy(false);
$j("#subgrid"+(row.data().column1).trim()).css("display","none");
}
else {
// Open this row
format(row,tr,(row.data().column1).trim());
}
} );
code to create subgrid
function format ( row, tr,index ) {
if($("#subgrid"+index).length == 0)
{
$("body").append(getTable(index));
}
subgridTable = $("#subgrid"+index).DataTable({
"processing": true,
"serverSide": true,
"orderMulti": true,
"ajax": "serverURL",
"columns": [
{ "data": "ordernumber","width": "10%"},
{ "data": "part","width": "2%" },
{ "data": "quantity","width": "1%" },
{ "data": "duedate","width": "2%" },
{ "data": "datebinstart","width": "37%" },
{ "data": "shiftbinstart","width": "46%" },
{ "data": "weekbinstart","width": "28%" }
],
"columnDefs":[
{
"targets": [ 4,5,6 ],
"visible": false
}],
initComplete: function(){
//Code to hide subgrid html table till response is arrived
$("#subgrid"+index+"_wrapper").css("display","none");
$("#subgrid"+index).css("display","");
//need to use set timeout function as the response takes some time
setTimeout(function(){ row.child( $j("#subgrid"+index+"_wrapper").html()) .show();
tr.addClass('shown'); }, 3000);
}
});
}
function getTable(index)
{
return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;" id="subgrid'+index+'">'+
'<thead>'+
'<tr>'+
'<th>Order Number</th>'+
'<th>Part</th>'+
'<th>Quantity</th>'+
'<th>Due Date</th>'+
'<th>datebinstart</th>'+
'<th>shiftbinstart</th>'+
'<th>weekbinstart</th>'+
'</tr>'+
'</thead>'+
'</table>';
}
