jQuery Grid Plugin - jqGrid

Hi all,

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.