I am trying to do a print script for printing invoice’s. Let’s say the invoice has 100 products. I want to split a grid up to display around 10 products per page nicely formatted.
What would you guys recommend would be the bests way to resolve my issue?
I could avoid using the grid functions and format it and create it myself but I think it would be better to use the grid system somehow I am Just unsure of where to start !
Interesting Problem, does you browser not split this in pages? when you print
Well the browser could with CSS but it wouldn’t have the nice formatted header on the grid and also I want to be able to have my own header and footer on each page of the invoice.
you could create multiple invoices
No it would need to be one invoice. the only thing I could think is count the rows, and manually loop through the pagination results for each page. Until no more results are visible
I would show all the items on the invoice screen and use @media print in your css to format it. As long as you have the css right it will print just like an invoice however you will not have control over the page breaks.
You can also hide/show headers, footers, sidebars etc in your print css.
I think having a full page of items is better than having say 10 items and 3/4 blank page.
Remember at the end of the day the user can choose to print landscape / portrait and adjust margins etc. so 10 items per page on your screen may not be 10 items per page for the actual user.
I think using a responsive print css with no set items per page would be best.
I suggest the this link
May be it’s some helpful
I cant see how CSS or the link Ankit Modi gave, would work when the invoice would need to be like this PDF attached.
I will do some more reading around CSS to see if its possible, but at this stage I can see how it is.
there isn’t an attachment
My Bad! Here s the sample PDF
your attachment is a standard looking invoice. do you have a live view of the page? I could show you a little bit on how to do the css to get you started. But it’s 100% possible to do it with just css if you want. I’m using the css method in one of my programs for receipts and invoices just like yours.
I don’t have the invoice view ready yet I was going to do a bit of research before getting stuck in. I am building another section that requires a purchase order. This has a similar look view required. I will build it today and message the view code. Thanks for your help it would be grateful to see your answer.
This is some sample HTML created using grids in Views in Yii
<body class="print">
<div class="page" style="width:100%; ">
<div id="header1"> <div class="row-fluid ">
<div class="span8">
<h4>Purchase Order Check Sheet 3DP12 [ <i>test</i> ]</h4>
</div>
<div class="span4" style="text-align:right;">
<img style=" width:200px" src="http://trade.dev/assets/images/logo.png" alt="3D Group Logo" /><br>
<div class="pageNumber">Page 1 of 1</div>
</div>
</div></div> <div id="content1"> <div style="font-size:12px;" id="POitems12" class="grid-view">
<table class="items table table-condensed table-striped table-bordered">
<thead>
<tr>
<th id="POitems12_c0">Qty</th><th id="POitems12_c1">Sup P/N</th><th id="POitems12_c2">SKU</th><th id="POitems12_c3">Product Title</th><th id="POitems12_c4">Cost</th><th id="POitems12_c5">Total</th></tr>
</thead>
<tbody>
<tr class="odd">
<td style="text-align:center;">2</td><td> </td><td>AES5</td><td>HPC Switch Stick Car Opening Tool</td><td style="text-align:right;">£</td><td style="text-align:right;">£0</td></tr>
<tr class="even">
<td style="text-align:center;">2</td><td> </td><td>AES6</td><td>HPC Gold Finder Killer Kit</td><td style="text-align:right;">£</td><td style="text-align:right;">£0</td></tr>
<tr class="odd">
<td style="text-align:center;">2</td><td> </td><td>AKS5</td><td>Genuine FO21P Keys </td><td style="text-align:right;">£</td><td style="text-align:right;">£0</td></tr>
<tr class="even">
<td style="text-align:center;">2</td><td> </td><td>CTR11</td><td>C2, C3, C3 Pluriel Remote Head</td><td style="text-align:right;">£</td><td style="text-align:right;">£0</td></tr>
<tr class="odd">
<td style="text-align:center;">2</td><td> </td><td>CTR8</td><td>Berlingo Remote Head 02-08</td><td style="text-align:right;">£</td><td style="text-align:right;">£0</td></tr>
<tr class="even">
<td style="text-align:center;">2</td><td> </td><td>FOK1</td><td>Ranger 8C Genuine Key</td><td style="text-align:right;">£</td><td style="text-align:right;">£0</td></tr>
<tr class="odd">
<td style="text-align:center;">2</td><td> </td><td>FOR10</td><td>Ford IR Remote Head</td><td style="text-align:right;">£0.00</td><td style="text-align:right;">£0</td></tr>
<tr class="even">
<td style="text-align:center;">2</td><td> </td><td>FOR3</td><td>3 Button Remote Head (NO CHIP)</td><td style="text-align:right;">£</td><td style="text-align:right;">£0</td></tr>
<tr class="odd">
<td style="text-align:center;">3</td><td> </td><td>KK6</td><td>KIA3R Genuine ID48 Key NAVY</td><td style="text-align:right;">£</td><td style="text-align:right;">£0</td></tr>
<tr class="even">
<td style="text-align:center;">2</td><td> </td><td>KKC1</td><td>KIA3T0</td><td style="text-align:right;">£</td><td style="text-align:right;">£0</td></tr>
<tr class="odd">
<td style="text-align:center;">2</td><td> </td><td>KR1</td><td>Picanto Remote 03-06</td><td style="text-align:right;">£</td><td style="text-align:right;">£0</td></tr>
<tr class="even">
<td style="text-align:center;">2</td><td> </td><td>KYN1</td><td>KYM1P</td><td style="text-align:right;">£</td><td style="text-align:right;">£0</td></tr>
<tr class="odd">
<td style="text-align:center;">4</td><td> </td><td>LPS17</td><td>Ford Tibbe Lock Pick (Clockwise)</td><td style="text-align:right;">£</td><td style="text-align:right;">£0</td></tr>
<tr class="even">
<td style="text-align:center;">5</td><td> </td><td>LPS19</td><td>Ford Tibbe Pick/Decoder Safe Ventures</td><td style="text-align:right;">£</td><td style="text-align:right;">£0</td></tr>
<tr class="odd">
<td style="text-align:center;">3</td><td> </td><td>LPS69</td><td>TOY48 (KIA7/HY22) Kia/Hyundai 2in1 Pick/Decoder</td><td style="text-align:right;">£</td><td style="text-align:right;">£0</td></tr>
<tr class="even">
<td style="text-align:center;">2</td><td> </td><td>MCLE12</td><td>EEPROM Pack 2-11 (Chevrolet/Daewoo & Opel/Vauxhall Advanced)</td><td style="text-align:right;">£</td><td style="text-align:right;">£0</td></tr>
<tr class="odd">
<td style="text-align:center;">3</td><td> </td><td>NC2</td><td>Nissan Codes (Key Number)</td><td style="text-align:right;">£</td><td style="text-align:right;">£0</td></tr>
<tr class="even">
<td style="text-align:center;">2</td><td> </td><td>NR6</td><td>Almera Primera P12 ID46 Remote Head</td><td style="text-align:right;">£</td><td style="text-align:right;">£0</td></tr>
<tr class="odd">
<td style="text-align:center;">2</td><td> </td><td>NR7</td><td>Rounded In Head Remote (Semi-Popular)</td><td style="text-align:right;">£</td><td style="text-align:right;">£0</td></tr>
<tr class="even">
<td style="text-align:center;">2</td><td> </td><td>REL3</td><td>Renault Laguna II Passenger Door Lock Barrel</td><td style="text-align:right;">£</td><td style="text-align:right;">£0</td></tr>
<tr class="odd">
<td style="text-align:center;">3</td><td> </td><td>REL4</td><td>Renault Espace II Passenger Door Lock Barrel</td><td style="text-align:right;">£</td><td style="text-align:right;">£0</td></tr>
<tr class="even">
<td style="text-align:center;">3</td><td> </td><td>SUK5</td><td>Blue Genuine ID46 key SZ11R</td><td style="text-align:right;">£</td><td style="text-align:right;">£0</td></tr>
<tr class="odd">
<td style="text-align:center;">2</td><td> </td><td>SURC2</td><td>HU133R Remote Case</td><td style="text-align:right;">£</td><td style="text-align:right;">£0</td></tr>
<tr class="even">
<td style="text-align:center;">2</td><td> </td><td>TAKC1</td><td>TATA Genuine Key Case</td><td style="text-align:right;">£</td><td style="text-align:right;">£0</td></tr>
<tr class="odd">
<td style="text-align:center;">2</td><td> </td><td>VGK1</td><td>Genuine Skoda HU66 ID13 Key</td><td style="text-align:right;">£</td><td style="text-align:right;">£0</td></tr>
<tr class="even">
<td style="text-align:center;">2</td><td> </td><td>VGR10</td><td>1J0 959 753 P (Beetle)</td><td style="text-align:right;">£</td><td style="text-align:right;">£0</td></tr>
<tr class="odd">
<td style="text-align:center;">2</td><td> </td><td>VGR5</td><td>8Z0 837 231 D</td><td style="text-align:right;">£</td><td style="text-align:right;">£0</td></tr>
<tr class="even">
<td style="text-align:center;">4</td><td> </td><td>VGR7</td><td>5P0 959 753 C </td><td style="text-align:right;">£</td><td style="text-align:right;">£0</td></tr>
<tr class="odd">
<td style="text-align:center;">4</td><td> </td><td>VGR9</td><td>7M3 959 753 / 7M3 959 753 F</td><td style="text-align:right;">£</td><td style="text-align:right;">£0</td></tr>
<tr class="even">
<td style="text-align:center;">2</td><td> </td><td>VXL5</td><td>Opel/Vauxhall Ignition Barrell (Newest)</td><td style="text-align:right;">£</td><td style="text-align:right;">£0</td></tr>
<tr class="odd">
<td style="text-align:center;">4</td><td> </td><td>VXR1</td><td>Corsa C Remote Head</td><td style="text-align:right;">£0.00</td><td style="text-align:right;">£0</td></tr>
<tr class="even">
<td style="text-align:center;">2</td><td> </td><td>VXR12op</td><td>Corsa D Flip Remote (OPEL)</td><td style="text-align:right;">£</td><td style="text-align:right;">£0</td></tr>
</tbody>
</table><div class="keys" style="display:none" title="/admin/purchaseOrder/print/12?type=po&formate=printer&orientation=portrait"><span>68</span><span>73</span><span>57</span><span>52</span><span>48</span><span>58</span><span>46</span><span>50</span><span>75</span><span>74</span><span>51</span><span>76</span><span>61</span><span>49</span><span>72</span><span>69</span><span>53</span><span>59</span><span>60</span><span>70</span><span>71</span><span>56</span><span>44</span><span>55</span><span>54</span><span>64</span><span>65</span><span>62</span><span>63</span><span>67</span><span>47</span><span>66</span></div>
</div><table class="pull-right table table-striped table-condensed" style="width:200px;" id="yw0"><tr class="odd"><th>Total</th><td>£99.99</td></tr>
</table>
<center>If you cannot supply any of the the above items or any of the prices have changed please inform purchasing@3dgroupuk.com</center>
</div>
<div id="footer">this is a footer message to go on every page</div>
</div>
</body>
id need your whole page’s code bc you will need to hide logos, headers, footers, sidebars etc when your printing.
I use Gridview yes, I have at the moment been looking at extending the gridview to add an extra header row because I have been doing some reading of CSS and found a few solutions. But here is what I started with to create the HTML I passed in last message:
This is the grid content section view:
$this->widget(bootstrap.widgets.TbGridView', array(
'id'=>'POitems'.$POItems->id,
'type'=>'condensed striped bordered',
'ajaxUpdate'=>'errors',
'enableSorting' => false,
'dataProvider'=>$POItems->itemlist(),
'template'=>"{items}",
'htmlOptions'=>array("style"=>"font-size:12px;"),
'columns'=>array(
array(
'name' => 'quantity',
'header'=>'Qty',
'htmlOptions'=>array('style'=>'text-align:center;'),
),
array('name'=>'supplier_part_number','header'=>'Sup P/N'),
'product.SKU',
array('name'=>'product.product_title',
'type'=>'raw',
'value'=>'$data->custom_productID==1 ? $data->name : $data->product->product_title'),
array(
'name' => 'cost',
'type'=>'raw',
'value'=> '$data->purchaseOrder->currencySymbol . $data->cost',
'htmlOptions'=>array('style'=>'text-align:right;'),
),
array(
'header' => 'Total',
'name' => 'cost',
'type'=>'raw',
'value'=> '$data->purchaseOrder->currencySymbol . $data->quantity * $data->cost',
'htmlOptions'=>array('style'=>'text-align:right;'),
'footer'=> '$data->purchaseOrder->currencySymbo',
),
)
));
?>
<?php $this->widget('bootstrap.widgets.TbDetailView', array(
'data'=>array('id'=>1, 'sampleCost'=>$model->currencySymbol .'99.99', 'lastName'=>'Otto', 'language'=>'CSS'),
'htmlOptions'=>array("class" => "pull-right", "style"=>"width:200px;"),
'attributes'=>array(
array('name'=>'sampleCost', 'label'=>'Total', 'type'=>'raw'),
),
)); ?><center>If you cannot supply any of the the above items or any of the prices have changed please inform purchasing@3dgroupuk.com</center>
Footer is just simple at the moment
this is a footer message to go on every page
Head is simple at the moment aswell:
<div class="row-fluid ">
<div class="span8">
<h4>Purchase Order Check Sheet <?php echo $model->POID; ?> [ <i><?php echo $model->supplier->name; ?></i> ]</h4>
</div>
<div class="span4" style="text-align:right;">
<?php echo CHtml::image(Yii::app()->createAbsoluteUrl(Yii::app()->baseUrl."/assets/images/logo.png"), "3D Group Logo",array("style"=>" width:200px")); ?><br>
<div class="pageNumber">Page 1 of 1</div>
</div>
</div>
And the view to pull them all together is:
<div class="page" style="width:100%; ">
<?php if(isset($data['header'])) { ?><div id="header"> <?php echo $data['header']; ?></div> <?php }?>
<?php if(isset($data['content'])) { ?><div id="contentPrint"> <?php echo $data['content']; ?></div> <?php }?>
<?php if(isset($data['footer'])) { ?><div id="footer"> <?php echo $data['footer']; ?></div> <?php }?>
</div>
Not had any joy with the CSS approach as the page numbers will not work in IE11, Tried running headers but that doesn’t seem to work either. The only thing I can think of is splitting the grid or just manipulating the data myself instead of using a grid.