Printing a grid is showing extra page numbers in the end

[yavnika]

hi all, I tried to implement printing a grid using the article  :http://docs.telerik.com/kendo-ui/controls/data-management/grid/print-export.

I see that at the end of each page in preview, there are repeated page numbers showing up in bulleted form. Can you please tell me how to resolve this issue with printing a grid?

[Dimo]

Hello Yavnika,

Please make sure that you have registered the common Kendo UI stylesheet on the generated print page, and that the stylesheet belongs to the correct Kendo UI version.

http://docs.telerik.com/kendo-ui/styles-and-layout/appearance-styling#getting-started

http://docs.telerik.com/kendo-ui/styles-and-layout/appearance-styling#common-css-files

Here is a Dojo, based on the documentation, which works as expected.

http://dojo.telerik.com/ajoZI

Regards,
Dimo
Telerik by Progress

 

 

[yavnika]

hi Dimo,

I have another question, when I do the print preview of a grid in IE , I am unable to see all the records and there is no scroll bar as well to see those records. how can I rectify this?

in the grid I have 30 items, but in print preview I see only 20 , and there is no scroll bar on it as well. can you please help me here?

[Dimo]

Hi Yavnika,

The observed behavior depends on the configuration of the programmatically opened window. You can tweak it according to your preferences:

https://developer.mozilla.org/en-US/docs/Web/API/Window/open

// ...
win = window.open('', '', 'width=800, height=500, resizable=1, scrollbars=1'),
// ...

Regards,
Dimo
Telerik by Progress

 

 

[yavnika]

hi Dimo,

 

Even with this solution i am unable to get the page numbers to go. The stylesheets that you have used in your example is the same that i have used in mine.

 

 <link href="~/lib/kendo-ui-core/styles/kendo.common.min.css" rel="stylesheet" />

 <link href="~/lib/kendo-ui-core/styles/kendo.default.min.css" rel="stylesheet" />

[Dimo]

Hello Yavnika,

Can you please provide an isolated runnable example (Dojo) for me to inspect? Thank you.

Regards,
Dimo
Telerik by Progress

 

[yavnika]

i am using exactly your code, the problem is in my "printable content" i see this additional data which is causing the issue. Can you tell me some way to exclude this?

 

<ul class="k-pager-numbers k-reset"><li class="k-current-page"><span class="k-link k-pager-nav">1</span></li><li><span class="k-state-selected">1</span></li><li><a tabindex="-1" href="#" class="k-link" data-page="2">2</a></li><li><a tabindex="-1" href="#" class="k-link" data-page="3">3</a></li><li><a tabindex="-1" href="#" class="k-link" data-page="4">4</a></li><li><a tabindex="-1" href="#" class="k-link" data-page="5">5</a></li><li><a tabindex="-1" href="#" class="k-link" data-page="6">6</a></li></ul>

[Dimo]

Hello Yavnika,

I suppose this is what you are after:

http://dojo.telerik.com/ajoZI/3

Any part of the Grid HTML markup can be hidden with appropriate CSS code added to the <style> tag in the htmlStart variable.

.k-grid-toolbar, .k-grid-pager > .k-link, .k-grid-pager > .k-pager-numbers { display: none; }

Feel free to inspect the Grid HTML markup and further modify the print CSS code to suit your preferences.

Regards,
Dimo
Telerik by Progress