Hi, Now that it seems I was able to make it work with API and JSON: #Topic 840 I am trying to group the results using DataTables and clientRowGroup.

Results are showing as a flat table without being grouped by the name. For instance, I have two rows for 'Bus Operations Limited'
I thought based on the example, I could see one top row with the total and then expand and see each record individually. Example that I am following: Client RowGroup

What am I doing wrong? Thanks

<?php

    DataTables::create(array(
        "showHeader"=>true,
        "showFooter" => "true",
        "dataStore" => $this->dataStore('result'),
        "themeBase"=>"bs4", // Optional option to work with Bootsrap 4
        "cssClass"=>array(
            "table"=>"table table-striped table-bordered"
        ),

        "options"=>array(
            "searching"=>true,
            "fixedHeader"=>true,
            "showFooter"=>"bottom",
        ),
      "columns" => ["name",
            "amountFormatted" => array(
                "label" => "amountFormatted",
                "prefix" => "$",
                "footer" => "sum",
                "type"=>"number",
                "decimals"=>2,
                "footerText" => "<b>@value</b>"
            ),
            "profile_LinkNo", "currencyCode",
            "remarks",
            "paymentNo",
            "paymentDate",
            "ckCCNo",
            "bank_LinkNo",
            "payType_LinkNo",
            "payMethod_LinkNo",
            "JERecord_LinkNo",
            "submitTo_LinkCode",
            "profileType_LinkCode",
            "dateCleared",
            "code",
            "payeeName",
            "branch_LinkNo",
            "deposit_LinkNo",
            "invoiceRef",
            "attachmentCount"],

        "clientRowGroup" => [
            "name" => [
                'direction' => 'asc',
                'calculate' => [
                    'totalAmount' => [
                        'sum',  //'sum', 'count', 'avg', 'min', 'max'
                        'amountFormatted'
                    ],
                ],
                "top" => "<td colspan='999'>{expandCollapseIcon} Top: Customer: {name} | Total: {totalAmount}</td>",
                "bottom" => "<td colspan='999'>{expandCollapseIcon} Bottom: Customer: {name} | Customer sales: {totalAmount}</td>",
            ],

        ],
        "cssClass" => array(
            "table" => "table-bordered table-striped table-hover cell-border compact",
            'tf' => "text-right",
            "td"=>function($row,$colName) {
                if (in_array($colName, array("amountFormatted", "profile_LinkNo")))
                {
                    return "text-right";
                }
            },
        )
    ));
    ?>

No, it still doesn't work. I copied exactly what it is in the example and it still shows as a flat table. I am using Laravel, here is the code:

Composer:

"koolreport/blade": "*",
    "koolreport/excel": "*",
    "koolreport/export": "*",
    "koolreport/pro": "*",

<?php

use koolreport\processes\CalculatedColumn; use koolreport\processes\Sort;

namespace App\Reports\TRAMS;

use App\Staff;

use Illuminate\Support\Facades\Log; use koolreport\bootstrap4\Theme;

use koolreport\export\Exportable; use koolreport\KoolReport; use koolreport\laravel\Friendship; use Auth; use App\User; use koolreport\processes\CalculatedColumn; use koolreport\processes\Group; use koolreport\processes\Map; use koolreport\processes\Sort;

class DataTableclientRowGroup extends KoolReport {

use Friendship;
use Theme;
use Exportable;

use \koolreport\inputs\Bindable;

use \koolreport\inputs\POSTBinding;
// use \koolreport\export\Exportable;
use \koolreport\excel\ExcelExportable;

function setup()
{
    Log::debug("DataTableclientRowGroup init");
    $this->src('mysql')
        ->query('select * from customer_product_dollarsales2')
        ->pipe(new \koolreport\processes\Limit(array(200, 0)))
        ->pipe($this->dataStore("sales"));

}

}

<?php use \koolreport\datagrid\DataTables; ?> <div class="report-content">

<div class="text-center">
    <h1>DataTables</h1>
    <p class="lead">
        How to use client-based row group with DataTables
    </p>
