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

Add Header To Every Page

5 Answers 89 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Jonathan
Top achievements
Rank 1
Jonathan asked on 02 Feb 2018, 06:17 PM
I want to have one grid act as a "header" and add it to the top of every page in my pdf.  Is it possible to achieve such?

5 Answers, 1 is accepted

Sort by
0
Jonathan
Top achievements
Rank 1
answered on 06 Feb 2018, 12:54 PM
Hello - does anyone have an answer for such?  I am exporting 2 RadGrids to a pdf - and I want one grid to be the header for each page of the pdf that is exported.
0
Attila Antal
Telerik team
answered on 07 Feb 2018, 12:56 PM
Hi Jonathan,

It is only possible to add text, image and some very basic table to the header.

There are two ways to add header to the PDF document. One of which is by following the approach from Header and Footer Support and the other one is demonstrated in the Grid - Export to PDF demo which is using the content of the CommandItemTemplate to set it as header. (see also screenshot attached pdf_headers.png)

Attached you can find a basic sample demonstrating the scenario with the CommandItem. (PDF_export_gap_in_header.zip)

I hope this will help.

Kind regards,
Attila Antal
Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Jonathan
Top achievements
Rank 1
answered on 08 Feb 2018, 01:03 AM

@Attila Antal - I saw those examples on the site.  I was more wanting to display an actual RadGrid (it would be a header row and a data row) in the header of every page.

 

Is something like this possible?  It is not static text nor a static image, but merely displaying a radgrid in the header.

0
Jonathan
Top achievements
Rank 1
answered on 08 Feb 2018, 01:04 AM
[quote]Attila Antal said:Hi Jonathan,

It is only possible to add text, image and some very basic table to the header.

There are two ways to add header to the PDF document. One of which is by following the approach from Header and Footer Support and the other one is demonstrated in the Grid - Export to PDF demo which is using the content of the CommandItemTemplate to set it as header. (see also screenshot attached pdf_headers.png)

Attached you can find a basic sample demonstrating the scenario with the CommandItem. (PDF_export_gap_in_header.zip)

I hope this will help.

Kind regards,
Attila Antal
Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.

[/quote]

 

@Attila Antal - I saw those examples on the site.  I was more wanting to display an actual RadGrid (it would be a header row and a data row) in the header of every page.

Is something like this possible?  It is not static text nor a static image, but merely displaying a radgrid in the header.

0
Attila Antal
Telerik team
answered on 12 Feb 2018, 02:51 PM
Hi Jonathan,

I am afraid, RadGrid cannot be exported as page header for PDF. A basic table, in the other hand, can be (see results in the html_table_as_PDF_page_header.png screenshot).

HTML table with several rows and cells is placed into the CommandItemTemplate of RadGrid and is only visible when exporting it, unless the CommandItemDisplay property is always set to True.
<telerik:RadGrid ID="RadGrid1" runat="server" AllowPaging="True" CellSpacing="0" CellPadding="0"
    OnItemCreated="RadGrid1_ItemCreated"
    GridLines="None"
    Width="800px"
    OnNeedDataSource="RadGrid1_NeedDataSource">
    <ExportSettings IgnorePaging="true" OpenInNewWindow="false">
        <Pdf PageTopMargin="-2" PageLeftMargin="-1" PageRightMargin="-1" PageWidth="200mm" PageHeight="110mm">
            <PageFooter>
                <MiddleCell Text="Page <?page-number?>" />
            </PageFooter>
        </Pdf>
    </ExportSettings>
    <MasterTableView AutoGenerateColumns="true" DataKeyNames="OrderID" CommandItemDisplay='<%# (RadGrid1.IsExporting) ? GridCommandItemDisplay.Top : GridCommandItemDisplay.None %>'>
        <CommandItemSettings ShowExportToPdfButton="true" />
        <CommandItemTemplate>
            <table style="width: 630px; padding-bottom:20px;">
                <colgroup>
                    <col />
                    <col />
                    <col />
                    <col />
                    <col />
                </colgroup>
                <tr>
                    <td style="background-color:blueviolet;"><%# "You can even use server code" %></td>
                    <td style="background-color:aqua;">Row1 Cell2</td>
                    <td style="background-color:antiquewhite;">Row1 Cell3</td>
                    <td style="background-color:aquamarine;">Row1 Cell4</td>
                    <td style="background-color:bisque;">Row1 Cell5</td>
                </tr>
                <tr>
                    <td style="background-color:burlywood;">Row2 Cell1</td>
                    <td style="background-color:cadetblue;">Row2 Cell2</td>
                    <td style="background-color:chocolate;">Row2 Cell3</td>
                    <td style="background-color:coral;">Row2 Cell4</td>
                    <td style="background-color:cornflowerblue;">Row2 Cell5</td>
                </tr>
                <tr>
                    <td style="background-color:crimson;">Row3 Cell1</td>
                    <td style="background-color:darkcyan;">Row3 Cell2</td>
                    <td style="background-color:darkkhaki;">Row3 Cell3</td>
                    <td style="background-color:darkorange;">Row3 Cell4</td>
                    <td style="background-color:darkturquoise;">Row3 Cell5</td>
                </tr>
            </table>
        </CommandItemTemplate>
    </MasterTableView>
</telerik:RadGrid>

I've modified my previous sample to resemble this scenario and attached it along with the screenshot.

Kind regards,
Attila Antal
Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
General Discussions
Asked by
Jonathan
Top achievements
Rank 1
Answers by
Jonathan
Top achievements
Rank 1
Attila Antal
Telerik team
Share this question
or