Nested Collapsible Rows - Collapsed on Load instead of Expanded?

zgoforth

I fixed my issue and I have all the collapsible and nested collapsible rows working perfectly. The only issue is I can't figure out how to have them be collapsed on page load instead of already expanded, because it kind of defeats the whole purpose of having them be able to be collapsible.

$(document).ready(function() {
    var collapsedGroups = {};
    var top = '';
    var parent = '';
    
  var table = $('#myTable').DataTable( {
    "pageLength": 50,
    "columns": [
      { "data": "Program", visible: false },
      { "data": "Deliverable", visible: false },
      { "data": "To" },
      { "data": "Date" },
      { "data": "Approved" },
      { "data": "Notes" }
    ],
    
    dom: 'Bfrtip',
    buttons: [
        'copy','csv','excel','pdf','print'
    ],
    order: [[0, 'asc'], [1, 'asc'] ],   
    rowGroup: {
            dataSrc: [
            'Program',
            'Deliverable'
            ],
            startRender: function (rows,group,level){
                var all;
                if (level === 0) {
                    top = group;
                    all = group;
                } else if (level === 1) {
                    parent = top + group; 
                    all = parent; 
                    // if parent collapsed, nothing to do
                    if (!!collapsedGroups[top]) {
                        return;
                    }                   
                } else {
                    // if parent collapsed, nothing to do
                    if (!!collapsedGroups[parent]) {
                        return;
                    } 
                    all = top + parent + group;
                }

                var collapsed = !!collapsedGroups[all];
              
              rows.nodes().each(function(r) {
                r.style.display = collapsed ? 'none' : '';
              });
              //Add category name to the <tr>.
              return $('<tr/>')
                .append('<td colspan="8">' + group + ' (' + rows.count() + ')</td>')
                .attr('data-name', all)
                .toggleClass('collapsed', collapsed);
            
            }
            
        }
  } );

kthorngren

You will need to debug collapsedGroups to see what is happening. Maybe start with line 47.

Kevin

zgoforth

@kthorngren I am trying to debug it in my Sources tab of DevTools and cannot see anything

zgoforth

I ran the debugger and there were no errors

zgoforth

@kthorngren any idea what the issue is?

kthorngren

any idea what the issue is?

Nope. Nothing obvious stands out. Thats why I suggested that you need to debug the code. Or you can post a test case if you want one of us to debug for you.

Kevin

zgoforth

Creating a test case as we speak

zgoforth

@kthorngren so I am trying to debug the datatable with the chrome developer tools, and I am not too sure what I am looking for. I put a breakpoint at line 47 where you recommended starting but I do not see anything

kthorngren

but I do not see anything

I'm not sure what that means. If you are having problems using the debugger then use console.log statements.

Kevin

zgoforth

@kthorngren I did that aswell console.log(collapsed); and nothing happens

kthorngren

You will need to debug collapsedGroups

This is what I suggested you look at.

and nothing happens

Maybe its empty. You could do something like this console.log('collapsed:', collapsed);.

Kevin

zgoforth

This is what it returns

Object
AMMOMeeting Minutes: true
AMMOMonthly Status Report (MSR): true
__proto__: 
constructor: ƒ Object()hasOwnProperty: ƒ hasOwnProperty
()isPrototypeOf: ƒ isPrototypeOf()
propertyIsEnumerable: ƒ propertyIsEnumerable()
toLocaleString: ƒ toLocaleString()
toString: ƒ toString()
valueOf: ƒ valueOf()
__defineGetter__: ƒ __defineGetter__()
__defineSetter__: ƒ __defineSetter__()
__lookupGetter__: ƒ __lookupGetter__()
__lookupSetter__: ƒ __lookupSetter__()
get __proto__: ƒ __proto__()
set __proto__: ƒ __proto__()
Deliverables.aspx?PageView=Shared&InitialTabId=Ribbon.WebPartPage&VisibilityContext=WSSWebPartPage:662 Object

zgoforth

When you drop down everything that it returns in the Dev Tools, there is like 100 lines worth of info, I read it all but I don't see anything that would cause them to not be collapsed on page load

kthorngren

Object
AMMOMeeting Minutes: true
AMMOMonthly Status Report (MSR): true

What does console.log('collapsed:', collapsed); show after line 47?

If its true then r.style.display = collapsed ? 'none' : ''; should result in setting r.style.display to none and hiding the rows. If false then it won't hide the rows.

Kevin

zgoforth

it returns collapsed: false
and Im confused by your response with all the code snippets

zgoforth

I changed this r.style.display = collapsed ? 'none' : 'none'; and it atleast collapses the deliverable row, so not everything is expanded off the bat. But it will not let me expand or anything when I click them. I can still open/close the Program rows though

kthorngren

and Im confused by your response with all the code snippets

I messed up the formatting. Is the response more clear now? If not please ask specific questions.

Kevin

zgoforth

@kthorngren Yes it is more clear. But it did return false under the object it says collapsed: false. The question I am asking is how do I get that to return collapsed: true

kthorngren

Looks like the are a couple of not ! operators in var collapsed = !!collapsedGroups[all];. Mess with those to see if you can get it working.

Kevin

zgoforth

@kthorngren Yup, that was it. I don't understand the point of !!collapsedGroups. In all the examples I have seen on here, and through you it included !!. Wouldn't that negate the call rendering it pretty much a double negative?

kthorngren

Wouldn't that negate the call rendering it pretty much a double negative?

Seems like. Not sure how that came about. The example has morphed from the original from Colin. So who knows.

Kevin