Após várias tentativas consegui chegar no resultado esperado.
Troquei o ícone da lixeira por uma interrogação e customizei o evento de delete da tabela (ao invés de chamar o método fnWdkRemoveChild() é exibida uma DIV com os detalhes das ligações).
<table tablename="ligacoes" nodeletebutton="false" customFnDelete="detalhesLigacao(this)" id="ligacoes" noaddbutton="true" class="table table-condensed ">
<thead>
<tr>
<td style="vertical-align: middle;" align="center" class="col-sm-11">
<div class="form-group hidden-xs">
<label class="col-sm-2 text-center">Número</label>
<label class="col-sm-2 text-center">Valor</label>
<label class="col-sm-1 text-center">Ligação Corporativa</label>
<label class="col-sm-3 text-center">Empresa</label>
<label class="col-sm-3 text-center">Nome Contato</label>
</div>
</td>
</tr>
</thead>
<tbody>
<tr class="ligacoes">
<td style="vertical-align: middle;" align="center" class="col-sm-11">
<div class="form-group">
<div class="col-sm-2">
<div class="visible-xs"><b>Número</b></div>
<input type="text" class="form-control" name="numeroTelefone" id="numeroTelefone" readonly="readonly" tabindex="-1" style="text-align:center"/>
</div>
<div class="col-sm-2">
<div class="visible-xs"><b>Valor</b></div>
<input type="text" class="form-control" name="valorLigacoes" id="valorLigacoes" readonly="readonly" tabindex="-1" style="text-align:center"/>
</div>
<div class="col-sm-1">
<div class="visible-xs"><b>Ligação Corporativa</b></div>
<input type="checkbox" class="form-control" name="ligacaoCorporativa" id="ligacaoCorporativa" data-on-text="Sim" data-off-text="Não" data-size="small" onChange="habilitaContato(this)"/>
</div>
<div class="col-sm-3">
<div class="visible-xs"><b>Empresa</b></div>
<input type="text" class="form-control" name="empresaContato" id="empresaContato"/>
</div>
<div class="col-sm-3">
<div class="visible-xs"><b>Nome Contato</b></div>
<input type="text" class="form-control" name="nomeContato" id="nomeContato"/>
</div>
</div>
<div class="form-group detalhe" style="display:none">
<input type="hidden" name="numInterno" id="numInterno"/>
<div class="col-sm-11">
<div class="panel panel-primary">
<div class="panel-body"></div>
</div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
function detalhesLigacao(oElement)
{
var row = null;
var hasRow = false;
while (oElement != null)
{
if (oElement.id != null)
{
if (!hasRow && oElement.nodeName.toUpperCase() == "TR")
{
row = oElement;
hasRow = true
}
}
oElement = oElement.parentNode
}
var arrayInput = $(row).find("input");
var arrayDiv = $(row).find("div");
var elementID, elementClass, elementDIV;
$.each(arrayDiv, function(index, div)
{
elementClass = $(div).attr("class");
if (elementClass == "panel-body")
{
elementDIV = div;
}
});
$.each(arrayInput, function(index, input)
{
elementID = $(input).attr("id");
if (elementID.indexOf('numInterno') == 0)
{
if (elementDIV.innerHTML == "")
{
carregaDetalhes(elementDIV, input);
}
$("#" + elementID).parent().toggle('slow','linear');
}
});
}
function carregaDetalhes(objDIV, objINPUT)
{
var conteudo = objINPUT.value.split(';');
var mesReferencia = $("#mesReferencia").val();
var anoReferencia = $("#anoReferencia").val();
var dddOrigem = $("#dddOrigem").val();
var numOrigem = $("#numOrigem").val();
var dddDestino = conteudo[0];
var numDestino = conteudo[1];
var html = "<table class='table table-condensed'>";
try
{
var conVetor = new Array();
conVetor[0] = DatasetFactory.createConstraint("mesReferencia", mesReferencia, mesReferencia, ConstraintType.MUST);
conVetor[1] = DatasetFactory.createConstraint("anoReferencia", anoReferencia, anoReferencia, ConstraintType.MUST);
conVetor[2] = DatasetFactory.createConstraint("dddOrigem" , dddOrigem , dddOrigem , ConstraintType.MUST);
conVetor[3] = DatasetFactory.createConstraint("numOrigem" , numOrigem , numOrigem , ConstraintType.MUST);
conVetor[4] = DatasetFactory.createConstraint("dddDestino" , dddDestino , dddDestino , ConstraintType.MUST);
conVetor[5] = DatasetFactory.createConstraint("numDestino" , numDestino , numDestino , ConstraintType.MUST);
var resVetor = DatasetFactory.getDataset("al_detalhe_ligacao", null, conVetor, null);
if (resVetor.values.length > 0)
{
html += " <thead>";
html += " <tr>";
html += " <th>Categoria</th>";
html += " <th>Descrição</th>";
html += " <th>Data</th>";
html += " <th>Hora</th>";
html += " <th>Duração</th>";
html += " <th>Valor</th>";
html += " </tr>";
html += " </thead>";
html += " <tbody>";
}
for (var i=0; i<resVetor.values.length; i++)
{
html += " <tr>";
html += " <td>" + resVetor.values[i]['cod_categoria'] + "</td>";
html += " <td>" + resVetor.values[i]['categoria'] + "</td>";
html += " <td>" + resVetor.values[i]['data_ligacao'] + "</td>";
html += " <td>" + resVetor.values[i]['hr_ligacao'] + "</td>";
html += " <td>" + resVetor.values[i]['duracao'] + " min</td>";
html += " <td>" + resVetor.values[i]['vlr_ligacao'] + "</td>";
html += " </tr>";
}
}
catch(erro)
{
html += "<tr><td>Não foi possível carregar as ligações feitas para o número (" + dddDestino + ") " + numDestino + "</td></tr>";
html += "<tr><td>" + erro + "</td></tr>";
}
html += " </tbody>";
html += "</table>";
objDIV.innerHTML = html;
}
