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

Page numbers

3 Answers 9 Views
ClientExportManager
This is a migrated thread and some comments may be shown as answers.
Jer
Top achievements
Rank 1
Jer asked on 02 Jul 2015, 02:14 PM
Can you provide an example on how to have page numbers on the exported pdf?

3 Answers, 1 is accepted

Sort by
0
Aneliya Petkova
Telerik team
answered on 06 Jul 2015, 07:10 AM
Hi Jeremy,

The only way to add page Numbers in your PDF file is using html elements in your markup(the following code is extracted from our PDF Multi Page Export online demo):
<telerik:RadPageView runat="server" ID="PageView1" CssClass="recipePage">
    <div class="recipeImage qsf-ib">
        <img src="images/Beef_Stewed.png" alt="image" />
    </div>
    <div class="ingredients qsf-ib">
        <p>Beef Stewed in a Salty Herb Crust</p>
        <ul>
            <li>800 gr beef bonfile</li>
            <li>2 tablespoons olive oil</li>
            <li>1 tabslespoon butter</li>
            <li>salt and pepper</li>
        </ul>
        <p class="subtitle">For the crust:</p>
        <ul>
            <li>120 gr cooking salt </li>
            <li>200 gr sea salt</li>
            <li>500 gr butter</li>
            <li>2 egg whites</li>
            <li>250 ml water</li>
            <li>2 tablespoons of rosmarin and salvia</li>
        </ul>
    </div>
    <a href="#">1</a>
</telerik:RadPageView>

You can also use JavaScript to append such elements to every page.

Regards,
Aneliya Petkova
Telerik
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Jer
Top achievements
Rank 1
answered on 10 Jul 2015, 02:20 PM
Thanks! Please provide the JavaScript example to append to every page.
0
Aneliya Petkova
Telerik team
answered on 13 Jul 2015, 10:57 AM
Hi,

I added the following script to the PDF Multi Page Export demo( I am using jQuery .append method to add the page numbers to a certain div element):
window.onload = function (e) {
    var page = $("div.recipePage");
 
    for (var i = 1; i <= page.length; i++) {
        var element = page.eq(i-1);
        $(element).append("<a class='page-numbers' href='#'>" + i.toString() + "</a>");
    }
}

You can style the page numbers using the class I added to the anchor element(page-numbers).

Please find attached the modified demo and test it at your side.

Hope this will be helpful.

Regards,
Aneliya Petkova
Telerik
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Tags
ClientExportManager
Asked by
Jer
Top achievements
Rank 1
Answers by
Aneliya Petkova
Telerik team
Jer
Top achievements
Rank 1
Share this question
or