This is a migrated thread and some comments may be shown as answers.

PDF Export Title

1 Answer 10 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Sam
Top achievements
Rank 1
Sam asked on 30 Oct 2013, 08:46 PM

I’ve been trying to get a Title for the pdf export in HTML format, and so far, no luck. I’ve seen every discussion about it and the help in the Grid documentation. So far, not cool at all.

I want to create a complex HTML div, with multiple tables, company logo, project information, filter information, and other important report information. I’m including a simple sample, if you can help me format it correctly so it can work, that would be great; if you can create a sample of a div with multiple tables, that would be great too.

Thank you,
-Sam

<div style="font-family: Arial; font-size: medium; width: 100%">
      <table style="width: 100%">
          <tr>
              <td style="width: 25%">
                  <table style="text-align: left">
                      <tr>
                          <td rowspan="3" style="vertical-align: middle">
                              <img alt="" src="../Images/2Forecast_100.png" width="200px" />
                          </td>
                          <td style="padding-left: 10px">
                              ForecastName
                          </td>
                      </tr>
                      <tr>
                          <td style="padding-left: 10px">
                              PrevForecastName
                          </td>
                      </tr>
                      <tr>
                          <td style="padding-left: 10px">
                              FilterDesc
                          </td>
                      </tr>
                  </table>
              </td>
              <td style="width: 50%; vertical-align: top;">
                  <table style="width: 100%; text-align: center;">
                      <tr>
                          <td style="font-size: large; font-weight: bold; text-align: center; width: 100%;">
                              Job Forecast Report
                          </td>
                      </tr>
                      <tr>
                          <td style="font-weight: bold">
                              JobName
                          </td>
                      </tr>
                  </table>
              </td>
              <td style="width: 25%; text-align: right; padding-right: 20px; vertical-align: middle;">
                  <table style="float: right">
                      <tr>
                          <td>
                              Comments
                          </td>
                      </tr>
                  </table>
              </td>
          </tr>
      </table>
  </div>

1 Answer, 1 is accepted

Sort by
0
Kostadin
Telerik team
answered on 04 Nov 2013, 12:14 PM
Hi Sam,

Thank you for contacting us.

Note that adding of such complex code block is not supported out of the box. Nevertheless a possible solution is to manually add the provided tables into the raw html before exporting the grid. In order to achieve that you have to hook OnPdfExporting event. Please check out the following code snippet.
protected void RadGrid1_PdfExporting(object sender, GridPdfExportingArgs e)
    {
        e.RawHTML = @"
<div style='font-family: Arial; font-size: medium;'>
      <table style='width: 500px'>
      <colgroup>
        <col />
        <col />
        <col />
       </colgroup>
          <tr>
              <td style='width: 200px'>
                  <table style='text-align: left; width: 125px'>
                  <colgroup>
                    <col />
                    <col />
                  </colgroup>
                      <tr>
                          <td rowspan='3' style='vertical-align: middle'>
                              Image
                          </td>
                          <td style='padding-left: 10px'>
                              ForecastName
                          </td>
                      </tr>
                      <tr>
                          <td style='padding-left: 10px'>
                              PrevForecastName
                          </td>
                      </tr>
                      <tr>
                          <td style='padding-left: 10px'>
                              FilterDesc
                          </td>
                      </tr>
                  </table>
              </td>
              <td style='width: 250px; vertical-align: top;'>
                  <table style='width: 500px; text-align: center;'>
                  <colgroup>
                    <col />
                  </colgroup>
                      <tr>
                          <td style='font-size: large; font-weight: bold; text-align: center; width: 250px;'>
                              Job Forecast Report
                          </td>
                      </tr>
                      <tr>
                          <td style='font-weight: bold'>
                              JobName
                          </td>
                      </tr>
                  </table>
              </td>
              <td style='width: 125px; text-align: right; padding-right: 20px; vertical-align: middle;'>
                  <table style='float: right; width: 125px'>
                  <colgroup>
                    <col />
                  </colgroup>
                      <tr>
                          <td>
                              Comments
                          </td>
                      </tr>
                  </table>
              </td>
          </tr>
      </table>
  </div>
"
            + e.RawHTML;
    }

There are a few rules that should be followed when exporting HTML tables to PDF:
  • The table should define <colgroup> and <col> elements
  • The number of col elements should be equal to the number of the columns in the table body
  • Width in pixels (or another absolute units) should be set to the table

This information could be found at the following help article under Exporting HTML tables section. Additionally at the bottom of the page you could find a list with the most common error which you might encounter during implementation of the tables.

I hope this information proves helpful. Please let me know if any further assistance is needed.


Regards,
Kostadin
Telerik
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
Tags
Grid
Asked by
Sam
Top achievements
Rank 1
Answers by
Kostadin
Telerik team
Share this question
or