jQuery Grid Plugin - jqGrid

nelsonm, tyvm for the code! A really nice solution for the printing problem.

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? 

Hello!

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.

[Image Can Not Be Found]

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.

I manage to solve the issue with the fixed footer today. Aparently was a matter of css. Im posting my solution maybe it will help others if they have similar issues. I was using jqueryui for the css of the jqgrid.

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.

Hello, this plugins help me very much, Thanks to you first 🙂

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.

hai, it's done. I just add

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

Hai macrabbit, my code is just like this 🙂

// 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