Guriddo » Topic: For those looking to print a jqGrid grid.

For those looking to print a jqGrid grid.

Guriddo
For those looking to print a jqGrid grid.

This topic has 17 replies, 6 voices, and was last updated 12 years, 4 months ago by gushendra86.

Creator

Topic
September 7, 2012 at 10:28 pm #80297

nelsonm
Participant

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

1. create a div container somewhere.

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){
Creator

Topic

Viewing 15 replies - 1 through 15 (of 17 total)

1 2 →

Author

Replies
September 10, 2012 at 6:47 pm #100154

tony
Keymaster

Hello,

I do not have time to test this,

but Thank youfor sharing your solution.

Kind Regards

Tony

September 10, 2012 at 7:55 pm #100164

nelsonm
Participant

No problem…

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.

September 10, 2012 at 11:21 pm #100165

nelsonm
Participant

Also, preceding the “table, th and td” css entries in the “print-grid.css” file in the original post with “#prt-container” should eliminate any problems with the css entries interfering with other tables.

September 12, 2012 at 7:49 pm #100170

nelsonm
Participant

Here is the jqgrid screen.

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

September 24, 2012 at 11:25 pm #100208

mah
Participant

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

But Im having 2 issues:

September 25, 2012 at 12:40 am #100209

nelsonm
Participant

mah,

Issue #1 does not occur in my tests.

September 25, 2012 at 12:49 am #100210

nelsonm
Participant

hi all,

I modified the “setPrintGrid” function a bit.

October 1, 2012 at 4:40 pm #100266

mah
Participant

Hi!

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 .

October 2, 2012 at 9:34 pm #100274

mah
Participant

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.

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.

October 3, 2012 at 2:21 am #100275

nelsonm
Participant

mah,

I can't explain why this is happening to you since i don't know how you have put together your grid.

October 4, 2012 at 8:21 pm #100283

mah
Participant

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:

February 14, 2013 at 1:16 pm #100725

JiheL
Participant

Hi Nelsomn

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

July 10, 2013 at 10:22 am #101199

gushendra86
Participant

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.

July 10, 2013 at 12:53 pm #101202

tony
Keymaster

Hello,

It depends what you do.

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

Regards

July 12, 2013 at 11:53 am #101217

gushendra86
Participant

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 :

function PrintGrid(){
Author

Replies