// 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.
   $('#prt-container').append('<img src="../img_logo/33logo.png" display="table">');
   $('#gview_'+gid).clone().appendTo('#prt-container').css({'page-break-after':'auto'});

   // remove navigation divs.
   $('#prt-container div').remove('.ui-jqgrid-toppager,.ui-jqgrid-titlebar,.ui-userdata,#jqgh_grid_act,#jqgh_grid_cb,.s-ico,.ui-jqgrid-pager');
   
   $('#prt-container div .cbox').remove();
   $('#prt-container div input').remove();

   // print the contents of the print container.
   $('#prt-container').printElement({pageTitle:pgTitle, overrideElementCSS:[{ href:'css/print-grid.css',media:'print'}]});
   $('#prt-container').empty();
  }
}
// setup grid print capability. Add print button to navigation bar and bind to click.
setPrintGrid('grid','paging','Admin Page');

Hope you success too

"<div id="prt-container"  style="display: none;"></div>"  , will be solved the issuse. But the grid contain could not show on the print page .

Can you help me too?

Thanks

$('#prt-container').empty();

after

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

Anyway, 1 more problem is when i click print, it does not print a div with background color ? Any solution ?

This is my code :

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.printElement.js"></script>
<script type="text/javascript">
function PrintGrid(){
    // empty the print div container.
    $('#prt-container').empty();
    
    // copy and append grid view to print div container.
    
    $('#form').clone().appendTo('#prt-container').css({'page-break-after':'auto'});
    
    // print the contents of the print container.
    $('#prt-container').printElement({overrideElementCSS:[{ href:'index.css',media:'print'}]});
    $('#prt-container').empty();
}
</script>
<div id='prt-container' class='hide'>
</div>

<div id="form">
    <a href="asd">asdasda</a>
    <div id="clr">h</div>
</div>
<div>
test
</div>
<a href="#" onclick="PrintGrid();">print</a>

and this is the css :

#clr {
background:red; width:200px; height:20px; padding:50px; color:red;
}

Many Thank you.

It depends what you do.

Can you please show your code when the print icon is clicked?

Regards

I have a problem when i click the print button. It appear in the bottom of jqgrid

Before :

After i click the button it appear :

Can anyone help me how not display the print after jqgrid ? Many Thanks.

First of all many thanks for your work which will help me in app building !

Please can you tell me why I obtain the message 'a.browser is undefined' from printElement.js when I click on Print button in Firefox 18.0.2 ?

Again, great work !

Cheers

JiheL

I put this code inside PrintGrid(), right before the code removing the navigation divs:

            //Fixed footer in the last page

            $('#prt-container .ui-jqgrid-bdiv').css({ 'height': 'auto' });
            $('#prt-container .ui-jqgrid-sdiv').before($('#prt-container .ui-jqgrid-bdiv'));

            // remove navigation divs.

Besides that, I tested a little more your function and put some header in the 1st page of the printed page.

//Insert logo as a header of the 1st page

$('#prt-container').append('<img src="../../img/Logo1.jpg" display="table">');

    // copy and append grid view to print div container.

I can't explain why this is happening to you since i don't know how you have put together your grid.  In any case, you should not have to modify any of the setPrintGrid function code.  Why don't you zip and email me the file that contains your grid definition and setPrintGrid function call.  I can't promise you anything, but i will take a quick look at it.

So still about #2, I got the footer to stay in the top of the printed page(as img below) by inserting

$('#prt-container .ui-jqgrid-sdiv').after($('#prt-container .ui-jqgrid-bdiv'));

Right before removing the navigation divs in the function PrintGrid.

But I still cant manage to put the footer at the end of the last line of the grid in the printing page.

Everything I tried, the footer overlays the other rows in the 1st page of the printing page as I showed before.

Thanks for the response!

#1 – I was calling setPrintGrid before loading the navgrid. Now I put the call after the navgrid(obviously lol) and it worked!

#2 -Im posting the images. 1st image is the grid on the screen. It has groups and totals for each group. And then in the bottom is the global total that is fixed in the grid as a footer.

2nd its the print of the grid with the fixed footer overlaying the other columns .

I modified the "setPrintGrid" function a bit.  You no longer have to manually define the ".hide" css or the print container div.  The "setPrintGrid" function now does that for you.  All you have to do is create the "print-grid.css" file.

I have posted the new code in a new post so this one does not go on forever.

thanks.

Issue #1 does not occur in my tests.  make sure the "setPrintGrid" function call is placed within the document ready function that contains the grid definition.  I place my "setPrintGrid" call at the bottom of the docutment ready function.

Also, i have updated the code a bit so you don't have to define a print container or add the ".hide" css in some css file.  the new code creates these for you.  all you have to do is create the "print-grid" css file.  the new code is displayed in the next post.

$(function() {

// 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');

});

issue #2 - you'll have to display a screen shot of the your grid before i can help with that.

But Im having 2 issues: 

1. Everytime I reload the grid, a new print button is set in the navgrid.

2. I have a footer row with sums and when I print the grid the footer stays in between the grid rows and not in the end of the last page. I even tried to remove the footer from the prt-container but no sucess.

Any workarounds? 

Here is an image of a work order grid printout with subgrids.

I'm sure someone can probably streamline the process a bit and make it a little more flexable.

On a side note…

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.

I do not have time to test this,

but Thank youfor sharing your solution.

Kind Regards

Tony

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: http://projects.erikzaadi.com/.....038;hellip;..ntElement/ .

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 divs.
   $('#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.