one idea for jqgrid print view - printing

Question

I would like to have two views in jqgrid:
1) the regular grid view with sortable columns, pagination, etc (It's great and works really well...love it!).
2) a "print view" which can easily be styled with css and customized for print. The class structure should not be too complicated because I want to easily make my own style sheet. One important thing is to be able to repeat the column headers on each printed page. (I do not like to print from a jqgrid. Even when I add the jqgrid stylesheet with "media=print", the printed results are very hard to control.)
So, what I did was to first create a jqGrid. Then, using it's data, create my own table and print from that. It's a bit of a hack. But it works.
1- Create the grid and insert it into a div. Note I called "build_print_view" in the "loadComplete" function, based on the presence of a variable. This allows me to control whether I want to show "print view" or a "grid view" first:
function classGrid(select_val, showgrid){
jQuery.get('/lookupgrid/lookupgrid/get_grid', function(data) {
var _html= jQuery(data);
jQuery('#resultdiv').html(_html);
var gridtable = jQuery("#list");
var formdata = new Array();
formdata.push({
name: "var1",
value: "whatever"
});
formdata.push({
name: "var2",
value: "whateverelse"
});
var lastsel;
console_log("in classGrid");
gridtable.jqGrid({
url:'/lookupgrid/lookupgrid/class_grid',
colNames:['var1','var2'],
colModel :[
{
name:'var1',
index:'var1',
width:95
},
{
name:'var2',
index:'var2',
width:95
}],
datatype: 'json',
mtype: 'POST',
pager: '#pager',
rowList:[10,20,30],
loadComplete: function() {
if(!showgrid){
build_print_view();
}
},
onSelectRow: function(id){
var rowdata = gridtable.jqGrid('getRowData',id);
alert('Selected row ID ' + id + " var1 is " + rowdata.var1);
},
loadonce: true,
postData:formdata,
width: 800,
height: 300,
pgtext:"Page {0}",
viewrecords: true,
gridview: true,
caption: 'Class Results'
});
gridtable.jqGrid('navGrid','#pager',{
edit:false,
add:false,
del:false
});
});
}
2 - In build_print_view() you can extract the data from the jqgrid and put it into a table, which can be styled however you like with your own stylesheets.
function build_print_view(){
var gridtable = jQuery("#list");
var lista = gridtable.jqGrid('getGridParam','data');
var tablestr = "";
for(var i=0;i<lista.length;i++){
var rowData = lista[i];
tablestr += "<tr>"
tablestr += "<td class=\"wide cycle\" style=\"width:50px;\" id=\"sku\">"+rowData.var1+"</td>";
tablestr += "<td class=\"wide cycle\" style=\"width:300px;\" id=\"skudesc\">"+rowData.var2+"</td>";
tablestr += "</tr>";
}
jQuery.get('/lookupgrid/lookupgrid/get_print_view', function(data) {
var _html= jQuery(data);
_html.find('#printresults').append(tablestr);
jQuery('#resultdiv').html(_html);
});
}
3 - The rest of the table, and etc tags are returned by the ajax "get" call to "/lookupgrid/lookupgrid/get_print_view" and I just plop tablestr into "#printresults" div, i.e.:
<div id="printview">
<table id="clsitems" class="wide">
<thead>
<tr>
<th colspan="10" class="wide" id="label">
</th>
</tr>
<tr>
<td class="wide label">
var1:
</td>
<td class="wide label">
var2:
</td>
</tr>
</thead>
<tbody id="printresults">
</tbody>
</table>
</div>
4 - The only weirdness is that if "print view" is requested, the jqGrid gets created and flashes on the screen for a second, and then the print view table replaces it in its div.
Actually, if there were a good way to just construct the jqGrid without displaying it, I would prefer that. I could then display the jqGrid later if "screen view" were requested.