RowGroup jquery selector for group TR

barncattech

I am using the RowGroup extension and it works quite well (thanks for this!). I am trying to implement a collapse expand feature that I found, and the problem I am having is getting the jquery selector for the group to trigger.

When I use the inspector in Chrome on a group row, I see something like this:

<tr data-name="01 74 10" class="dtrg-group dtrg-start dtrg-level-0">
    <td colspan="8">01 74 10 (54)</td>
</tr>

Here is one selector I have tried, that seems like it should work:

$("tr.dtrg-group td").click( function () {
    alert("click");
}); 

The way my app works is:
- the table starts out with no data
- user clicks a btn which opens a modal dialog with a multiselect list of csi codes (categories of work)
- when user selects a code, I do an ajax call to get records with that code
- I loop through this list and call add rows with row.add

It uses bootstrap. Thinking that might be interfering, I have commented it out, with no change.

So- what could cause my jquery selector to fail?

What is particularly annoying is that there is a working example, and the code is essentially like mine, but simpler. I've always felt that if I have a working example and a non-working example, I should be able to spot the difference, but so far it has eluded me.
Simple working example I found

Here is my datatables declaration:

var addtable = $('#contaddedtable').DataTable(
{
    "dom": 'Bfrtip',
    "processing": true,

    drawCallback: function( settings ) {
      $.busyLoadFull("hide");
    },

    "columnDefs": 
    [{
        targets: 0,
        data: null,
        defaultContent: '',
        orderable: false,
        className: 'select-checkbox'
    }   
    ,{
        "targets": [1,2],
        "createdCell": function (td, cellData, rowData, row, col)
        {
            if ( rowData.inUse == 1 )
            {
                $(td).addClass('inUse');
            }
        }
    }]

    ,rowGroup: {
        dataSrc: ['CSI']
    ,startRender: function (rows, group) {
      var collapsed = !!collapsedGroups[group];

      rows.nodes().each(function (r) {
          r.style.display = collapsed ? 'none' : '';
      });    

      // Add category name to the <tr>. NOTE: Hardcoded colspan
      var csiString = csiAssocArr[group];
      return $('<tr/>')
          .append('<td colspan="8">' + group + ' (' + rows.count() + ')</td>')
          .attr('data-name', group)
          .toggleClass('collapsed', collapsed);
    }
    }
    ,"columns": 
    [
        {
            render: function(data, type, row){
                return("&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;");
            }
        }
        ,{ "data": "inUse", "visible": false}
        ,{ "data": "Company",
            render: function(data, type, row){

                var prefClass = "";
                switch (row.Pref)
                {
                    case "1":
                        prefClass = "preferred_cont";
                        break;
                    case "2":
                        prefClass = "caution_cont";
                        break;
                    case "3":
                        prefClass = "donotuse_cont";
                        break;
                }

                return( "<span class='edit_cont " + prefClass + "' contId='" + row.ID + "'>" + data + "</span>");

            } 
        }
        ,{ "data": "CSI" }
        ,{ "data": "Pref" }
        ,{ "data": "NumInvits"} 
        ,{ "data": "Accepted",   "visible": true }
        ,{ "data": "AcceptPct" }
        ,{ "data": "DeclinePct" }
        ,{ "data": "ProposalPct" }  
        ,{ "data": "ViewedPct" }            
        ,{ "data": "AwardPct" } 
        ,{ "data": "NoRespPct" }
        ,{ "data": "NumAwards"}
        ,{ "data": "locations"}
        ,{ "data": "flags", "visible":      false}
        ,{ "data": "ID", "visible":         false}
        ,{ "data": "MD" , "visible":        false, className: "details" }
        ,{ "data": "Balt" , "visible":  false, className: "details" }
        ,{ "data": "DC" , "visible":        false, className: "details" }
        ,{ "data": "NVa" , "visible":   false, className: "details" }
        ,{ "data": "VA" , "visible":        false, className: "details" }
        ,{ "data": "DE" , "visible":        false, className: "details" }
        ,{ "data": "WV" , "visible":        false, className: "details" }
        ,{ "data": "PA" , "visible":        false, className: "details" }
        ,{ "data": "MS" , "visible":        false, className: "details" }
        ,{ "data": "Un" , "visible":        false, className: "details" }
    ]
    ,paging: false
    ,"scrollY": "500px"
    ,"scrollX":true
    ,select: {
    'style': 'multi',
    selector: 'td:first-child'
    }
    ,dom: 'Bfrtip'
    ,buttons: [
        'selectAll',
        'selectNone',
        {
            text: "Add Selected to Project",
            action: function(){
                    var selRows = addtable.rows( { selected: true } ).data();
                    var selIds = [];
                    for (var i = 0; i < selRows.length; i++)
                    {
                        selIds.push(selRows[i].ID);
                    }

                    $.ajax({        
                        type: "POST",
                        url: "scripts/addContsToProj_TEST.php",
                        data: {"projectId": projid, "selections": selIds},
                        success: function(addedIds) {
                                $('#catselect').change();
                        }
                    });
                }
        }
    ]

    ,"language": {
        search: 'Filter Displayed Contractors:',
        searchPlaceholder: 'search all fields'
    }
}); 

kthorngren

See if my comment at the end of this thread helps. If not please provide a link to your page or a test case showing the issue wo we can help debug.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

barncattech

I've got it working now. I had tried your exact code for the listener, which I had gotten from the example, but it failed because I had neglected to change "table" to my table var name.
Sometimes it helps to have somebody else weigh in. Thanks for taking the time to help!