Printing a grid is showing extra page numbers in the end

8 posts, 0 answers
  1. yavnika
    yavnika avatar
    7 posts
    Member since:
    Aug 2016

    Posted 06 Sep Link to this post

    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?

  2. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 08 Sep Link to this post

    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
     
    Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
     
  3. Kendo UI is VS 2017 Ready
  4. yavnika
    yavnika avatar
    7 posts
    Member since:
    Aug 2016

    Posted 09 Sep in reply to Dimo Link to this post

    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?

  5. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 12 Sep Link to this post

    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
     
    Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
     
  6. yavnika
    yavnika avatar
    7 posts
    Member since:
    Aug 2016

    Posted 15 Sep in reply to Dimo Link to this post

    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" />

  7. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 15 Sep Link to this post

    Hello Yavnika,

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

    Regards,
    Dimo
    Telerik by Progress
     
    Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
  8. yavnika
    yavnika avatar
    7 posts
    Member since:
    Aug 2016

    Posted 15 Sep in reply to Dimo Link to this post

    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>

  9. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 15 Sep Link to this post

    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
     
    Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
     
Back to Top
Kendo UI is VS 2017 Ready