The DataGrid allows you to customize a header and a footer in the exported PDF file.
Follow the steps below to configure a header/footer:
Call the exportDataGrid(options) method.
Use the following API to specify header/footer layout settings:
For a header
Use the topLeft object to specify a start position for DataGrid export. This position should be below the header.
For a footer
Use the customDrawCell function to calculate the coordinates of the last right cell of the DataGrid.
Execute a promise after the exportDataGrid(options) method. In this promise, specify position and appearance of the header/footer.
@using DevExtreme.MVC.Demos.Models
@model IEnumerable<CountryPopulationAndGDP>
@section ExternalDependencies {
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/3.0.1/jspdf.umd.min.js"></script>
<script>
window.jsPDF = window.jspdf.jsPDF;
</script>
}
<div class="long-title"><h3>Country Area, Population, and GDP Structure</h3></div>
@(Html.DevExtreme().DataGrid<CountryPopulationAndGDP>()
.ID("gridContainer")
.DataSource(Model, "ID")
.ShowBorders(true)
.Columns(c =>
{
c.AddFor(m => m.Country);
c.AddFor(m => m.Area);
c.Add()
.Caption("Population")
.Columns(a =>
{
a.AddFor(m => m.Population_Total)
.Format(Format.FixedPoint);
a.AddFor(m => m.Population_Urban)
.Format(Format.Percent);
});
c.Add()
.Caption("Nominal GDP")
.Columns(a =>
{
a.AddFor(m => m.GDP_Total)
.Format(Format.FixedPoint)
.SortOrder(SortOrder.Desc);
a.Add()
.Caption("By Sector")
.Columns(b =>
{
b.AddFor(m => m.GDP_Agriculture)
.Width(95)
.Format(f => f.Type(Format.Percent).Precision(1));
b.AddFor(m => m.GDP_Industry)
.Width(80)
.Format(f => f.Type(Format.Percent).Precision(1));
b.AddFor(m => m.GDP_Services)
.Width(85)
.Format(f => f.Type(Format.Percent).Precision(1));
});
});
})
.Export(e => e.Enabled(true).Formats(new[] { "pdf" }))
.OnExporting("exportToPDF")
)
<script>
function exportToPDF(e) {
const doc = new jsPDF();
const lastPoint = { x: 0, y: 0 };
DevExpress.pdfExporter.exportDataGrid({
jsPDFDocument: doc,
component: e.component,
topLeft: { x: 1, y: 15 },
columnWidths: [30, 20, 30, 15, 22, 22, 20, 20],
customDrawCell({ rect }) {
if (lastPoint.x < rect.x + rect.w) {
lastPoint.x = rect.x + rect.w;
}
if (lastPoint.y < rect.y + rect.h) {
lastPoint.y = rect.y + rect.h;
}
},
}).then(() => {
const header = 'Country Area, Population, and GDP Structure';
const pageWidth = doc.internal.pageSize.getWidth();
doc.setFontSize(15);
const headerWidth = doc.getTextDimensions(header).w;
doc.text(header, (pageWidth - headerWidth) / 2, 20);
const footer = 'www.wikipedia.org';
doc.setFontSize(9);
doc.setTextColor('#cccccc');
const footerWidth = doc.getTextDimensions(footer).w;
doc.text(footer, (lastPoint.x - footerWidth), lastPoint.y + 5);
doc.save('Companies.pdf');
});
}
</script>
using DevExtreme.MVC.Demos.Models;
using DevExtreme.MVC.Demos.Models.DataGrid;
using DevExtreme.MVC.Demos.Models.SampleData;
using System;
using System.Linq;
using System.Web.Mvc;
namespace DevExtreme.MVC.Demos.Controllers {
public class DataGridController : Controller {
public ActionResult PDFHeaderAndFooter() {
return View(SampleData.CountriesPopulationAndGDP);
}
}
}using System.Collections.Generic;
namespace DevExtreme.MVC.Demos.Models.SampleData {
public partial class SampleData {
public static readonly IEnumerable<CountryPopulationAndGDP> CountriesPopulationAndGDP = new[] {
new CountryPopulationAndGDP {
ID = 1,
Country = "Brazil",
Area = 8515767,
Population_Urban = 0.85,
Population_Rural = 0.15,
Population_Total = 205809000,
GDP_Agriculture = 0.054,
GDP_Industry = 0.274,
GDP_Services = 0.672,
GDP_Total = 2353025 },
new CountryPopulationAndGDP {
ID = 2,
Country = "China",
Area = 9388211,
Population_Urban = 0.54,
Population_Rural = 0.46,
Population_Total = 1375530000,
GDP_Agriculture = 0.091,
GDP_Industry = 0.426,
GDP_Services = 0.483,
GDP_Total = 10380380 },
new CountryPopulationAndGDP {
ID = 3,
Country = "France",
Area = 675417,
Population_Urban = 0.79,
Population_Rural = 0.21,
Population_Total = 64529000,
GDP_Agriculture = 0.019,
GDP_Industry = 0.183,
GDP_Services = 0.798,
GDP_Total = 2846889 },
new CountryPopulationAndGDP {
ID = 4,
Country = "Germany",
Area = 357021,
Population_Urban = 0.75,
Population_Rural = 0.25,
Population_Total = 81459000,
GDP_Agriculture = 0.008,
GDP_Industry = 0.281,
GDP_Services = 0.711,
GDP_Total = 3859547 },
new CountryPopulationAndGDP {
ID = 5,
Country = "India",
Area = 3287590,
Population_Urban = 0.32,
Population_Rural = 0.68,
Population_Total = 1286260000,
GDP_Agriculture = 0.174,
GDP_Industry = 0.258,
GDP_Services = 0.569,
GDP_Total = 2047811 },
new CountryPopulationAndGDP {
ID = 6,
Country = "Italy",
Area = 301230,
Population_Urban = 0.69,
Population_Rural = 0.31,
Population_Total = 60676361,
GDP_Agriculture = 0.02,
GDP_Industry = 0.242,
GDP_Services = 0.738,
GDP_Total = 2147952 },
new CountryPopulationAndGDP {
ID = 7,
Country = "Japan",
Area = 377835,
Population_Urban = 0.93,
Population_Rural = 0.07,
Population_Total = 126920000,
GDP_Agriculture = 0.012,
GDP_Industry = 0.275,
GDP_Services = 0.714,
GDP_Total = 4616335 },
new CountryPopulationAndGDP {
ID = 8,
Country = "Russia",
Area = 17098242,
Population_Urban = 0.74,
Population_Rural = 0.26,
Population_Total = 146544710,
GDP_Agriculture = 0.039,
GDP_Industry = 0.36,
GDP_Services = 0.601,
GDP_Total = 1857461 },
new CountryPopulationAndGDP {
ID = 9,
Country = "United States",
Area = 9147420,
Population_Urban = 0.81,
Population_Rural = 0.19,
Population_Total = 323097000,
GDP_Agriculture = 0.0112,
GDP_Industry = 0.191,
GDP_Services = 0.797,
GDP_Total = 17418925 },
new CountryPopulationAndGDP {
ID = 10,
Country = "United Kingdom",
Area = 244820,
Population_Urban = 0.82,
Population_Rural = 0.18,
Population_Total = 65097000,
GDP_Agriculture = 0.007,
GDP_Industry = 0.21,
GDP_Services = 0.783,
GDP_Total = 2945146
}
};
}
}
#gridContainer sup {
font-size: 0.8em;
vertical-align: super;
line-height: 0;
}
.long-title h3 {
font-family: 'Segoe UI Light', 'Helvetica Neue Light', 'Segoe UI', 'Helvetica Neue', 'Trebuchet MS', Verdana;
font-weight: 200;
font-size: 28px;
text-align: center;
margin-bottom: 20px;
}