Your search did not match any results.

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.

Backend API
@using DevExtreme.NETCore.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") .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="~/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.NETCore.Demos.Models; using DevExtreme.NETCore.Demos.Models.DataGrid; using DevExtreme.NETCore.Demos.Models.SampleData; using Microsoft.AspNetCore.Mvc; using System.Linq; namespace DevExtreme.NETCore.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.com" }, { "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.com" }, { "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.com" }, { "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.com" }, { "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.com" }, { "ID": 6, "Name": "Walters", "Address": "200 Wilmot Rd", "City": "Deerfield", "State": "Illinois", "Zipcode": 60015, "Phone": "8479402500", "Fax": "(847) 940-2501", "Website": "http://nowebsitewalters.com" }, { "ID": 7, "Name": "StereoShack", "Address": "400 Commerce S", "City": "Fort Worth", "State": "Texas", "Zipcode": 76102, "Phone": "8178200741", "Fax": "(817) 820-0742", "Website": "http://nowebsiteshack.com" }, { "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.com" }, { "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.com" }, { "ID": 10, "Name": "ElectrixMax", "Address": "263 Shuman Blvd", "City": "Naperville", "State": "Illinois", "Zipcode": 60563, "Phone": "6304387800", "Fax": "(630) 438-7801", "Website": "http://nowebsiteelectrixmax.com" }, { "ID": 11, "Name": "Video Emporium", "Address": "1201 Elm Street", "City": "Dallas", "State": "Texas", "Zipcode": 75270, "Phone": "2148543000", "Fax": "(214) 854-3001", "Website": "http://nowebsitevideoemporium.com" }, { "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.com" }];
using System; using System.Collections.Generic; using System.Linq; namespace DevExtreme.NETCore.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; }