PDF Export Title

[Sam]

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>

[Kostadin]

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