DevExtreme v24.1 is now available.

Explore our newest features/capabilities and share your thoughts with us.

Your search did not match any results.

JavaScript/jQuery Data Grid - Cell Customization

JavaScript 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 JavaScript 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 JavaScript DataGrid cell.
  • pdfCell
    Contains settings applied to a cell in a PDF document.
Backend API
// This code is used for backwards compatibility with the older jsPDF variable name // Read more: https://github.com/MrRio/jsPDF/releases/tag/v2.0.0 window.jsPDF = window.jspdf.jsPDF; $(() => { $('#gridContainer').dxDataGrid({ dataSource: companies, keyExpr: 'ID', width: '100%', showBorders: true, groupPanel: { visible: true, }, grouping: { autoExpandAll: true, }, sortByGroupSummaryInfo: [{ summaryItem: 'count', }], export: { enabled: true, formats: ['pdf'], }, onExporting(e) { // eslint-disable-next-line new-cap const doc = new jsPDF(); DevExpress.pdfExporter.exportDataGrid({ jsPDFDocument: doc, component: e.component, columnWidths: [40, 40, 30, 30, 40], customizeCell({ gridCell, pdfCell }) { 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, 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'); }); }, columns: [{ dataField: 'Name', width: 190, }, { dataField: 'Address', width: 200, }, 'City', { dataField: 'State', groupIndex: 0, }, { dataField: 'Phone', format(value) { const USNumber = value.match(/(\d{3})(\d{3})(\d{4})/); return `(${USNumber[1]}) ${USNumber[2]}-${USNumber[3]}`; }, }, { dataField: 'Website', alignment: 'center', width: 100, cellTemplate(container, options) { return $('<a>', { href: options.value, target: '_blank' }).text('Website'); }, }], summary: { totalItems: [{ column: 'Name', summaryType: 'count', displayFormat: 'Total count: {0}', }], }, }); });
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" lang="en"> <head> <title>DevExtreme Demo</title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script>window.jQuery || document.write(decodeURIComponent('%3Cscript src="js/jquery.min.js"%3E%3C/script%3E'))</script> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/24.1.6/css/dx.light.css" /> <script src="js/dx.all.js"></script> <script src="data.js"></script> <link rel="stylesheet" type="text/css" href="styles.css" /> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script> <script src="index.js"></script> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="gridContainer"></div> </div> </body> </html>
#gridContainer { height: 436px; }
const 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', }];

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 JavaScript 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.