This is a migrated thread and some comments may be shown as answers.

Rotated headers not displayed properly in PDF export

4 Answers 76 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Stefan
Top achievements
Rank 1
Stefan asked on 15 Jan 2020, 04:31 PM

Hello,

 

I am trying to rotate the headers of the Kendo UI grid 90° like it is described here: https://www.telerik.com/forums/rotate-headers-90deg-(vertical-headers)

This is working in the browser but when I export the grid as PDF, the header text is cut off at the top. See attached pictures.

 

Thanks.

 

4 Answers, 1 is accepted

Sort by
0
Stefan
Top achievements
Rank 1
answered on 16 Jan 2020, 08:52 AM

Found a solution: Removed the fixed column width and now it is working.

0
Ivan Danchev
Telerik team
answered on 17 Jan 2020, 11:42 AM

Hello Stefan,

Thank you for sharing your solution. At my end even with fixed width of the columns the rotated headers are exported without getting cut off (tested it in Chrome), but I am glad removing the width resolves the issue at your end.

Regards,
Ivan Danchev
Progress Telerik

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Stefan
Top achievements
Rank 1
answered on 13 Feb 2020, 02:44 PM

Hi Ivan,

 

unfortunately this just solved the problem when there are only a few columns in the table.. If I add more columns, the header still gets cut off in the pdf file.

Here is a dojo: https://dojo.telerik.com/@stefan.neumeister/EqoZayIw

 

Is there maybe a css class which I can modifiy to fix this?

 

Thanks,

BR Stefan

0
Ivan Danchev
Telerik team
answered on 17 Feb 2020, 12:41 PM

Stefan,

Small column width values can cause this. If the text of the column is long, but the columns width value is small, part of the text will get cut off. So you can either leave the columns without width value:

columns: [
  { field: "ProductName", headerTemplate: "<span class='verticalText'>Product Name</span>" },
  { field: "UnitPrice", title: "Unit Price", format: "{0:c}" },
  { field: "UnitsInStock", headerTemplate: "<span class='verticalText'>Units In Stock</span>" },
  { field: "Discontinued" }
]

or set higher column width values:

{ field: "UnitsInStock", headerTemplate: "<span class='verticalText'>Units In Stock</span>", width: "60px" },

Here's the modified example: https://dojo.telerik.com/EXOnIKus

And how it looks like exported: screenshot.

Regards,
Ivan Danchev
Progress Telerik

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
Grid
Asked by
Stefan
Top achievements
Rank 1
Answers by
Stefan
Top achievements
Rank 1
Ivan Danchev
Telerik team
Share this question
or