</div>
<style>
    tr[role="row"] td:first-child {
        padding-left: 50px;
    }
</style>
<?php
DataTables::create(array(
    "dataSource"=>$this->dataStore("sales"),
    "themeBase"=>"bs4", // Optional option to work with Bootsrap 4
    "cssClass"=>array(
        "table"=>"table table-striped table-bordered"
    ),
    "columns" => ["customerName", "productLine", "productName", "dollar_sales"],
    "clientRowGroup" => [
        "customerName" => [
            'direction' => 'asc',
            'calculate' => [
                'totalSales' => [
                    'sum',  //'sum', 'count', 'avg', 'min', 'max'
                    'dollar_sales'
                ],
            ],
            "top" => "<td colspan='999'>{expandCollapseIcon} Top: Customer: {customerName} | Total: {totalSales}</td>",
            "bottom" => "<td colspan='999'>{expandCollapseIcon} Bottom: Customer: {customerName} | Customer sales: {totalSales}</td>",
        ],
        "productLine" => [
            'direction' => 'desc',
            'calculate' => [
                'totalSales' => ['sum', 'dollar_sales',
                    "format" => "function(value) {return value.toFixed(3);}",
                ],
                'avgSales' => [
                    'field' => 'dollar_sales',
                    "aggregate" => "function(rows, group, aggFieldIndex) {
                        return rows
                        .data()
                        .pluck(aggFieldIndex)
                        .reduce( function (a, b) {
                            return a + 1*b.replace(/[^\d\.]/g, '');
                        }, 0) / rows.count()}",
                    "format" => "function(value) {return value.toFixed(5);}",
                ],
                'countSales' => ['count', 'dollar_sales'],
                'minSales' => ['min', 'dollar_sales'],
                'maxSales' => ['max', 'dollar_sales'],
            ],
            "top" => "<td colspan='999'>{expandCollapseIcon} Top: Line: {productLine} | Total: {totalSales} | Avg: {avgSales} | Count: {countSales} | Min: {minSales} | max: {maxSales}</td>",
            // "bottom" => "<td colspan='999'>{expandCollapseIcon} Bottom: Line: {productLine} | Line sales: {totalSales}</td>",
        ],
    ],
    "options" => [
        "paging" => true,
        "searching" => true,
        "pageLength" => 25,
    ],
));
?>

</div>

And just to be sure, I ran again: composer install composer update --lock --with-dependencies

but nothing new came up.... my composer shows as a label as part of the ide phpStorm:

    "koolreport/blade": "*", 1.0.0
    "koolreport/excel": "*", 7.2.0
    "koolreport/export": "*", 4.1.0
    "koolreport/pro": "*", 4.7.1

I did generated a new token, updated auth.json, ran same commands again. No change....

here again, sorry for this, after I generated the new token, I ran the command composer update --with-dependencies and this time it did get updated. So, things are in a group now, however the "+" "-" are not collapsing/expanding. Here is the error in the browser console: thanks

Failed to load resource: the server responded with a status of 404 () KRDataTables.css:1 Failed to load resource: the server responded with a status of 404 () KoolReport.js:106 TypeError: Cannot read property 'create' of undefined

at Reporting:DataTableclientRowGroup:284
at KoolReport.js:105
at Array.forEach (<anonymous>)
at Object.checkScriptsAndCallback (KoolReport.js:102)
at Object.onScriptLoaded (KoolReport.js:88)

3Reporting:DataTableclientRowGroup:1 Uncaught ReferenceError: KRdatatables5fdace95b3f6d1 is not defined

at HTMLSpanElement.onclick (Reporting:DataTableclientRowGroup:1)

KRDataTables.css:1 Failed to load resource: the server responded with a status of 404 ()

thanks Sebastian, I did know that I had to generate a new token. I did that now, thank you. Now, I am getting the error above. Any idea/suggestion? thanks

I am not sure if I am getting this right, but here is what I receive in the log, and when I click on the file, that is what I get local also on the test server.

Failed to load resource: the server responded with a status of 404 () /koolreport_assets/js/KRDataTables.js:1

