KoolReport's Forum

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

DataTables default view #609

Open Eugene opened this topic on on Jan 23, 2019 - 17 comments

Eugene commented on Jan 23, 2019

HI, why by default the DataTables controls look like in the attachment

even I added bs4 option - the controls do not look like at the example page and the down arrow is not changed... even I added bs4 option - the controls do not look like at the example page and the down arrow is not changed..

I've also checked the html code generated for the example on your site and for my page. They look different for these arrows…

My version of DataTables uses only ::after

And has some code for the blue triangle

The version of DataTables on your site uses :before and :after for each of the arrows

I downloaded my koolreport PRO some days ago… Maybe the version for downloading on your site is out of date?

Regards, Eugene

KoolReport commented on Jan 23, 2019

If you run the DataTables in our example ( which we use the bootstrap4) does the DataTables show right?

Eugene commented on Jan 23, 2019

I don't try to run this example locally... I just look at your site I can try give me some minutes for that.

Eugene commented on Jan 23, 2019

The result is the following

the reports work but the sorting arrows look like blue triangles (except DataTables report with bs4 option - no arrows or something )

Eugene commented on Jan 23, 2019

UPD For DataTables report It is possible to sort but the sorting arrows are invisible

Eugene commented on Jan 23, 2019

Ups... it looks like I have some css conflict... so my first examples are not the kollreport issues. Sorry. But anyway i am confused how 3d party css can add something to the datatable....

And one question why if I add bs4 I lose the controls? In your examples and in my report I have the same.

Eugene commented on Jan 23, 2019

To close this topic please explain the issue with "themeBase"=>"bs4" The sort arrows disappear in example report also if set this option. how to use it correctly? I really want to have the arrows like on your site but what I can get now are ugly blue triangle :-)))

KoolReport commented on Jan 24, 2019

I myself could not replicate the issue so I have asked dev.team to look at it. We also about to release a new version. Hope that it will solve this issue. If possible, please upload the examples to your host, I would like to see.

Eugene commented on Jan 24, 2019

Ok. but the links I will send to the support e-mail. Is it ok?

KoolReport commented on Jan 24, 2019

sure

Eugene commented on Jan 24, 2019

done

KoolReport commented on Jan 24, 2019

I understand the issue now and confirm it is a bug. It is our mistakes to put the resource name like this "dataTables.bs4.min.css" while it should be all in lower-case "datatables.bs4.min.css". So the solution is very simple, you go to folder "koolreport/packages/datagrid/DataTables" and change the above file name to lower case. bs4 stands for Bootstrap4. Your page should be use bootrap4 theme. You can do so by replace:

use \koolreport\clients\Bootstrap; // bootstrap3

with

use \koolreport\bootstrap4\Theme;
Eugene commented on Jan 25, 2019

Thanks, it solved the issue with the arrows but how to get back the backgrounds. I mean

Old version:

New with Bootstrap4:

Eugene commented on Jan 25, 2019

And one more question. How to sort the date strings correctly. I know the reason but I could not find the solution. I use date format "F j, Y"

Either I reformat the date in setup like this:

->pipe(new DateTimeFormat(array(
            "date"=>"F j, Y"
        )))

or I format the date when input into the widget:

"columns"=>array(
                "date"=>array(
                    "type"=>"date",
                    "label"=>"date",
                    "displayFormat"=>"F j, Y",

The sorting in DataTable works incorrect in terms of the date - it sorts strings but not the date. How to sort with the different dates format? Do I have to write my own sorting function?

KoolReport commented on Jan 26, 2019

We are asking the devteam to inspect your case of sorting formatted datetime in DataTables

Eugene commented on Jan 26, 2019

Thanks, I am waiting But do you have an answer about backgrounds?

KoolReport commented on Jan 26, 2019

I miss your question of theme, you can do this:

DataTables::create(array(
        ...
        "cssClass"=>array(
            "table"=>"table table-striped table-bordered"
        )
));
Eugene commented on Jan 26, 2019

Thank you. Where could I find the list of all possible css settings? Or it is better to check directly the css file?

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
None yet

DataGrid