Basic printing for a datagrid

[TracySchloss]

What is the easiest way to print the contents of a datagrid?  I have a grid that is populated with the results of a query or find.  My frame is defined as

    <div id="bottomPane" data-dojo-type="dijit.layout.ContentPane" region="bottom" style="width:auto, position:absolute; top:auto">               <div dojoType="dojox.layout.Dock" id="dock" widgetid="dock"></div>            <h3 id="gridTitle">Providers in this area: </h3>            Click Provider Map to see these locations.          <button id="btnPrint" dojotype="dijit.form.Button" onClick="printIt(document.getElementById('resultsGrid').innerHTML); return false;" title="Print List" value="Print List">Print List</button>            <table data-dojo-type="dojox.grid.DataGrid" id="resultsGrid" selectionmode="none" >           <thead>              <tr>               <th field="PIN" formatter="makeZoomButton" width="35px" title="First, open map,click on ID to see location.">                </th>                <th field="FACILITY" width="400px">Provider</th>                <th field="ADDRESS" width="320px">Address</th>                 <th field="CITY" width="190px">City</th>                  <th field="PHONE" width="150px">Phone</th>              </tr>            </thead>          </table>           </div> 

My print button calls a function that creates a simple HTML for printing:

   function printIt(printThis) { var win = window.open(); self.focus(); win.document.open(); win.document.write('<'+'html'+'><'+'head'+'><'+'style'+'>'); win.document.write('body, td { font-family: Verdana; font-size: 12pt;}'); win.document.write('<'+'/'+'style'+'><'+'/'+'head'+'><'+'body'+'>'); win.document.write(printThis); win.document.write('<'+'/'+'body'+'><'+'/'+'html'+'>'); win.document.close(); win.print(); win.close(); }

This does create something printable, but the rows are at the very top of the page and the headers are sandwiched between the 1st and 2nd row.  I'm thinking it might be as simple as adding some additional styling to this print function?  Also there are two small square at the bottom that are maybe tiny cells?  They look like checkboxes.  I thought maybe it was the zoom icon I have in the first column that will add an infoWindow, but I took that out and it didn't make a difference. 
[ATTACH=CONFIG]20464[/ATTACH]


I did find that the enhanced grid maybe had some printing capabilities, but I don't want to pull apart my entire code, which is done except for this printing.

[SteveCole]

I would follow the approach you have so far with just a couple tweaks. Here's my two cents:

1. Use your printIt function but pass the datagrid object instead of it's innerHtml


2. Inside of the function, loop through the rows in your dataGrid and then add rows to an HTML table

I can't guarantee this code works since I'm not at work and don't have access to my own datagrid related code but hopefully you can see what I'm thinking:

function printIt(myGrid)
{
 var win = window.open();
 self.focus();
 win.document.open();
 win.document.write('<'+'html'+'><'+'head'+'><'+'style'+'>');
 win.document.write('body, td { font-family: Verdana; font-size: 12pt;}');
 win.document.write('<'+'/'+'style'+'><'+'/'+'head'+'><'+'body'+'>');
 win.document.write('<table style=\"width:100%\"><th style=\"font-weight:bold\">Facility</th><th style=\"font-weight:bold\">Address</th><th style=\"font-weight:bold\">City</th><th style=\"font-weight:bold\">Phone</th>');

 myGrid.store.fetch({
   onComplete: function (items) {
    dojo.forEach(items, function (item, index) { ... 
    win.document.write('<tr><td>' + item.FACILITY + '</td><td>' + item.ADDRESS + '</td><td>' + item.CITY + '</td><td>' + item.PHONE + '</td></tr>');
    })
   }
 });
 win.document.write('</table>');
 win.document.write('<'+'/'+'body'+'><'+'/'+'html'+'>');
 win.document.close();
 win.print();
 win.close();
}

[TracySchloss]

I did wonder about passing the innerHTML instead of the grid, but the sample came from one of web developers which is not familiar with dojo datagrids.  I'm sure he stuck with what he is familiar with.

I'm a little confused about the ... you put in the dojo.forEach.  Are you thinking something more is needed there?  I can't think what, but it is Monday morning!

