Change Columns Width during PDF Exporting
Environment
| Product | Grid for Progress® Telerik® UI for UI for ASP.NET MVC |
Description
How can I change the width of the Telerik UI for ASP.NET MVC Grid columns when I export them to PDF?
Solution
The PDF Export appends a k-pdf-export class to all the elements and then removes it. That is why, you can target the colgroup > col setting and use CSS rules.
.k-pdf-export colgroup > col {
width: 50px !important;
}
.k-pdf-export td {
white-space: nowrap;
}
You can also target specific columns by using the :nth-child() selector.
.k-pdf-export colgroup > col:nth-child(1),
.k-pdf-export colgroup > col:nth-child(4),
.k-pdf-export colgroup > col:nth-child(7)
{
width: 150px !important;
}
For a runnable example based on the code above, refer to the Telerik REPL project on changing column width during PDF exporting