Print all pages of grid

[Kevork]

 Hi,

I have a grid with paging and I need to print all the pages of that grid. 

I have already tried with your previous threads' solution. But they didn't work. In one solution it was suggested to use the solution like below:

<p><span style="line-height: 1.5;">var grid = $("#gridEmployeeMaintenance").data("kendoGrid").dataSource;</span></p><p><span style="line-height: 1.5;">grid.pageSize(grid.total());​</span></p>

var grid = $("#gridEmployeeMaintenance").data("kendoGrid").dataSource;

grid.pageSize(grid.total());​

After printing set the pagesize to previous.

But the above solution didn't work. My current try is like below. It also doesn't work. In the loop "gridElement.clone()[0].outerHTML" always get the contents of first page even the page number is set to 2 or 3. 

<p>var printableContent = ""; </p><p>var pages = getPageTotalNumber($('#gridEmployeeMaintenance'));</p><p>var gridElement = $('#gridEmployeeMaintenance');<br><br>    for (var index = 1; index <= pages; index++) {<br>        gridElement.data("kendoGrid").dataSource.page(index);<br>        printableContent += gridElement.clone()[0].outerHTML;<br>    }</p>

var printableContent = ""; 

var pages = getPageTotalNumber($('#gridEmployeeMaintenance'));

var gridElement = $('#gridEmployeeMaintenance');

    for (var index = 1; index <= pages; index++) {
        gridElement.data("kendoGrid").dataSource.page(index);
        printableContent += gridElement.clone()[0].outerHTML;
    }

 

Please suggest me any suitable solution.

 

Thanks

[Alexander Popov]

Hi Kevork,

I would suggest checking the Grid printing and exporting article.

Regards,
Alexander Popov
Telerik

[Kevork]

Hi,

 

Thanks for the reply but it only returns contents of the 1st page. I have already tried out this solution. But I ​need to print the contents of all pages of the grid.

  

Thanks.

[Alexander Popov]

Hello again,

In order to do that you need to render all Grid items before the printing. Try setting a one-time dataBound event handler in which the print method is called and set the pageSize to the total amount of items. Here is a proof of concept example using similar approach.

Regards,
Alexander Popov
Telerik

[Geetha]

Hello Alexandar, your last post was helpful to generate the entire data of grid, but when I do window.print(), the page with the left menu bar, top header, navigationbar and breadcrumps are also printed, How do i go about not printing these? also i have grid with dynamic columns of datetime(depends on the date range), the user wised to have the extra columns in next page. How to achieve this?

Regards,

Geetha

[Alex Hajigeorgieva]

Hello, Geetha,

When using window.print(), you should add print CSS and hide the content that you do not need:

https://docs.telerik.com/kendo-ui/controls/data-management/grid/export/print-export#printing-existing-web-pages

You can find examples of this on the internet:

https://stackoverflow.com/questions/355313/how-do-i-hide-an-element-when-printing-a-web-page

Kind Regards,
Alex Hajigeorgieva
Progress Telerik

[Geetha]

Hello ALex, thank you for the reply, i have one more problem, i need to print a Grid with more columns(column virtualization more than 20), how do i achieve printing in this case, i tried with the above example but it doesnot print all the columns.

Is there any way i can draw and customize the table?

[Alex Hajigeorgieva]

Hi, Geetha,

The content needs to be present on the page in order to be printed.

The virtualization concept is that the HTML elements are reused and the content is dynamically replaced on scrolling.

https://docs.telerik.com/kendo-ui/controls/data-management/grid/columns/virtualization

Therefore, virtualization contradicts with the grid printing as virtualization does not include all of the columns at the time of printing. 

To print the grid, you will need to revert to non-virtualized columns so that all of the cells are available and populated at the time of printing.

Regards,
Alex Hajigeorgieva
Progress Telerik