Is there any way to print Igrid contents only in a page?
Regards,
Suresh A
Hi Suresh,
Can you specify what do you mean with igGrid Contents only? Do you want to print all the rows loaded on the page?
Thanks,
Yes i want to print all the rows in the grid. I have not enabled paging in my grid.
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.
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.
Yes. This should work in your case.
Please try it and return feedback.
Best regards,
How can i add the code to the .cshtml file where i have the grid in my page. Let me know pls. Do correct me if i am wrong.
Well, this is CSS, so you can put it inline or you can reference it with link tag.
For example you can look at this sample:
http://samples.infragistics.com/jquery/grid/paging-api
In "CODE VIEW" section pick "PagingAPI.cshtml" and look at the source code. There you can see how to put CSS inline in the cshtml file or reference it with link tag.
Note: You don't have to modify the grid MVC code in order to print only the grid. You have to put class attribute on the elements which you don't want to print.
Hi,
Thank you for solving my problem with paginated tables.If you want to have styles for the table I want to print, as it should?Thanks in advance.
Best Regards.
I have a solution which assumes that the whole data is available in the browser i.e. grid is not configured to use remote paging.
The idea is to get the data form the grid data source object and then use it to generate new table with the whole data in it. The original igGrid is not touched. CSS media rules are used to hide the original igGrid when in @media print and show the generated one and vice versa in @media screen mode. If you use a custom button for printing you can delay the generation of the print table until the button is clicked. If you want user to be able to use the browser "Print" button then you should generate the print table after you create the igGrid.
The downside of this method is that you should keep an extra TABLE element in the DOM. If there are too many records in the data source then this may degrade the performance of the page.
Attached you can find a reference implementation of the described method. I used custom button for printing in order to show you a workaround for Internet Explorer. Internet Explorer doesn't like generating the print table on demand before printing. That's why I use conditional comments for IE in order to workaround the problem.
P.S.: It doesn't make sense to use remote paging in case that you want to print the whole data. That's why I didn't cover that scenario.
I have a question similar to this post resolved.
How could we get all the data in the table if the grid is paged? If the grid is paged, we can only access the data of the displayed page. Will print only the current page data. Thanks in advance.
Best Regards
I have uploaded a sample code and the issue which i am facing. Kindly have a look at it and provide me a solution for the same.
Hello Suresh,
Thank you for your great interest in our jQuery grid.
I asked you for an isolated sample in purpose.
I was not able to reproduce the issue using the code snippet provided by Todor
http://community.infragistics.com/forums/t/64705.aspx?PageIndex=2#330000
and the instructions from Martin
http://community.infragistics.com/forums/t/64705.aspx?PageIndex=2#329378
I am attaching the sample I used, trying to replicate the behavior.
Hope hearing from you