tcpdf : prevent page break within a block - tcpdf

I'm using TCPDF to print some tables of data: one big table (although usually not longer than a page) followed by a second, smaller one.
In some cases, the two tables together are longer than one page, so TCPDF inserts a page break in the middle of the second table. My clients want to avoid that behavior: they would rather have the second table completely on a new page, ie insert the page break before the table, if both table cannot fit on a single page.
Of course if both tables fit on one page, no page break should be used.
So does anybody know if there is a way to instruct TCPDF not to insert a page break within a given table?

Start a transaction, insert the table, check if you are in a new page, if yes, roll back and add a page before insering your table.
VERY IMPORTANT: don't forget the TRUE calling rollback:
$this->startTransaction();
$start_page = $this->getPage();
$this->writeHTMLCell( 0, 0, '', '', $html, 0, 1, false, true, 'C' );
$end_page = $this->getPage();
if ($end_page != $start_page) {
$this->rollbackTransaction(true); // don't forget the true
$this->AddPage();
$this->writeHTMLCell( 0, 0, '', '', $html, 0, 1, false, true, 'C' );
}else{
$this->commitTransaction();
}
Hope it helps
michel

according to docs, there is a option to add nobr="true" to table tag as attribute.
$tbl = <<<EOD
<table border="1" cellpadding="2" cellspacing="2" nobr="true">
<tr>
<th colspan="3" align="center">NON-BREAKING TABLE</th>
</tr>
<tr>
<td>1-1</td>
<td>1-2</td>
<td>1-3</td>
</tr>
</table>
EOD;
$pdf->writeHTML($tbl, true, false, false, false, '');
http://www.tcpdf.org/examples/example_048.phps

Calculate a height of the second table in advance. Use a checkPageBreak method to add a page break if needed.

Related

Ant Design, Hide Pagination when there is the only page

According to the documentation (first FAQ of Table documentation) I have the next code:
<Table
key={index + plant.name}
columns={setColumns(plant.name, plant.id)}
data={setData(plant)}
pagination={{ defaultPageSize: 10, hideOnSinglePage: true }}
/>
But it is still appearing the pagination:
Also I have tried all combinations as:
pagination={{false}}
pagination={false}
pagination={"false"}
But nothing runs properly. Could you help me please?
Currently to testing the maximum number of values are 4 into the table.
The config that I am using:
MacOS Version 10.15.6 (19G2021)
Ant Design Version ^4.5.4
React ^16.13.1
Thank you very much for your time!
You can try checking the length of data which is rendered in your list, If the data length exceeds perPageRecord than you can show.
pagination={data.length > perPageRecord && { defaultPageSize: 10, hideOnSinglePage: true }}
i check the antd portal found out , if want to disabled the display of pagination, need to control the position of the pagination.
position: ['none', 'none']
first one is top, second one is bottom
you can add more condition for display
for more detail: https://ant.design/components/table/
<Table column={yourColumn} dataSource={yourDataSource} pagination={{ position: ['none', 'none'] }}/>
Today we may use hideOnSinglePage option (FAQ):
<Table
columns={COLUMNS}
dataSource={data}
pagination={{ pageSize: PAGE_SIZE, hideOnSinglePage: true }}
/>

TCPDF show ? instead of Č

