KoolReport's Forum

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

Styling datatable/datagrid buttons #3235

Open Ed Kavi opened this topic on on Jan 31 - 2 comments

Ed Kavi commented on Jan 31

I'm trying to style datatable buttons with bootstrap styles, but it doesn't seem to work. I'm using the Amazing Theme

My buttons configuration is as follows:

	"buttons" => [			
		"colvis", 
		[
            "extend" => 'excelHtml5',
			"className" => 'btn btn-primary', 
            "exportOptions" => [
                "columns" => ':visible'
            ] 
        ],
        [
            "extend" => 'pdfHtml5', 
			"className" => 'btn btn-primary', 
			"orientation" => "landscape", 
			"pageSize" => "A4",
            "exportOptions" => [
                "columns" => ':visible'
            ]
        ],
	],
Sebastian Morales commented on Feb 1

Pls inspect your buttons and see if classes .btn and .btn-primary existed or not. If they existed but style would not apply it could be overridden by your other CSS rules.

Ed Kavi commented on Feb 2

Thanks Sebastian.

I checked as advised and noticed the dt-button class was a contributing factor. I updated the options with the following and it worked to some extent. I understand it better now so this issue can be closed.

"initComplete" => "function () {

        var btns = $('.dt-button');
        btns.addClass('btn btn-primary btn-sm');
        btns.removeClass('dt-button');

    }"

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
solved

DataGrid