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
$(() => {
$('#gridContainer').dxDataGrid({
dataSource: companies,
keyExpr: 'ID',
width: '100%',
showBorders: true,
groupPanel: {
visible: true,
},
grouping: {
autoExpandAll: true,
},
sortByGroupSummaryInfo: [{
summaryItem: 'count',
}],
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} companies',
}],
},
export: {
enabled: true,
},
onExporting(e) {
const workbook = new ExcelJS.Workbook();
const worksheet = workbook.addWorksheet('Companies');
worksheet.columns = [
{ width: 5 }, { width: 30 }, { width: 25 }, { width: 15 }, { width: 25 }, { width: 40 },
];
DevExpress.excelExporter.exportDataGrid({
component: e.component,
worksheet,
keepColumnWidths: false,
topLeftCell: { row: 2, column: 2 },
customizeCell(options) {
const { gridCell } = options;
const { excelCell } = options;
if (gridCell.rowType === 'data') {
if (gridCell.column.dataField === 'Phone') {
excelCell.value = parseInt(gridCell.value, 10);
excelCell.numFmt = '[<=9999999]###-####;(###) ###-####';
}
if (gridCell.column.dataField === 'Website') {
excelCell.value = { text: gridCell.value, hyperlink: gridCell.value };
excelCell.font = { color: { argb: 'FF0000FF' }, underline: true };
excelCell.alignment = { horizontal: 'left' };
}
}
if (gridCell.rowType === 'group') {
excelCell.fill = { type: 'pattern', pattern: 'solid', fgColor: { argb: 'BEDFE6' } };
}
if (gridCell.rowType === 'totalFooter' && excelCell.value) {
excelCell.font.italic = true;
}
},
}).then(() => {
workbook.xlsx.writeBuffer().then((buffer) => {
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'Companies.xlsx');
});
});
},
});
});
<!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://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/7.12.1/polyfill.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/exceljs/4.4.0/exceljs.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js"></script>
<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>
<link rel="stylesheet" type="text/css" href="styles.css" />
<script src="data.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',
}];