Problem retrieving DT_RowData from child row

eponym

Scenario: I am developing a webpage that uses SVG maps, DataTables, Lit web components, jQuery and AJAX to dynamically display data about scientific projects. The SVG map allows users to interactively select a location(s), which then triggers an AJAX call to populate the DT with all the projects related to that location(s). Each entry in the DT has a disclosure button, that when clicked, shows a child row that displays details about the project using a web component with nested web components. This all is currently working very nicely!

Problem: As part of the interactivity and user feedback, I have the DT 'light-up' the location on the SVG map when a user mouses over a row to indicate where that specific project is located. This is accomplished by providing an array of location codes in the JSON return using DT_RowData and grabbing it in a mouseover function. This works fine with all of the parent rows, but I cannot get it to work with the child rows. My approach to accomplish this has been to grab the DT_RowData from the parent row on the click function of the td.details-control and add after the .show() line. However, when I mouseover the child row my console says that it is undefined, even though it appears to be defined correctly in the console log on the click function.

Click function that opens/closes detail:

$('#data_table tbody').on('click', 'td.details-control', function () {
      var tr = $(this).closest('tr');
      var row = table.row(tr);

      //Get DT_RowDat from parent//

      var parentRow = $(this).closest('tr').prev()[0];
      var rowData = table.row(parentRow).data().DT_RowData;

      if (row.child.isShown()) {
        row.child.hide();
        tr.removeClass('shown');
      } else {
        row.child(format(row.data())).show();

         //Set DT_RowDat from parent//
        row.child().data('DT_RowData', rowData);

        *console.log(row.child().data());

        tr.addClass('shown');
      }
    });

*Console Log Output:

DT_RowData: Object { codes: (2) […] }
codes: Array [ "CAF", "BF" ]
<prototype>: Object { … }

Mouseover function that triggers map highlight
​

$('#data_table tbody').on('mouseover', 'tr', function (e) {
            **console.log(table.row(this).data());

            // var map_codes = table.row(this).data().DT_RowData.codes;
            // for (var t = 0; t < map_codes.length; t++) {
            //   selColor = Mapsearch_Handler.codes.colors[map_codes[t]];
            //   if (map_codes[t] == 'GBL') {
            //     $('#' + map_codes[t]).css({
            //       stroke: selColor,
            //       'stroke-width': '10',
            //     });
            //   } else {
            //     $('#' + map_codes[t]).css({fill: selColor});
            //   }
            // }
          });

**Console Log Output:

1) Parent-
Object { name: "<b>Charcoal (SERVIR)</b><br>Charcoal Production Site Monitoring Service for West Gonja and Sene Districts in Ghana ", status: "Active", detail: "../data/config_4.json", DT_RowId: 14377, DT_RowData: {…} }
​
DT_RowData: Object { codes: (2) […] }
codes: Array [ "CAF", "GH" ]
<prototype>: Object { … }
DT_RowId: 14377
detail: "../data/config_4.json"
name: "<b>Charcoal (SERVIR)</b><br>Charcoal Production Site Monitoring Service for West Gonja and Sene Districts in Ghana "
status: "Active"
<prototype>: Object { … }

2) Child-
undefined

Thoughts?

Thanks!

Edited by Allan - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

allan

Can you link to a page showing the issue please?

I suspect the issue is the selector:

$('#data_table tbody').on('mouseover', 'tr',

It is operating on every row inside the data_table element - regardless of if it is a parent row or a child row. Try:

$('#data_table > tbody').on('mouseover', '> tr',

Allan

eponym

Thanks for your quick response Allan! Unfortunately I cannot share the page as I am developing locally on my machine, and am connecting to a database on a development server which sits behind a firewall that I cannot open.

I made the changes to the selector as you suggested, but the data on the mouseover is still undefined. Is row.child().data('DT_RowData', rowData); the proper way of storing data on a row?

Thanks!

David

kthorngren

Is row.child().data('DT_RowData', rowData); the proper way of storing data on a row?

No, that won't work.

I created a test case for you. The test case doesn't need your data but just needs to show the issue.
https://live.datatables.net/qalosusu/1/edit

If you inspect the HTML created when opening a child row you will see an additional tr inserted into the table. This is not seen as a Datatables row so the Datatables API's won't work. You will also notice that the parent row has the hasChild classname added when row().child() creates the child row.

The test case uses the selector, > tr, that Allan suggested but also checks to see if the data obtained is undefined. If undefined it gets the previous row (which is the parent row) with the classname hasChild.

There may be a better way to do this.

Kevin

eponym

Thanks Kevin! Works perfectly and is much more of an elegant solution!
I really appreciate it.

David