Advanced: Exporting an Ajax DataGrid to PDF

Introduction

In this tutorial we will show you how to export the contents of your Ajax DataGrid to PDF by using the Universal Data Exporter ASP Behavior.

How to do it

Create a new ASP page.

1. Insert an Ajax DataGrid from your DMXzone Tab in Dreamweaver and edit its settings.
   
   
   To see how to set up your Ajax DataGrid, watch our online tutorial
   
   In the Content Tab of the Ajax DataGrid editor, make sure you enter the path of your images, in our case we write in
   Content Before: <img src="uploads/
   and in
   Content After: " />
   for the column which contains your images so that when you export to PDF they will be visible.
   
   
   
2. Create web elements, such as dummy links or images, that you will use as buttons that trigger the export process.
   
   
   
3. Select the element you would like to use and find the Universal Data Exporter ASP Behavior under the Behaviors tab
   
   
   Note:  Server Behaviors generate server code (ASP/PHP) and are executed on the server side, while Regular Behaviors are just JavaScript functions executed on the client side.
4. A new popup with the Universal Data Exporter ASP behavior interface appears:
   
   
   
5. Select the Element ID of your Ajax DataGrid under the General settings in the Main tab.
   
   
   Then select the output type which in our case will be PDF
   
   
   
6. Next, take a look at the specific Markup options for the PDF output format.  Many options are available here like setting the Font type, color, and size of the table header and the cells, changing the background color of your rows and header, setting your row height and more.
   
   We will change the background color of the Table Header.
   
   
   Then we will change the Background color of the odd rows under Miscellaneous Settings:
   
   
   And also edit our Even Row BgColor
   
   
   If there are a lot of records in your Ajax DataGrid, you can use page numbers:
   
   
   You can also add a table title and define its font type, color, size, and text alignment:
   
   
   
7. Click OK to save your settings!
8. You can set the event which will trigger the behavior – all standard behaviors are available such as onClick, onFocus, etc. We choose onClick for this tutorial.
   
   
   
   
9. Save your work and test the result in your browser.
   It should look like this:
   
   
   When you click on the PDF link at the bottom, a download window should pop up:
   
   
   Your exported PDF Grid will look like this: