breakpage in PDF Cloudexport, grouping

Francois DISSAIT commented on Jul 1, 2023

Hello Kool Report team, I created a report with PDF export using CloudExport. This report has two grouping level. 1) Activite 2) Article - this grouping has a calculation of Count ... When PDF exporting I want a break page on Activite group change. But I Have pagebreak on the two levels 1 and 2. Is it a way to not page break on Article group change ?

    use \koolreport\widgets\google;   
	use \koolreport\widgets\koolphp\Table;
	$avertissement  = "ATTENTION : Ne pas remplacer un colis par un autre sans v&eacuterifer sa disponibilit&eacute !";
	?>
	
<?php
// pour trouver la référence de la promesse et la mettre dans $reference
try
{
	// On se connecte à MySQL
	$mysqlClient = new PDO('mysql:host=185.224.137.3;dbname=u521225422_phamm;charset=utf8','u521225422_admin','NewTech63');       
	//exemple :'mysql:host=localhost;dbname=my_recipes;charset=utf8', 'root', 'root');
}
catch(Exception $e)
{
	// En cas d'erreur, on affiche un message et on arrête tout
        die('Erreur : '.$e->getMessage());
}
// Si tout va bien, on peut continuer
// On récupère tout le contenu de la table 
$sqlQuery = "SELECT 
  promesses.reference
FROM
  promesses
  WHERE  promesses.active='OUI'";
$recipesStatement = $mysqlClient->prepare($sqlQuery);
$recipesStatement->execute();
$recipes = $recipesStatement->fetchAll();
// On affiche chaque reference une à une
foreach ($recipes as $recipe) {
?>
    <p><?php $ref = $recipe['reference']; //on a récupéré la référence de la promesse unique dans $ref
				$ref= $ref.". ";?></p>
<?php
}
?>

<html>
<style>
    .title {
        text-align: center;
        border: 3px solid green;
    }
</style>
<body style="margin-top:2cm;margin-right:1cm;margin-bottom:2cm;margin-left:1cm;width:95%">
    <link rel="stylesheet" href="../../../assets/bs3/bootstrap.min.css" />
    <link rel="stylesheet" href="../../../assets/bs3/bootstrap-theme.min.css" />
    <div class="title">
        <h1>Colis &agrave sortir</h1>        
		</h1>
		<?php
        echo '<img src="logoPHAMM.png" border="0" />' . "\n";
		?>
		</h1>
		<br>
		<br>
		<h1><?php echo $ref; ?></h1>
    </div>
	<DIV STYLE="page-break-before:always"></DIV>
    <div class="page-break"></div>
			
<style>
    @media  print {
      #Colis_A_Sortir .break-row td {
        padding: 0 !important;
      }

      * {
        -webkit-print-color-adjust: exact !important;
      }
     
    }
</style>
<html>
	<head>
		<title>Colis &agrave sortir</title>
	</head>
	<body style='margin: 0.2in'>
     <link rel="stylesheet" href="../../../assets/bs3/bootstrap.min.css" />
     <link rel="stylesheet" href="../../../assets/bs3/bootstrap-theme.min.css" />    
    <header>
        <div style="font-size:10px !important; color:green; padding-left:10px; width:530px;">			
            <span style='text-align:center ;'>
				<img src='logo.png' height='20px' style='position:relative; top:2px'/>
		    </span>
			<span style='position: relative; top: 10px; float: right'>
			<i>
				<?php
				echo $ref."           ".date('d/m/Y');		 
				?>
							
			</i>
			</span>
        </div>
    </header>
    <footer>
		<div style="font-size:10px !important; color:green; padding-left:10px; width:530px;">
			<span style='position: relative; top: 10px; float: right'>				
				<i>Page: {pageNumber} / {totalPages} </i>				
			</span>
            <span></span>
				<img src='logo.png' height='20px' style='position:relative; top:5px'/>
			<span style='color:red;text-align:center;'/>
			 <?php echo $avertissement;?>
			</span>
        </div>
    </footer> 
		<?php 
		  Table::create(array(		
			"dataStore" => $this->dataStore('promesse_active'),
			"cssClass"=>array(
            "table"=>"table-bordered table-striped table-hover"
				),
			"name"=>"Colis_A_Sortir",				
			"grouping"=>array(
			"activite", 
            "article"=>array(
                "calculate"=>array(
                    "{countColis}"=>array("count","numero")
                ),
			"top"=>"<td><b>{countColis} Colis {article}</b></td>",
            ),
			),
			"sorting"=>array(
				"activite"=>"asc",
				"article"=>"asc",
				"numero"=>"asc"
			),
			"columns" =>
			array(						
				"numero"=>array(
					"type"=>"string"
            			),							
				"comment"=>array(
					"type"=>"string"
            			)
					),							
				  ));
		?> 
		<table id='tempTable' style='display:none'>
			<tr class='break-row'>
				<td colspan='999'>
				    <div></div>
					<div class='break-before'></div>
				</td>
			</tr>
		</table>
          <script>
            KoolReport.load.onDone(function() {
              var breakRow = document.querySelector('#tempTable tr');
              var tbody = document.querySelector('#Colis_A_Sortir tbody');
             var rows = document.querySelectorAll('#Colis_A_Sortir tr.row-group');
             for (var i=1; i<rows.length; i+=1) {
                tbody.insertBefore(breakRow.cloneNode(true), rows[i]);
             }
            });
          </script>   		 

  </body>
</html>

Thank you for help !
François

Sebastian Morales commented on Jul 3, 2023

So the problem is that you insert a break row element for all row groups of both level 1 and 2 while the goal is only breaking page for level 1 row group. One way to differentiate between the 2 row groups is adding specific css class name for the row group elements like this:

<?php
        ...
        "grouping"=>array(
            "activite" => [
                "top" => "<div class='activite-row-group'>{activite}</div>"
            ],
            "article" => ...

?>
          <script>
            KoolReport.load.onDone(function() {
              var breakRow = document.querySelector('#tempTable tr');
              var tbody = document.querySelector('#Colis_A_Sortir tbody');
             var rows = document.querySelectorAll('#Colis_A_Sortir tr.row-group');
             for (var i=1; i<rows.length; i+=1) {
                var rowGroupElement = rows[i];
                if (rowGroupElement.querySelector('.activite-row-group')) { // only insert break row for row groups that contain at least a child element with "activite-row-group" css class name
                    tbody.insertBefore(breakRow.cloneNode(true), rowGroupElement);
                }
             }
            });
          </script>

Hope this helps your case.

Francois DISSAIT commented on Jul 4, 2023

Hello Sebastian, Very elegant solution, it works perfectly Thanks a lot ! François

KoolReport's Forum

Breakpage in PDF Cloudexport, grouping #3084

Build Your Excellent Data Report