cssClass on DataGrid's DataTables not work with serverSide

Daniel commented on Jan 15, 2021

Hi, I have trouble coloring DataTable with cssClass property. Here's the code:

    <style type="text/css">
      <?php if ($this->params['visualization'] === 'table' && !empty($this->params['colors'])): ?>
        .tableColor
        {
            background-color:<?php echo $this->params['colors'][0] ?>;
        }
      <?php endif; ?>
    </style>

        if (!empty($this->params['colors'])) {
          $cssClass = 
          [
            'table' => 'tableColor',
            'tr' => 'tableColor',
            'td' => 'tableColor'
          ];
        }
        Datatables::create([
          'name' => 'uniqueTable',
          'Title' => $this->params['title'],
          'dataSource' => $dataSource,
          'columns' => $this->params['columns'],
          'options' => ['searching' => $searching, 'colReorder' => true, 'select' => true, 'paging' => $paging],
          'serverSide' => $serverSide,
          'cssClass' => $cssClass
        ]);

Here's the result:

The whole table should be colored yellow however styling is only applied on header section while the rest gets ignored. Does anyone know why?

KoolReport commented on Jan 18, 2021

Sorry for our late reply. I will need to consult dev.team for more information. Thank you very much for your patience.

David Winterburn commented on Jan 18, 2021

Hi Daniel,

Would you please inspect the td element of the table to see if they have class "tableColor"? Thanks!

Daniel commented on Jan 18, 2021

Hi David,

Neither td nor tr has that class.

David Winterburn commented on Jan 18, 2021

Thanks! Please print out $this->params['colors'] and $cssClass in the report's view and let us know the result:

//MyReport.view.php
echo "param colors = "; var_dump($this->params['colors']); echo "<br>";
...
echo "cssClass = "; var_dump($cssClass); echo "<br>";
...

Daniel commented on Jan 18, 2021

Here's the result:

param colors = array(1) { [0]=> string(7) "#e60a0a" }
cssClass = array(3) { ["table"]=> string(10) "tableColor" ["tr"]=> string(10) "tableColor" ["td"]=> string(10) "tableColor" }

David Winterburn commented on Jan 18, 2021

Please try the following code and inspect the table's tr, td element to see if they have the "tableColor" class:

        DataTables::create([
          'name' => 'uniqueTable',
          'dataSource' => $dataSource,
          'cssClass' => [
            'table' => 'tableColor',
            'tr' => 'tableColor',
            'td' => 'tableColor'
          ]
        ]);

Daniel commented on Jan 18, 2021

Styling works fine if I coded it like this though:

Datatables::create([
          'name' => 'uniqueTable',
          // 'Title' => $this->params['title'],
          'dataSource' => $dataSource,
          // 'columns' => $this->params['columns'],
          // 'options' => ['searching' => $searching, 'colReorder' => true, 'select' => true, 'paging' => $paging],
          // 'serverSide' => $serverSide,
          'cssClass' => $cssClass
        ]);

Also works fine like this:

Datatables::create([
          'name' => 'uniqueTable',
          'Title' => $this->params['title'],
          'dataSource' => $dataSource,
          'columns' => $this->params['columns'],
          'options' => ['searching' => $searching, 'colReorder' => true, 'select' => true, 'paging' => $paging],
          // 'serverSide' => $serverSide,
          'cssClass' => $cssClass
        ]);

Seems like it's caused by serverSide.

David Winterburn commented on Jan 18, 2021

Ok, that's good news. Now please uncomment other lines/options one by one to see which one breaks your css class setting.

Daniel commented on Jan 18, 2021

It's server side. Any solutions?

David Winterburn commented on Jan 18, 2021

Oh, it seems there's a bug with "cssClass" when "serverSide" is true. We will investigate this issue further and get you a solution soon. Thanks a lot for your feedback!

David Winterburn commented on Jan 18, 2021

Hi Daniel,

We got confirmation from the dev team that "cssClass" php property won't work with tr, td elements when "serverSide" is on (it works with the table element, though). The reason is because "cssClass" property sets class name on the table html on the server side (when processing php). But with "serverSide" on, the inital tr, td html is discarded entirely by DataTables' client object when it gets its ajax data.

Luckily, we have other options to fall on to set DataTables' column class. Please try the following ways:

     DataTables::create(array(
                   ...
                   "columns" => [
                        "column1" => [
                            'className' => 'tableColor'
                        ]
                    ],

    DataTables::create(array(
                   ...
                    'columns' => [
                        "column1" => [
                          "createdCell" => "function (td, cellData, rowData, row, col) {
                              $(td).addClass( 'tableColor' );
                          }",
                        ],
                    ],

    DataTables::create(array(
                 ...
                 "options" => [
                    "createdRow" =>  "function( row, data, dataIndex ) {
                        $(row).addClass( 'tableColor' );
                    }",

In case you needed to set color for the columns, I think td's class would be enought and tr's css wouldn't be needed. Let us know if you still have any issue. Thanks!

Daniel commented on Jan 19, 2021

I tried the first option and it finally works now. Thanks for your help!

KoolReport's Forum

CssClass on DataGrid's DataTables not work with serverSide #1847

Build Your Excellent Data Report