KRDataTables.css:1

https://dev.ellisontravel.com/koolreport_assets/js/KRDataTables.js Link links points to a: 404 WE CAN’T SEEM TO FIND THE PAGE YOU’RE LOOKING FOR

<script type='text/javascript' src='/koolreport_assets/3157288213/KoolReport.js'></script><script type='text/javascript'>KoolReport.load.resources({"js":["\/koolreport_assets\/417790547\/jquery.min.js",["\/koolreport_assets\/193717318\/js\/bootstrap.bundle.min.js"]],"css":["\/koolreport_assets\/193717318\/css\/bootstrap.min.css"]});</script><div class="report-content">

<div class="text-center">

thank you

No. I an find this file under \vendor\koolreport\datagrid\js\KRDataTables.js

I've deleted koolreport_assets folder locally. Re-start server, ran example, new folders were created under this folder but problem is still exists so problem is not the writes in this folder.

Failed to load resource: the server responded with a status of 404 (Not Found) :8000/koolreport_assets/js/KRDataTables.js:1 Failed to load resource: the server responded with a status of 404 (Not Found) KoolReport.js:106 TypeError: Cannot read property 'create' of undefined

at Reporting:DataTableclientRowGroup:284
at KoolReport.js:105
at Array.forEach (<anonymous>)
at Object.checkScriptsAndCallback (KoolReport.js:102)
at Object.onScriptLoaded (KoolReport.js:88)

2Reporting:DataTableclientRowGroup:1 Uncaught ReferenceError: KRdatatables5fdc2a19a8cde1 is not defined

at HTMLSpanElement.onclick (Reporting:DataTableclientRowGroup:1)

KRDataTables.css:1 Failed to load resource: the server responded with a status of 404 (Not Found)

I did this locally and got the following Browser console error: KoolReport.js:80 GET http://localhost:8000/koolreport_assets/3578238540/KRDataTables.js net::ERR_ABORTED 404 (Not Found) registerScript @ KoolReport.js:80 (anonymous) @ KoolReport.js:40 js @ KoolReport.js:39 (anonymous) @ KoolReport.js:37 (anonymous) @ KoolReport.js:105 checkScriptsAndCallback @ KoolReport.js:102 onScriptLoaded @ KoolReport.js:88 load (async) registerScript @ KoolReport.js:78 (anonymous) @ KoolReport.js:40 js @ KoolReport.js:39 resources @ KoolReport.js:12 (anonymous) @ Reporting:DataTableclientRowGroup:1 KoolReport.js:185 GET http://localhost:8000/koolreport_assets/3578238540/KRDataTables.css net::ERR_ABORTED 404 (Not Found) registerLink @ KoolReport.js:185 (anonymous) @ KoolReport.js:145 css @ KoolReport.js:144 (anonymous) @ KoolReport.js:151 (anonymous) @ KoolReport.js:207 checkLinksAndCallback @ KoolReport.js:206 onLinkLoaded @ KoolReport.js:193 load (async) registerLink @ KoolReport.js:183 (anonymous) @ KoolReport.js:154 css @ KoolReport.js:153 resources @ KoolReport.js:16 init @ KoolReport.js:217 (anonymous) @ Reporting:DataTableclientRowGroup:140 KoolReport.js:106 TypeError: Cannot read property 'create' of undefined

at Reporting:DataTableclientRowGroup:284
at KoolReport.js:105
at Array.forEach (<anonymous>)
at Object.checkScriptsAndCallback (KoolReport.js:102)
at Object.onScriptLoaded (KoolReport.js:88)

just so you know, I manually copied KRDataTables.js and KRDataTables.css files to /public/koolreport_assets/3578238540/ folder and it worked. So, the issue seems to be copying the files. Thanks

as you are trying to fix this, I'd appreciate if you could please include a fix for: https://www.koolreport.com/forum/topics/1776

thank you !

I tried to copy files to folder but it is not working. Please help.

yes. I used laravel. I copied files manually to respective folder and its working now. Thanks !!