Is there any way to print Igrid contents only in a page?
Regards,
Suresh A
Hi Martin,
Will this work in the same page where i have the grid. My requirement is i have users page with user information in a grid. And there is a print button on the same page. When the user clicks print button only the grid contents needs to be printed by opening a print dialog without opening a new page. Hope you are clear. Pls let me know in case i am not clear.
Hello Suresh A,
I suggest you use css media rule. If you are new to css media types you can look at:
http://www.w3.org/TR/CSS2/media.html and http://www.w3schools.com/css/css_mediatypes.asp
One approach is to define css class rule which has "display: none;" for "@media print". Then you enclose the content you don't want to print in div with this class. Here is the example code:
<style type="text/css"> @media print { .no-print { display: none; } } </style> <body> <div class="no-print"> <div class="header"> <!-- header content here--> </div> </div> <!-- when printing only table will be visible --> <table id="igGrid"></table> <div class="no-print"> <div class="footer> <!-- footer content here --> </div> </div> </body>
<style type="text/css">
@media print
{
.no-print
display: none;
}
</style>
<body>
<div class="no-print">
<div class="header">
<!-- header content here-->
</div>
<!-- when printing only table will be visible -->
<table id="igGrid"></table>
<div class="footer>
<!-- footer content here -->
</body>
I've tested this on all popular browsers recent versions and it works.
Hope this helps,
Martin Pavlov
Infragistics, Inc.
Great!!! but my requirement is i dont want to open a new page when the user hits on print button. It has to open the print dialog directly and print the grid contents only and not anyother content in a page.
Hi Suresh,
you can use, rows method of igGrid which returns you a list of all TR elements holding data in the grid.
Then you can iterate trough them and append them to a table. Once you have them in the table you can print the table, using whatever technique you want
Here is an example how to get the rows into a table:
$('<table id="resultTable" ></table>').appendTo($('#printHolder')); var rows = $('#grid2').igGrid('allRows'); rows.each(function(index) { $(this).clone().appendTo($('#resultTable')); });
Hope that helps
Any updates on this?