How To: Format RadGrid PDFs

On Monday, I showed you some the new settings in RadGrid 5 the enable you to control certain aspects exported PDFs. We looked at how you can easily set the PDF's metadata, change its filename, and even control the PDF's security settings. All of these settings- along with the ability to force the PDF to open in a new window- can be set with a single property in the Grid's new ExportSettings configuration block. What we didn't look at on Monday is how you can control the formatting of your exported PDFs. Today we'll take a look at how you can customize the styling of the Grid rendered to the exported PDF.

One thing should be clear before we begin: the RadGrid styles that you see in the browser (the Grid's skin) will not directly render to the PDF when the data is exported. The Grid's PDF rendering mechanism does not support styles contained in external stylesheets. Rather, the rendering mechanism requires that styles be rendered inline with the Grid's markup to be properly conveyed to the PDF format. And that's the code we'll take a close look at in this post.

For our discussion today, let's say we have a page with a single RadGrid and ASP.NET button. When the button is clicked, we want to export the data from our Grid to a PDF. Simple enough. The markup for that page might look something like this:



When this page is rendered in the browser, we'll see the button and the RadGrid with it's cool new default skin:



But when we click the "Export" button, the grid in our PDF looks like this:



Clearly, we need to add some styles to our PDF grid. To do that, we'll need to add some code to our page that applies custom CSS styles to the RadGrid when the "Export" button is clicked. These styles will not be displayed on the page; they will only be applied to the exported PDF. For today's demo, I am going to work on changing the header style of my RadGrid. You can apply many standard CSS styles to your Grid's cells when exporting to PDF, but not all styles will be rendered. I'll try to provide a complete list of styles that do not affect the rendering of the PDF in a future blog post. For now, let's look at the simple code that is required to apply my styles:



The key to this code is the "ApplyStyleToPdfExport" method that I've created. This method accepts a GridTableView (which will be the MasterTableView from our RadGrid) and then applies some settings to the Grid's header. The basic format for applying style rules is:

gridItem.Style["<css property>"] = "value";

Where "gridItem" is the item from the GridTableView you want to style and "css property" is the style setting you want to apply. One of the biggest limits at the moment seems to be the inability to change the PDFs font with this approach, but as soon as I find a workaround I'll update this post. Other than that, you can set these styles just like you would if your were styling the Grid manually for display on a page.

With our new styling code ready, when the "Export" button on the page is clicked the exported PDF now looks like this:



Quite an improvement! Okay, it's not that dramatic, but you get the idea. And that's all there is to it. With these basic concepts in hand, you can style your exported RadGrid data to your heart's client's content.