[TracySchloss]

It was getting stuck on the myGrid.store.fetch, but I remembered I had set a variable 'store' in another function, which worked just fine. 

function printIt()
{
    var win = window.open();
    self.focus();
    win.document.open();
    win.document.write('<'+'html'+'><'+'head'+'><'+'style'+'>');
    win.document.write('body, td { font-family: Verdana; font-size: 12pt;}');
    win.document.write('<'+'/'+'style'+'><'+'/'+'head'+'><'+'body'+'>');
    win.document.write('<table style=\"width:100%\"><th style=\"font-weight:bold\">Facility</th><th style=\"font-weight:bold\">Address</th><th style=\"font-weight:bold\">City</th><th style=\"font-weight:bold\">Phone</th>');

    store.fetch({
         onComplete: function (items) {
             dojo.forEach(items, function (item, index) { 
                win.document.write('<tr><td>' + item.FACILITY + '</td><td>' + item.ADDRESS + '</td><td>' + item.CITY + '</td><td>' + item.PHONE + '</td></tr>');
             });
         }
    });
    win.document.write('</table>');
    win.document.write('<'+'/'+'body'+'><'+'/'+'html'+'>');
    win.document.close();
    win.print();
    win.close();
}

The only thing that doesn't look quite right in this is the column headers look to be centered over the columns, leaving them looking offset to the right.  I'm hoping there is an alignment I can set somewhere. I'm still trying to track that down.

[SteveCole]

Cool- I'm glad you've got things going. Regarding the alignment, you can add some CSS aligning options in the style="" portion of the HTML code I suggested for which ever part of the HTML table needs it (table header (TH), table row (TR), table data (TD)):

text-align: <left|center|right>

If you also need to tweak the vertical alignment, add one of these CSS options as well:

vertical-align: <top|center|bottom>

HTML Tables have an ALIGN and VALIGN option but it's been depreciated in favor of the CSS formatting tags. These old options will work unless you're working with HTML 5.

W3 HTML TD Tag Reference

[TracySchloss · Accepted solution]

I switched it to text-align instead of just align.

This is what worked for me.  It assumes that your store variable is global.  Mine was set when I created and populated the grid in an earlier function.

 function printIt() {     var win = window.open();     self.focus();     win.document.open();     win.document.write('<'+'html'+'><'+'head'+'><'+'style'+'>');     win.document.write('body, td { font-family: Verdana; font-size: 12pt;}');      win.document.write(' th { font-weight: bold; text-align:left;}');     win.document.write('<'+'/'+'style'+'><'+'/'+'head'+'><'+'body'+'>');     win.document.write('<table style=\"width:100%\"><th >Facility</th><th >Address</th><th >City</th><th >Phone</th>');      store.fetch({          onComplete: function (items) {              dojo.forEach(items, function (item, index) {                  win.document.write('<tr><td>' + item.FACILITY + '</td><td>' + item.ADDRESS + '</td><td>' + item.CITY + '</td><td>' + item.PHONE + '</td></tr>');              });          }     });     win.document.write('</table>');     win.document.write('<'+'/'+'body'+'><'+'/'+'html'+'>');     win.document.close();     win.print();     win.close(); }

[AxelSchaefer]

Unfortunetaly I'm not completely in that topic so my hint might be rubbish. You also seem to have a solution. Anyway, you may take a look at the dojox.grid.enhanced.plugins.Printer package.

http://dojotoolkit.org/reference-guide/1.8/dojox/grid/EnhancedGrid/plugins/Printer.html

• It's a dojox package so it might not work nicely.


• It only seems to work with an Enhanced Grid.


• But it uses different CSS for layouting the result and the code look quite easy.

You may need to download the source of dojo to get an running sample in the directory: dojox\grid\tests\enhanced\.

[TracySchloss]

I had tried the enhanced grid for another project and I found it tricker to use than the original datagrid.  Like you said it is dojox, although I've used others that worked just fine.  For this particular project, I was trying to avoid having to make a bunch of changes just to get this last piece of functionality done.  Still good suggestions though for the next time!