Need help with row.Child because I cant make it work

[vinicius-fragazi]

I have this kind of data do populate my DataTable:
{ name: 'filename', source: 'anotherFilename', numberOfCalls: 3, children: [{ name: 'filename', numberofCalls: 5, route: 'filePath'}] }

I need to set the children objects in a child line, so when someone clicks on the line it opens the children itens as a rowChild.
I structured the table as:
`this.dtOptions = {
pagingType: 'full_numbers',
pageLength: 200,
columns: [
{
className: 'dt-control',
orderable: false,
data: null,
defaultContent: '',
},
{
title: 'name',
data: 'name'
}, {
title: 'source',
data: 'source'
}, {
title: 'numberofCalls',
data: 'numberofCalls'
}],
dom: 'Rt',
// Use this attribute to enable colreorder
colReorder: {
order: [0, 1, 2, 3, 4, 5],
fixedColumnsLeft: 2
},
responsive: true,
rowCallback: (row: Node, data: any[] | Object, index: number) => {
const self = this;
$('td', row).off('click');
$('td', row).on('click', () => {
var tr = $(this).closest('tr');
var rowLine = this.table.row( tr );

      if (rowLine.child.isShown()) {
          // This row is already open - close it
          rowLine.child.hide();
          tr.removeClass('shown');
      } else {
          // Open this row
          rowLine.child(this.createChild(rowLine, data));
          rowLine.child.show();
          tr.addClass('shown');
      }
    });
    return row;
  }
};`

and my function createChild(rowLine, data) return an jQuery object like this:

tableChildren = '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">' + '<tr>' + '<td>Full name:</td>' + '<td>' + data.name + '</td>' + '</tr>' + '<tr>' + '<td>Extension number:</td>' + '<td>' + data.source + '</td>' + '</tr>' + '</table>'; return $(tableChildren)

Everything was set as showed here https://datatables.net/examples/api/row_details.html but its now working.
No child is shown, and when I check my rowLine variable the child option is empty :

temp0.child function methodScoping() ​__dt_wrapper: true hide: function methodScoping()​ isShown: function methodScoping() length: 0 name: "" prototype: Object { … } remove: function methodScoping()​ show: function methodScoping()​ <prototype>: function ()

Can someone help how can I solve this in Angular 15?

[softsolutionsau]

Hi Vinicius,

Did you ever get this working? I am facing the same issue.

Thanks,
Shai