Clickable column to go to related record in child tables

RyanStanford

Same project regarding my previous posts... I now currently have the parent rows to work perfectly and appear as I want, with a button to go to that main database that my data comes from.

My question is this, I'm trying to add that same "go to Record" functionality on the child rows as well... I'm not sure how to work it, as the parent record has `table.row(); to pull from.

I'll post the pertinent code to hopefully reveal this mystery.

The format function to create the child records in question:

   function format ( d, ChildRecords ) {
    //th headers are for Child Records Fields    
    var str = '<div class="slider"><table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;"><th><th>Fringe Type</th><th>Fringe Status</th><th>ADP Union Code</th><th>Fringe Rate</th><th>Earning Distribution</th><th>Works Hours Authorized</th><th>Compensated Hours Authorized</th>';

//Adds a row to expanded area for each Child Record
        for(var i=0; i < ChildRecords.length; i++){
    var WBR = ChildRecords[i].WorkHours.replace(/;/g, "<br>");
    var CBR = ChildRecords[i].CompHours.replace(/;/g,"<br>");
        str += '<tr>'+
        '<td class="GetChild"></td>'+
            '<td>'+ChildRecords[i].FringeType+'</td>'+            
            '<td>'+ChildRecords[i].FringeStatus+'</td>'+
            '<td>'+ChildRecords[i].ADPCode+'</td>'+
        '<td>$'+ChildRecords[i].FringeRate+'</td>'+
        '<td>'+ChildRecords[i].EarningDist+'</td>'+
        '<td>'+WBR+'</td>'+
        '<td>'+CBR+'</td>'+
            '</tr>';
        }

        str += '</table></div>';
    return str;
}
});

Here are the event handlers for both the Parent and child record "Go to Record".
Again, Parent works great... Child the row variable errors out.

//Event Listener to go to Parent Record 
$('#example tbody').on('click', 'td.GoToRecord', function(){ 
        var tr = $(this).closest('tr');
        var row = table.row( tr );
parent.window.location= "https://<domain>.quickbase.com/db/<Tid>?a=dr&rid="+ParentTable[(row[0])].RecordID;
 });


$('#example tbody').on('click', 'td.GetChild', function(){ 
        var Ctr = $(this).closest('tr');
console.log("Ctr defined:");    
console.log(Ctr);
        var Crow = table.row( Ctr );
console.log("Crow defined:");
parent.window.location= "https://<domain>.quickbase.com/db/<Tid>?a=dr&rid="+ChildTable[(Crow[0])].RecID;
 });

kthorngren

The problem is the child table is a standard HTML table not a Datatable. So the Datatables APIs won't work.

What are you trying to do with the child, create another child table perhaps?

You can make the child table a Datatable. There are lots of threads for this and I can dig up some examples if thats what you are doing.

Kevin

RyanStanford

@kthorngren in concept, this makes complete sense...

I'll do some searching for myself, but if you are able to find an example easy enough, that would be greatly appreciated as well.

kthorngren

I forgot about this blog note:
https://datatables.net/blog/2019-01-11

It will give you some ideas. If you aren't interested in the Editor portion you can ignore that part of the code. Here is one of my examples:
http://live.datatables.net/gohefoki/1/edit

Hopefully between the two it will give you a start. Please post any questions.

Kevin

RyanStanford

Ok, I feel like I'm almost there... When I test what I have, I'm getting an error stating:

DataTables warning: table id=ChildRec5 - Requested unknown parameter 'FringeType' for row 0, column 0. For more information about this error, please see http://datatables.net/tn/4

I have the ChildRecords populated into a JSON array, which I have printing to the console for troubleshooting, shown here:

(7) [{…}, {…}, {…}, {…}, {…}, {…}, {…}]
0: {RecID: "51", FringeType: "H&W Deferred",  …}
1: {RecID: "95", FringeType: "H&W Deferred",  …}
2: {RecID: "90", FringeType: "H&W Deferred",  …}
3: {RecID: "52", FringeType: "Uniform Allowance",  …}
4: {RecID: "96", FringeType: "Uniform Allowance",  …}
5: {RecID: "91", FringeType: "Uniform Allowance",  …}
6: {RecID: "50", FringeType: "401K Employer Non-Match",  …}
length: 7

Here is the Showing of the child table if it's not already shown:

       else {
            // Open this row
            console.log("ChildRecords: ");
            console.log(ChildRecords);
            row.child( format(ChildRecords), 'no-padding' ).show();
            var id = "ChildRec"+rowData.RecordID;
          $('#' + id).DataTable({
          dom: "t",
          data: [ChildRecords],
          columns: [
            { data: "FringeType"},
            { data: "FringeStatus"},
            { data: "ADPCode"},
            { data: "FringeRate"},
            { data: "EarningDist"},
            { data: "WorkHours"},
            {data: "CompHours"}
          ],
          scrollY: '100px',
          select: true,
        });
            
            
            tr.addClass('shown');
 
            $('div.slider', row.child()).slideDown();
        }

kthorngren

You don't want to use data: [ChildRecords],. You will want to use data: ChildRecords,. Your data is already in an array. My example the data is only one row and not in an array which is why it uses the [] notation.

Kevin

RyanStanford

@kthorngren ... normally it's the easy things that mess you up and are easy to overlook... That solved that issue.

I'm using the "slider" animation for opening and closing the child records, but my issue is that the div.slider element is making the headers of the child table to only be in the same width as the first column of the parent table.

The Child Data goes across the width of the parent table as expected... but the headers aren't.

kthorngren

Haven't tried the slider with a Datatables child. Maybe you need to use columns.adjust() after the slider.

Kevin

RyanStanford

To add to the strange, it appears when columns are rearranged, the columns adjust is fired off as well.

It looks like the individual table for the headers is set to width 0... the resort then appears to set the widths to auto based on width of the page. Not an answer here, just an observation.

RyanStanford

Helps if I properly implement the columns.adjust like the example on that page suggests.

@kthorngren the columns.adjust was exactly what I was looking for.

kthorngren

Cool, glad its working!

Kevin