New to Telerik UI for ASP.NET Core? Download free 30-day trial

Change Columns Width during PDF Exporting

Environment

Product Grid for Progress® Telerik® UI for UI for ASP.NET Core

Description

How can I change the width of the Telerik UI for ASP.NET Core 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

More ASP.NET Core Grid Resources

See Also

In this article