Changing the scrollable property for printing?

7 posts, 1 answers
  1. Answer
    Sypher
    Sypher avatar
    79 posts
    Member since:
    Aug 2006

    Posted 17 Apr 2013 Link to this post

    I have a grid that is set to scrollable:true, but I would like it to be false during printing. I can use a print button that does some settings, calls window.print(), then cleans up the settings, but I'm not sure if I can set the scrollable property to false in that way.

    I already do a lot of separate styling in CSS for printing, but the issue I can't get around for the scrollable grid is the separate table for the fixed column headers. It doesn't allow the headers to be printed on each page (in non-WebKit browsers) like normal thead rows in a single table.

    It would be possible for me to create a separate grid just for printing, but I have around 16 in the app so far and I would like the user's choices of sorting and filtering to be kept, so I'd rather not do that.

    Ideas?
  2. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 19 Apr 2013 Link to this post

    Hi Bryan,

    The Grid scrollbar is removed during printing via print CSS. However, this will not be good enough if the table rows are too many to fit on a single sheet of paper, as you have observed. So your options are:

    1) reduce the Grid page size
    2) destroy the Grid and create a new one with scrolling disabled, setting all sort and filter expressions manually to the dataSource by using its API
    3) if option (2) seems too unattractive, you can try getting the innerHTML of the Grid data and its headers, generate a new <table> element on the page and print that instead.

    Greetings,
    Dimo
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
  4. Sypher
    Sypher avatar
    79 posts
    Member since:
    Aug 2006

    Posted 19 Apr 2013 Link to this post

    Thanks, Dimo. Not what I wanted to hear, but it is what I was expecting. At least now I know I'm not missing the easy solution. :-)

    Bryan
  5. Teguh
    Teguh avatar
    6 posts
    Member since:
    May 2015

    Posted 14 Jun Link to this post

    Hi, 

    I have similar challenges. Since this topic has been around quite a while, is there been any other solution that requires less time to implement? :)

  6. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 14 Jun Link to this post

    Hi Teguh,

    The following documentation page demonstrates how to print a scrollable Grid. This is the approach that we can offer at this point.

    http://docs.telerik.com/kendo-ui/controls/data-management/grid/print-export

    Let me know if you have any specific questions.

    Regards,
    Dimo
    Telerik
     
    Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
     
  7. Teguh
    Teguh avatar
    6 posts
    Member since:
    May 2015

    Posted 14 Jun in reply to Dimo Link to this post

    Hi Dimo, 

    Thanks for the prompt response.

    My main concern is that we have a page with multiple grids, and if we have to customise each of them this would be taking too much time.

    Is there any way to make the grid overflow properly without overlapping the control bellow it? Would it be possible to use a css page break after the grid ends?

    Might also worth mentioning that our grids are wrapped in section.

    Regards, 

    TS

  8. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 14 Jun Link to this post

    Hello Teguh,

    The raised topics are related to general web page printing techniques. The same concerns would apply if you have several HTML tables inside scrollable parents. In case you would like to benefit from our technical advice on this scenario, I can recommend our Professional Services.

    http://www.telerik.com/professional-services

    Regards,
    Dimo
    Telerik
    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