I have problem with TCPDF to show on PDF page my UTF-8 data. Here is part of my code :
TCPDF work fine, but when create Pdf I get ?a?anska insted Čačanska.
I try with "SET NAMES 'utf8'" ,but no result.. If I remove utf8_encode, get blank page.
I try to use this answer, but no help:
Why cant I use č,ć,đ charters in TCPDF table?
and my old question:
TCPDF don't show č,ć,ž,š,đ from mysql only blank page
Font:
$pdf->SetFont('freeserif', '', 14, '', true);
Create Pdf:
$pdf = new TCPDF(PDF_PAGE_ORIENTATION, PDF_UNIT, PDF_PAGE_FORMAT, true, 'UTF-8', false);
Part od code :
$id =$_POST['ajde']; // get data from jqgrid
$result = mysqli_query($con,"SELECT * FROM kuca where id=$id ");
while($row = mysqli_fetch_array($result))
{
$u= $row['adresa'];
$html = '
<table width="540" height="339" border="1" align="center" cellpadding="2" class="table table-hover" >
<tr>
<td><div align="left">Adresa:</div></td>
<td style="font-family:freesans" ">' . $u. '</td>
</tr>
</table>
$pdf->writeHTML(utf8_encode($html), true, 0, true, 0);
Tnx,
Pavle
I'm not sure if you still need to know this, but I already explained it in one of my answers, but you need to encode you content to utf-8 again (and utf-8 already encoded, remains utf-8 in PHP) and convert it to HTML_ENTITIES. I may explained it a bit weird, so people can correct me on that : )
In short:
$your_new_content = mb_convert_encoding(utf8_encode($your_content), 'HTML-ENTITIES', 'UTF-8');
Oh, a reminder that this fix will mess up your regular echoes, but it will turn out well in TCPDF. This fix can be used on various things, so I hope this helps.

Can not select row in subgrid : Jqgrid

I am using jqgrid, and added one subgrid inside it, which looks like as below,
As you can see,
Rows with columns having 11 and 13 are main grid rows
And every row has subgrid having interest,
The Add Record element shows Add Pop up for Subgrid
Here is the code for subgrid looks like,
subGridRowExpanded: function(subgrid_id, row_id) {
var subgrid_table_id, pager_id;
subgrid_table_id = subgrid_id+"_t";
pager_id = "p_"+subgrid_table_id;
$("#"+subgrid_id).html("<table id='"+subgrid_table_id+"' class='scroll'></table><div id='"+pager_id+"' class='scroll'></div>");
jQuery("#"+subgrid_table_id).jqGrid({
url:"shops?q=2&ShopID="+row_id,
datatype: "xml",
colNames: ['Interest'],
colModel: [
//{name:"Id",index:"ShopID",width:80,editable:false,editoptions:{readonly:false,size:40}}, //Shop ID not required
{name:"id",index:"id",editable:true,edittype:"select",editoptions:{dataUrl:'shops?q=3&ShopID='+row_id},editrules:{required:true}}
],
rowNum:10,
pager: pager_id,
width: '100%',
height: '100%',
scrollOffset: 0,
sortname: 'num',
sortorder: "asc",
height: '100%',
editurl:'shops?q=5&ShopID='+row_id
});
jQuery("#"+subgrid_table_id).jqGrid('navGrid',"#"+pager_id,{edit:false,add:true,del:true})
},
subGridRowColapsed: function(subgrid_id, row_id) {
// this function is called before removing the data
//var subgrid_table_id;
//subgrid_table_id = subgrid_id+"_t";
//jQuery("#"+subgrid_table_id).remove();
}
Problem is , when there are more than one element in subgrid, i can select that (I use latest version of Chrome) but when there is only single element in subgrid surprisingly I can select it ( if you notice the color difference please see subgrid element 'Gifts' -selected below row 13 ) and once select that 'Gifts' can be deleted.
UPDATE:
In firefox and IE , only first row gets selected from subgrid
Is there something wrong in the code ? why can't i select single element when there are more than one elements in subgrid ?
Appreciate your time, thanks
I suppose that you have problem with id duplicates. HTML don't allow to use id attributes on the same HTML pages with the same values. The values of all id attributes must be unique. I recommend you to verify that you have the problem by usage of Developer Tools of Chrome/IE or using Firebug. You need just examine the id attributes which you have now on <tr> elements of grid and subgrids.
On the other side all rows (all <tr> elements) of jqGrid become an id attribute assigned. Typically you have to fill id in the server side in the response of url. The problem is that one use typically the values from id from the database, but you have typically unique id only over one table of the database and not over all tables on the database. So you can easy have the scenario where multiple jqGrids (or grid with subrird) get rows with id duplicates.
The most easy way to fix the problem is to use idPrefix option which was introduced in jqGrid after my suggestion. The main advantage is that you can continue to use the original id values which you have in the database and use id attributes in jqGrid which will be unique because of building id attributes from the id values returned from the server, but with the usage of prefixes. In the answer. So I recommend you to use different idPrefixes for all subgrids. For example you can use idPrefix: 's' + row_id + '_' in subgrid (see the answer and this one).

jquery attr title removing is not working in Mozilla FF

Cold you plz look the following code,
<table title="Demo1">
<tr>
<td> Test1 </td>
<td> Test2 </td>
</tr>
</table>
Here the both Test1 and Test2 links displays default title "Demo1"
But i do not want the title for both links, for this functionality i am doing as follows
$("#anch1").removeAttr("title");
$("#anch2").removeAttr("title");
or
$("#anch1").attr("title", "");
$("#anch2").attr("title", "");
this code works in IE, but M FF is not working, the title is still displaying, and the table title should be there, we should not remove the table tile,
Could you plz answer..
You need to temporary clear the parent table title when hovering over the links, then restore the title when mouse leave the links. Most simple way is adding id to the table itself then:
var $table = $("#table1");
var originalTitle = $table.attr("title");
$("#anch1, #anch2").hover(function() {
$table.attr("title", "");
}, function() {
$table.attr("title", originalTitle);
});
This way you're not dependent on browser behavior.
If you want this applied to all the links in the table, change the selector from "#anch1, #anch2" to $table.find("a").
Live test case.
Try:
$('table').removeAttr('title');
The title is applied to the table, not the anchors. Also, your table markup is malformed (you need to wrap TDs in TR), and that might confuse the selector engines.

Changing the background colour of a given row in a table

I need to change the background color of a given row in a table based on a value of a model (boolean) property which is used in the #Html.CheckBox. The model is updated with the new checkbox value in the PostExampleCompleted action method.
<table>
<thead>
<tr>
<th>Item name</th>
<th>Comments</th>
<th>User</th>
<th>Complete</th>
</tr>
</thead>
<tbody>
<tr id="FooRow">
<td>Foo</td>
<td>#Model.FooComments</td>
<td>#Model.FooUserName</td>
<td>
#using (Ajax.BeginForm("PostFooCompleted", "Home", new AjaxOptions { OnBegin = "ShowProcessingMsg", OnComplete = "HideProcessingMsg" }))
{
#Html.CheckBox("FooItemComplete", Model.FooComplete, new { onClick = "$(this).parent('form:first').submit();" })
}
</td>
</tr>
<tr id="WidgetRow">
<td>Widget</td>
<td>#Model.WidgetComments</td>
<td>#Model.WidgetUserName</td>
#using (Ajax.BeginForm("PostWidgetCompleted", "Home", new AjaxOptions { OnBegin = "ShowProcessingMsg", OnComplete = "HideProcessingMsg" }))
{
#Html.CheckBox("WidgetItemComplete", Model.WidgetComplete, new { onClick = "$(this).parent('form:first').submit();" })
}
</td>
</tr>
</tbody>
</table>
What would be the best way to achieve this? Code examples would be appreciated :).
Thanks.
Something like this should do the trick, given that I've understood what you're trying to do correctly.
First here's a css class which I've used to colour a row if a checkbox is checked.
.redBackground
{
background-color: Red;
}
Next, here is some JQuery code to colour the row where the check-box resides if it is checked. I've also added a 'change' handler to each check-box so if any of them are updated, the row colour is updated appropriately (I've just used red for a row where a check-box is checked and no colour where a check-box is not checked).
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(function () {
$('input[type=checkbox]').each(function () {
var checkbox = $(this);
// if the checkbox is already checked, colour its row
CheckStatus(checkbox);
//Every time a check-box status changes we
//want to re-evaluate the row colour
checkbox.change(function () {
CheckStatus(checkbox);
});
});
//Method which checks if the check-box is checked. If it's checked
//the row is given the 'redBackground' class, otherwise it is taken away
function CheckStatus(checkbox) {
if (checkbox.attr('checked') == 'checked') {
checkbox.parent().parent().addClass('redBackground');
}
else {
checkbox.parent().parent().removeClass('redBackground');
}
}
});
</script>
Hopefully this makes sense... :)
The code is a little to small to exactly get what your settings are.
From the fact that you have a Element I deduce that you have multiple rows in a table.
Personally I'd object to having a AjaxForm in each of the rows. That seems like a lot of overhead.
You could very easy have a single construct of jQuery code to handle all rows and perform the neccessary tasks by itself.
If you use the live function of jQuery you are even independent of rows being added.
The checkbox or the row need to have an identifier with which you can send the ajax call back to your controller. On success you can evaluate the state of the checkbox and color the row appropriately.
I would have to see more of the code, to really help you with that.
Maybe I'm missing something. This seems like a job for html or css. As far as I can make out, there are several ways to approach this depending on your requirements.
On a row by row basis (i.e., you will never know what the colours are until they are defined somewhere by the app or in a database where storing their value statically is not an option), assign the html style property <tr style='background-color: #Model.Colour'> on the row to set the background-color to the colour you want.
On a type/state basis (i.e., you know what the colours are going to be ahead of time, but not what rows they are going to be assigned to), I'd define a class for each row: <tr class='#Model.Type'> and then assign the background-color in your CSS class with the same name as the value in Model.Type.
To get that colour/type itself, you are going to want to pass it in using your model. You might already have that property on your model, I don't know.
For simple alternating pattens, simply use this technique or the :nth-child(odd) and :nth-child(even) css selectors.
Sometimes the simplest solutions are the best solutions.

Resources