Nested Collapsible Rows - Collapsed on Load instead of Expanded?

Nested Collapsible Rows - Collapsed on Load instead of Expanded?

zgoforthzgoforth Posts: 493Questions: 98Answers: 2

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);
            
            }
            
        }
  } );

Replies

  • kthorngrenkthorngren Posts: 21,343Questions: 26Answers: 4,954

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

    Kevin

  • zgoforthzgoforth Posts: 493Questions: 98Answers: 2

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

  • zgoforthzgoforth Posts: 493Questions: 98Answers: 2

    I ran the debugger and there were no errors

  • zgoforthzgoforth Posts: 493Questions: 98Answers: 2

    @kthorngren any idea what the issue is?

  • kthorngrenkthorngren Posts: 21,343Questions: 26Answers: 4,954

    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

  • zgoforthzgoforth Posts: 493Questions: 98Answers: 2

    Creating a test case as we speak

  • zgoforthzgoforth Posts: 493Questions: 98Answers: 2

    @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

  • kthorngrenkthorngren Posts: 21,343Questions: 26Answers: 4,954

    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

  • zgoforthzgoforth Posts: 493Questions: 98Answers: 2

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

  • kthorngrenkthorngren Posts: 21,343Questions: 26Answers: 4,954
    edited September 2020

    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

  • zgoforthzgoforth Posts: 493Questions: 98Answers: 2
    edited September 2020

    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
    
  • zgoforthzgoforth Posts: 493Questions: 98Answers: 2

    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

  • kthorngrenkthorngren Posts: 21,343Questions: 26Answers: 4,954
    edited September 2020

    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

  • zgoforthzgoforth Posts: 493Questions: 98Answers: 2

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

  • zgoforthzgoforth Posts: 493Questions: 98Answers: 2

    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

  • kthorngrenkthorngren Posts: 21,343Questions: 26Answers: 4,954

    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

  • zgoforthzgoforth Posts: 493Questions: 98Answers: 2

    @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

  • kthorngrenkthorngren Posts: 21,343Questions: 26Answers: 4,954

    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

  • zgoforthzgoforth Posts: 493Questions: 98Answers: 2

    @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?

  • kthorngrenkthorngren Posts: 21,343Questions: 26Answers: 4,954

    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

This discussion has been closed.