Cell Customization
DataGrid allows you to modify cell style settings and custom paint cells in a PDF document.
Use the customizeCell function to customize the appearance settings of DataGrid cells in a PDF document. For example, you can change the text alignment and the background color of cells. The following function parameters are available:
- gridCell
Contains information about the source DataGrid cell. - pdfCell
Contains settings applied to a cell in a PDF document.
In this demo, the customizeCell function changes the following elements:
- Background color and font weight of group row cells
- Font style of a footer cell
The customDrawCell function allows you to draw cells in a PDF document. The following parameters are available when you use this function:
- doc
An instance of the jsPDFDocument object. - rect
A cell’s bounds. - gridCell
Contains information about the source DataGrid cell. - pdfCell
Contains settings applied to a cell in a PDF document. - cancel
Set this parameter to true to prevent default painting logic.
This demo uses the customDrawCell function to paint cells in the "Website" column.
Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you for the feedback!
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Backend API
@using DevExtreme.MVC.Demos.Models
@section ExternalDependencies {
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
<script>
window.jsPDF = window.jspdf.jsPDF;
</script>
}
@(Html.DevExtreme().DataGrid<Company>()
.ID("gridContainer")
.DataSource(new JS("companies"))
.KeyExpr("ID")
.Width("100%")
.ShowBorders(true)
.GroupPanel(groupPanel => groupPanel.Visible(true))
.Grouping(grouping => grouping.AutoExpandAll(true))
.SortByGroupSummaryInfo(i => i.Add().SummaryItem("count"))
.Columns(columns =>
{
columns.Add().DataField("Name").Width(190);
columns.Add().DataField("Address").Width(200);
columns.Add().DataField("City");
columns.Add().DataField("State")
.GroupIndex(0);
columns.Add().DataField("Phone")
.Format(new JS("phoneNumberFormat"));
columns.Add().DataField("Website")
.Caption("")
.Alignment(HorizontalAlignment.Center)
.Width(100)
.CellTemplate(@<text>
<a href="<%- value %>" target="_blank">
Website
</a>
</text>);
})
.Summary(s => s
.TotalItems(totalItems =>
{
totalItems.AddFor(m => m.Name)
.SummaryType(SummaryType.Count)
.DisplayFormat("Total count: {0}");
})
)
.Export(e => e.Enabled(true).Formats(new[] { "pdf" }) )
.OnExporting("exportToPDF")
)
<script src="~/Scripts/data/companies.js"></script>
<script>
function exportToPDF(e) {
var doc = new jsPDF();
DevExpress.pdfExporter.exportDataGrid({
jsPDFDocument: doc,
component: e.component,
columnWidths: [40, 40, 30, 30, 40],
customizeCell(options) {
const { gridCell } = options;
const { pdfCell } = options;
if (gridCell.rowType === 'data' && gridCell.column.dataField === 'Phone') {
pdfCell.text = pdfCell.text.replace(/(\d{3})(\d{3})(\d{4})/, '($1) $2-$3');
} else if (gridCell.rowType === 'group') {
pdfCell.backgroundColor = '#BEDFE6';
} else if (gridCell.rowType === 'totalFooter') {
pdfCell.font.style = 'italic';
}
},
customDrawCell(options) {
const { gridCell } = options;
const { pdfCell } = options;
if (gridCell.rowType === 'data' && gridCell.column.dataField === 'Website') {
options.cancel = true;
doc.setFontSize(11);
doc.setTextColor('#0000FF');
const textHeight = doc.getTextDimensions(pdfCell.text).h;
doc.textWithLink('website',
options.rect.x + pdfCell.padding.left,
options.rect.y + options.rect.h / 2 + textHeight / 2, { url: pdfCell.text });
}
},
}).then(() => {
doc.save('Companies.pdf');
});
}
function phoneNumberFormat(value) {
var USNumber = value.match(/(\d{3})(\d{3})(\d{4})/);
return "(" + USNumber[1] + ") " + USNumber[2] + "-" + USNumber[3];
}
</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 PDFCellCustomization() {
return View();
}
}
}
var companies=[{
"ID": 1,
"Name": "Super Mart of the West",
"Address": "702 SW 8th Street",
"City": "Bentonville",
"State": "Arkansas",
"Zipcode": 72716,
"Phone": "8005552797",
"Fax": "(800) 555-2171",
"Website": "http://nowebsitesupermart.dx"
}, {
"ID": 2,
"Name": "Electronics Depot",
"Address": "2455 Paces Ferry Road NW",
"City": "Atlanta",
"State": "Georgia",
"Zipcode": 30339,
"Phone": "8005953232",
"Fax": "(800) 595-3231",
"Website": "http://nowebsitedepot.dx"
}, {
"ID": 3,
"Name": "K&S Music",
"Address": "1000 Nicllet Mall",
"City": "Minneapolis",
"State": "Minnesota",
"Zipcode": 55403,
"Phone": "6123046073",
"Fax": "(612) 304-6074",
"Website": "http://nowebsitemusic.dx"
}, {
"ID": 4,
"Name": "Tom's Club",
"Address": "999 Lake Drive",
"City": "Issaquah",
"State": "Washington",
"Zipcode": 98027,
"Phone": "8009552292",
"Fax": "(800) 955-2293",
"Website": "http://nowebsitetomsclub.dx"
}, {
"ID": 5,
"Name": "E-Mart",
"Address": "3333 Beverly Rd",
"City": "Hoffman Estates",
"State": "Illinois",
"Zipcode": 60179,
"Phone": "8472862500",
"Fax": "(847) 286-2501",
"Website": "http://nowebsiteemart.dx"
}, {
"ID": 6,
"Name": "Walters",
"Address": "200 Wilmot Rd",
"City": "Deerfield",
"State": "Illinois",
"Zipcode": 60015,
"Phone": "8479402500",
"Fax": "(847) 940-2501",
"Website": "http://nowebsitewalters.dx"
}, {
"ID": 7,
"Name": "StereoShack",
"Address": "400 Commerce S",
"City": "Fort Worth",
"State": "Texas",
"Zipcode": 76102,
"Phone": "8178200741",
"Fax": "(817) 820-0742",
"Website": "http://nowebsiteshack.dx"
}, {
"ID": 8,
"Name": "Circuit Town",
"Address": "2200 Kensington Court",
"City": "Oak Brook",
"State": "Illinois",
"Zipcode": 60523,
"Phone": "8009552929",
"Fax": "(800) 955-9392",
"Website": "http://nowebsitecircuittown.dx"
}, {
"ID": 9,
"Name": "Premier Buy",
"Address": "7601 Penn Avenue South",
"City": "Richfield",
"State": "Minnesota",
"Zipcode": 55423,
"Phone": "6122911000",
"Fax": "(612) 291-2001",
"Website": "http://nowebsitepremierbuy.dx"
}, {
"ID": 10,
"Name": "ElectrixMax",
"Address": "263 Shuman Blvd",
"City": "Naperville",
"State": "Illinois",
"Zipcode": 60563,
"Phone": "6304387800",
"Fax": "(630) 438-7801",
"Website": "http://nowebsiteelectrixmax.dx"
}, {
"ID": 11,
"Name": "Video Emporium",
"Address": "1201 Elm Street",
"City": "Dallas",
"State": "Texas",
"Zipcode": 75270,
"Phone": "2148543000",
"Fax": "(214) 854-3001",
"Website": "http://nowebsitevideoemporium.dx"
}, {
"ID": 12,
"Name": "Screen Shop",
"Address": "1000 Lowes Blvd",
"City": "Mooresville",
"State": "North Carolina",
"Zipcode": 28117,
"Phone": "8004456937",
"Fax": "(800) 445-6938",
"Website": "http://nowebsitescreenshop.dx"
}];
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace DevExtreme.MVC.Demos.Models {
public class Company {
public int ID { get; set; }
public string Name { get; set; }
public string Address { get; set; }
public string City { get; set; }
public string State { get; set; }
public int ZipCode { get; set; }
public string Phone { get; set; }
public string Fax { get; set; }
public string Website { get; set; }
}
}
#gridContainer {
height: 436px;
}