For those looking to print a jqGrid grid.

[nelsonm]

Hi all,

For those who want to be able to print a jqGrid grid, i'd like to offer a nice solution. Even though you only have to specify the main grid id, any sub grids nested within the main grid print out nicely as well. All of this is done on the client side in javascript.

The function adds a print button to the end of the standard jqGrid buttons on the left side of the navigation bar and binds the button to the print function on click. The function uses jQuery and jqGrid methods as well as the third party "printElement" plugin to accomplish the task.

0. download and install Erik Zaadi's "printElement" plugin at: [projects.erikzaadi.com...] .

1. create a div container somewhere.

<div id='prt-container' class='hide'>
</div>

2. create a "print-grid.css" file that contains entries to hide the container and display grid lines on print.

.hide {display:none;}
table {border-collapse:collapse;}
th, td {border:1px solid black; !important}

3. add the "setPrintGrid" function call to the end of your grid definition. The function parameters are (grid_id, pager_id, button_title)

// example jqGrid
$('#tab4-grid').jqGrid({
.
pager: '#tab4-pager',
toppager: true, // comment out if you don't want the the top nav bar.
.
});

// setup grid print capability. Add print button to navigation bar and bind to click.
setPrintGrid('tab4-grid','tab4-pager','Customer Grid');

4. add the setPrintGrid function definition to some javascript file with a global namespace.

// setup grid print capability. Add print button to navigation bar and bind to click.
function setPrintGrid(gid,pid,pgTitle){
  // print button title.
  var btnTitle = 'Print Grid';

  // setup print button in the grid top navigation bar.
  $('#'+gid).jqGrid('navSeparatorAdd','#'+gid+'_toppager_left', {sepclass :'ui-separator'});
  $('#'+gid).jqGrid('navButtonAdd','#'+gid+'_toppager_left', {caption: '', title: btnTitle, position: 'last', buttonicon: 'ui-icon-print', onClickButton: function() {PrintGrid();} });

  // setup print button in the grid bottom navigation bar.
  $('#'+gid).jqGrid('navSeparatorAdd','#'+pid, {sepclass : "ui-separator"});
  $('#'+gid).jqGrid('navButtonAdd','#'+pid, {caption: '', title: btnTitle, position: 'last', buttonicon: 'ui-icon-print', onClickButton: function() { PrintGrid();} });

  function PrintGrid(){
   // empty the print div container.
   $('#prt-container').empty();

   // copy and append grid view to print div container.
   $('#gview_'+gid).clone().appendTo('#prt-container').css({'page-break-after':'auto'});

   // remove navigation div.
   $('#prt-container div').remove('.ui-jqgrid-toppager,.ui-jqgrid-titlebar,.ui-jqgrid-pager');

   // print the contents of the print container.
   $('#prt-container').printElement({pageTitle:pgTitle, overrideElementCSS:[{ href:'css/print-grid.css',media:'print'}]});
  }
}

I hope it helps someone.

[nelsonm]

Oops…

I realized that the "print-grid.css" file should not contain the ".hide" css entry. The ".hide" css entry should be put in a css file that is defined in the head of the index page. Also, the "print-grid.css" file should NOT be defined on the index or any other page. It should just exist in the css folder of the site and be called from the "printElement" plugin.

Defining "print-grid.css" in the head of the index or any other page would interfere with other tables.

Sorry about that.