KoolReport's Forum

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

DataGrid CSS #252

Open Dimitar opened this topic on on Apr 18, 2018 - 9 comments

Dimitar commented on Apr 18, 2018

Hi, I want to know how to use different CSS for the DataGrid package.

"cssClass"=>array(
    "table"=>"table table-hover table-bordered",
    ...
    )

This is working fine for a normal Table but with DataTables it is not.

KoolReport commented on Apr 18, 2018

Basically it is two different options for showing data in table format. There are similarity but there are different.

So for DataTables, you may do:

DataTables::create(array(
    "cssClass"=>array(
        "table"=>"cell-border"
    )
))

Above code will add border to the cell of table, Here is the full options DataTables styling

Let me know if you need further assistance.

Ps: Thank you very much for your purchase of KoolReport Pro.

Dimitar commented on Apr 18, 2018

Well, I have tried this: "cssClass"=>array(

			"table"=>"cell-border compact"
		)

Still not working. However if I edit the DataTables.tpl.php and change: <table id="<?php echo $this->name; ?>" class="display"> to <table id="<?php echo $this->name; ?>" class="display compact cell-border"> it is working fine but I really don't want to change these core files so I can make easy updates.

Here is my full table: DataTables::create(array(

        "dataStore"=>$this->dataStore("slaughterhouse_expense"),
		"showFooter"=>"bottom",
        "columns"=>array(
		"spid",
		"sid",
		"fid",
		"bid",
		"eid",
		"slaughterhouse",
		"product"=>array(
                    "footerText"=>"<b>Sum:</b>",
                    ),
		"amount",
		"dnumber"=>array(
                        "footerText"=>"<b>Sum:</b>",
                      ),
                    "ddate",
		"ldate",
		"value"=>array(
                        "footerText"=>"<b>Sum:</b>",
                    ),
		"currency",
		"levvalue",
		"owner",
		"client",
		"destination",
		),
		"options"=>array(
			"paging"=>true,
			"select"=>true,
			"fixedHeader"=>true,
			"searching"=>true,
		),
		"cssClass"=>array(
			"table"=>"cell-border compact"
		)
		));
Dimitar commented on Apr 18, 2018

Footer is also not showing up.

KoolReport commented on Apr 18, 2018

You please do this:

Change the line 10 of the DataTables.tpl.php to

<?php echo ($tableCss)?" class='$tableCss'":" class='table display'"; ?> >

Now you can set

"table"=>"display cell-border compact"
KoolReport commented on Apr 18, 2018

About the footer, you need to do this:

        "value"=>array(
            "footerText"=>"<b>Sum</b>: @value",
            "footer"=>"sum"
        )
Dimitar commented on Apr 23, 2018

The new 1.2.0 version of DataGrid fixed all CSS issues but I still can't get the footer to show up. In general I define the footer parameters in a ColumnMeta Pipe like this: "amount"=>array(

				"type"=>"double",
				"label"=>"Quantity",
				"footer"=>"sum",
				"footerText"=>"<b>Σ: @value</b>",
				"formatValue"=>function($value)
				{
					return round($value, 2)." kg.";
				}
			),

I've tried to remove all other parameters and to leave just "footer"=>"sum" but footer is still not showing up. I've tried also to define the footer parameters in the columns array in View like this: "product"=>array(

            "footerText"=>"<b>Some text: $per_q_value </b>",
        ),

Still no luck and the footer is not showing. All this is working pretty well for the Tables widget.

KoolReport commented on Apr 24, 2018

We tested before released and it seems working well. If you just set "showFooter"=>true, does it work?

Dimitar commented on Apr 24, 2018

Thank you! "showFooter"=>true, works pretty well. I think I know why it does not work without it. It is because I have pagination for this table. On the other tables without pagination it works without setting "showFooter"=>true, Thanks again for the great job for this reporting system it is really a gem. Also I appreciate very much your fast support and updates. Cheers!

KoolReport commented on Apr 24, 2018

Awesome!

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