Rotated headers not displayed properly in PDF export

[Stefan]

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.

 

[Stefan]

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

[Ivan Danchev]

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

[Stefan]

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

[Ivan Danchev]

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