KoolReport's Forum

Official Support Area, Q&As, Discussions, Suggestions and Bug reports.
Forum's Guidelines

Conditional clientRowGroup for DataGrid #2602

Open George opened this topic on on Mar 3, 2022 - 1 comments
George commented on Mar 3, 2022

Hi, I'm using the clientRowGroup plugin for one of my reports. I am grouping on two columns. I want the inner group to only show grouping if the count is greater then 1. Otherwise I would like to display it as a normal row. Is this possible?

                "clientRowGroup" => [
                    "display_date" => [
                        'direction' =>'desc',
                        'calculate' => [
                            "daily_total" => [
                                "count",
                                "display_date",
                                "format" => "function(value) {return value}",
                            ]
                        ],
                        "top" => "<td colspan='999' style='background:#2997CE;color:white;'>{expandCollapseIcon} Daily Total: {daily_total}",
                    ],
                    "name" =>[
                        "direction" => "asc",
                        "top" => "<td colspan='999'>{expandCollapseIcon} Test",
                    ]
                ],

For example, if I have an outer group with display date of 03/03/2022. And inside this rowgroup, there are 2 sets of names; Bill with 3 rows, and John with 1 Row... I want Bill to have a collapsable row group, and John displayed as a normal row.

Right now both Bill and John will display as a collapsable rowgroup, which isnt what I want.

Can I do something like: `

            "clientRowGroup" => [
                "display_date" => [
                    'direction' =>'desc',
                    'calculate' => [
                        "daily_total" => [
                            "count",
                            "display_date",
                            "format" => "function(value) {return value}",
                        ]
                    ],
                    "top" => "<td colspan='999' style='background:#2997CE;color:white;'>{expandCollapseIcon} Daily Total: {daily_total}",
                ],
                "name" =>[
                    "condition" => "count >1 "    <-----------
                    "direction" => "asc",
                    "top" => "<td colspan='999'>{expandCollapseIcon} Test",
                ]
            ],

Thanks in advance.
Sebastian Morales commented on Mar 7, 2022

I'm afraid datagrid\DataTables hasn't had a conditionally initial expand/collapse group option like that. What you can do is implementing some client functions to run when DataTables is ready client side like this:

DataTables::create(array(
    "name" => "myTable1",
    ...
    "clientRowGroup" => array(...),
    "onReady" => "function() {
        var groupLevel = 1;
        collapseGroupsWithMultipleChildren(groupLevel); 
    }"

Here's a general guide to implement this function:

        <script>
            function getNumberOfChildren(trGroup, level) {
                var tmpGroup = trGroup;
                var numChildren = 0;
                while (tmpGroup = tmpGroup.nextElementSibling) {
                    if (! tmpGroup.classList.contains("tr.dtrg-level-" + level)) numChildren++;
                    else break;
                }
                return numChildren;
            }
            function expandGroup(trGroup) {
                var expandIcon = trGroup.querySelector("span.group-expand");
                if (expandIcon && expandIcon.style.display !== 'none') expandIcon.click();
            }
            function collapseGroup(trGroup) {
                var collapseIcon = trGroup.querySelector("span.group-collapse");
                if (collapseIcon && collapseIcon.style.display !== 'none') collapseIcon.click();
            }
            function collapseGroupsWithMultipleChildren(level) {
                var allTrGroups = document.querySelectorAll("#myTable1 tr.dtrg-level-" + level); // assuming "myTable1" is your DataTables' name when creating in php
                allTrGroups.forEach(function(trGroup) {
                    var numChildren = getNumberOfChildren(trGroup, level);
                    if (numChildren > 1) {
                        collapseGroup(trGroup);
                    }
                });
            }
        </script>

If there's any javascript error in browser console (F12) when refreshing your report page with these client functions kindly let us know. Tks,

Build Your Excellent Data Report

Let KoolReport help you to make great reports. It's free & open-source released under MIT license.

Download KoolReport View demo
help needed
DataGrid

Designed and built with by KoolPHP Inc.

Code licensed MIT.