Hi,

I'm trying to use datagrids row group column to show column 1-6 when collapsed. and the rest (column 7-8) when expanded. I have a screenshot of what I currently have.

I basically want columns: Date, Child First, Child Last, Location, Room, and Prescreen Status to be on the 'top' row. And the Question and Answer columns in a rowspan to be in the corresponding Expanded rows.

code:

"clientRowGroup" => [
    "date_cid" => [
        direction" => "DESC",
        top" => "<td>{row}</td> <td colspan='999'>{expandCollapseIcon} date: {date_cid}    </td>"
    ]
],

Any help is appreciated, thanks!

Hey Sebastian, this could work. However I would like to keep the column headers visible at the top of the table. I've managed to get the current columns of the rowgroup in the top with:

"clientRowGroup" => [
                    "date_cid" => [
                        'calculate' => [
                            'first_name' => [
                                "aggregate" => "function(rows, group, aggFieldIndex) {
                                    return rows.data().pluck(aggFieldIndex)[0]
                                }
                                ",
                                 'field' => 'child_first_name',
                            ],
                            'last_name' => [
                                "aggregate" => "function(rows, group, aggFieldIndex) {
                                    return rows.data().pluck(aggFieldIndex)[0]
                                }
                                ",
                                 'field' => 'child_last_name',
                            ],
                            'date' => [
                                "aggregate" => "function(rows, group, aggFieldIndex) {
                                    return rows.data().pluck(aggFieldIndex)[0]
                                }
                                ",
                                 'field' => 'Date',
                            ],
                            'location' => [
                                "aggregate" => "function(rows, group, aggFieldIndex) {
                                    return rows.data().pluck(aggFieldIndex)[0]
                                }
                                ",
                                 'field' => 'Location',
                            ],
                            'room' => [
                                "aggregate" => "function(rows, group, aggFieldIndex) {
                                    return rows.data().pluck(aggFieldIndex)[0]
                                }
                                ",
                                 'field' => 'Room',
                            ],
                        ],
                        "direction" => "DESC",
                        "top" => "<td>{#}{expandCollapseIcon}</td><td style='font-size:12;'>{date}</td><td style='font-size:12;'>{first_name}</td><td style='font-size:12;'>{last_name}</td><td style='font-size:12;'>{location}</td><td style='font-size:12;'>{room}</td>"
                    ]
                ],

Now I need to only show the question and answer columns when expanded. Is there a way to do a colspan for specific columns?

I've added a condition for the specific cells that arent Question and Answer in the cssClass with

                    'td'    => function ($row, $colName) {
                        $hide_cell = $colName == "Question" || $colName == "Answer" ? "" : "hide_cell";
                        $className = str_replace(' ', '-', strtolower($colName));
                        return "reportTableCell {$className} {$hide_cell}";
                    },
//css
.hide_cell{
    display: none;
}

and i can hide the correct cells. But my styling is a bit off. Any idea on how i can expand the colspan of the Question column? I would also like to make sure the row column header doesnt expand with the td cell.

Hi, the attributes property worked perfectly thank you.

I have two more issues:

1 . Row number by Group. In the previous screenshot I have a '{#}' place holder for row number. Is it possible to show the row numbers by group instead of the individual row? I was trying to find a way with the 'calculate' option but it only returns the individual row data so I cant calculate the index of the row group.

                            'row_num' => [
                                "aggregate" => "function(rows, group, aggFieldIndex) {
                                    console.log(rows)
                                    return 'test'
                                }
                                "
                            ],
                            'field' => 'Row',

2 . hide the expand/collapse button and change the whole row to expand/collapse on click.

As always thanks for the assistance.

Hey Sebastian, almost there. issue number 2 is solved.

However for the row number issue the row num seems to set all rows to the number of rows on the current page. My table only has one group level so I changed all instances of 2 to 1.

                            'dtgroups_level1_count' => [
                                'field' => 'Row',
                                "aggregate" => "function(rows, group, aggFieldIndex) {
                                    // there's one hidden 'level' variable indicating which level variable 'group' is
                                    if (level != 0) return; // don't count variable 'group' if it's not level 2 (index 1)
                                    if (!window.dtGroups_level1) window.dtGroups_level1 = [];
                                    if (window.dtGroups_level1.indexOf(group) === -1) window.dtGroups_level1.push(group);
                                    console.log(window.dtGroups_level1.length)
                                    return window.dtGroups_level1.length;
                                }",
                            ], 
],
                        "top" => "<td style='width:50px;'>{expandCollapseIcon} {dtgroups_level1_count}</td><td  style='font-size:12;'>{date}</td><td style='font-size:12;'>{first_name}</td><td style='font-size:12;'>{last_name}</td><td style='font-size:12;'>{location}</td><td style='font-size:12;'>{room}</td><td style='font-weight:bold;font-size:12;color:{prescreen_status_color}'>{prescreen_status}</td>"

Also I noticed that when I change the paging to the next page, all the rows default to expanded. And when switching back from page 2 to page 1, Page 1 will have the row numbers from page 2. I should note I have a collapseAllGroups function that runs when 'onReady' runs.

//onReady
                    reportTable.on( 'draw', function () {
                        collapseAllGroups('reportTable', 0);
                    } );
                    collapseAllGroups('reportTable', 0);

//CollapseAllGroups function, in <script> at bottom of file
    function collapseAllGroups(name, level) {
        var allGroups = document.querySelectorAll("#" + name + " tr.dtrg-level-" + level);
        allGroups.forEach(group => {
            var collapseIcon = group.querySelector("span.group-collapse");
            if (collapseIcon && collapseIcon.style.display !== 'none') collapseIcon.click();
        });
    }

Sorry above issue has been solved, there was some other code messing with your function.