I've tried in Firefox, Chrome and IE. There are some problems.

1) With big textarea fields, Firefox print all, IE – the same. Chrome loses the rightmost part.

2) If width of columns is not set and field content is rather short – all OK. But, if width is set, and table body has long text fields – then header columns width is different from body. I suppose the clue is something like this:
- grid consists of several tables – e.g. one for header, one for body.

- long text fields adjust width accordinng to text size

So, may be some kind of solution is to copy header cells with width attributes to the body table and remove the header table. This way – the header and the body columns will be the same width.

I put this:
var t1=$('#prt-container thead'); 

$('#prt-container tbody').before(t1.clone());

 t1.remove();  

And it fixes my table.

I don't know, if is possible with subgrids… 

I guess that it may have something to to with css incompatability.  try tweaking the css file.

good luck.

It works fine at IE and firefox, but when i use Chorme, i can't see any grid lines.

Could you help me?

Thanks

Please name the css file "print-container.css" instead of "print-grid.css".  The function will still work but you won't get any grid lines if you don't name the css file "print-container.css".

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

I improved the "setPrintGrid" function a bit.  You no longer have to manually define the ".hide" css class 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, add the function code to a javascript file and place the function call after any and all grid definitions.

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.

Follow the steps below to set it up.

1. download and install Erik Zaadi's "printElement" plugin at: http://projects.erikzaadi.com/…..038;hellip;..ntElement/ .

2. create a "print-grid.css" file that contains entries to display grid lines on print.  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.

#prt-container table {
    border-collapse:collapse;
}

#prt-container th,
#prt-container td {
    border:1px solid black;
}

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

$(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');

});

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(){
            // attach print container style and div to DOM.
            $('head').append('<style type="text/css">.prt-hide {display:none;}</style>');
            $('body').append('<div id="prt-container" class="prt-hide"></div>');

    
            // 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-container.css',media:'print'}]});

            // remove print container style and div from DOM after printing is done.
            $('head style').remove();
            $('body #prt-container').remove();
        }
    }

I hope this helps.