Integrate the datagrid-export.js script by copying and pasting it in to your project.
(function($){
function retrieveRows(targetElement) {
var gridState = $(targetElement).data('datagrid');
if (gridState.filterSource) {
return gridState.filterSource.rows;
} else {
return gridState.data.rows;
}
}
function generateHtml(targetElement, rowSet) {
rowSet = rowSet || retrieveRows(targetElement);
var grid = $(targetElement);
var htmlOutput = ['| ' + column.title + ' |
|---|
| ' + rowItem\[fieldName\] + ' |');
return htmlOutput.join('');
}
function convertToArray(targetElement, rowSet) {
rowSet = rowSet || retrieveRows(targetElement);
var grid = $(targetElement);
var columnFields = grid.datagrid('getColumnFields', true).concat(grid.datagrid('getColumnFields', false));
var resultArray = [];
var headerRow = [];
for(var idx = 0; idx < columnFields.length; idx++) {
var column = grid.datagrid('getColumnOption', columnFields[idx]);
headerRow.push(column.title);
}
resultArray.push(headerRow);
$.map(rowSet, function(rowItem) {
var dataRow = [];
for(var idx = 0; idx < columnFields.length; idx++) {
dataRow.push(rowItem[columnFields[idx]]);
}
resultArray.push(dataRow);
});
return resultArray;
}
function printGrid(targetElement, parameters) {
var docTitle = null;
var rowSet = null;
if (typeof parameters == 'string') {
docTitle = parameters;
} else {
docTitle = parameters['title'];
rowSet = parameters['rows'];
}
var printWindow = window.open('', '', 'width=800, height=500');
var printDocument = printWindow.document.open();
var pageContent =
'<!doctype html>' +
'<html>' +
'<head>' +
'<meta charset="utf-8">' +
'<title>' + docTitle + '</title>' +
'</head>' +
'<body>' + generateHtml(targetElement, rowSet) + '</body>' +
'</html>';
printDocument.write(pageContent);
printDocument.close();
printWindow.print();
}
function base64ToBlob(base64Data) {
var chunkSize = 512;
var binaryString = atob(base64Data);
var byteChunks = [];
for(var position = 0; position < binaryString.length; position += chunkSize) {
var chunk = binaryString.slice(position, position + chunkSize);
var byteValues = new Array(chunk.length);
for(var i = 0; i < chunk.length; i++) {
byteValues[i] = chunk.charCodeAt(i);
}
var byteArray = new Uint8Array(byteValues);
byteChunks.push(byteArray);
}
return new Blob(byteChunks, {
type: ''
});
}
function exportToExcel(targetElement, parameters) {
var outputFile = null;
var rowSet = null;
var sheetName = 'Worksheet';
if (typeof parameters == 'string') {
outputFile = parameters;
} else {
outputFile = parameters['filename'];
rowSet = parameters['rows'];
sheetName = parameters['worksheet'] || 'Worksheet';
}
var grid = $(targetElement);
var dataUri = 'data:application/vnd.ms-excel;base64,'
, excelTemplate = '<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns="http://www.w3.org/TR/REC-html40"><meta http-equiv="content-type" content="application/vnd.ms-excel; charset=UTF-8"><head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet><x:Name>{worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]--></head><body>{table}</body></html>'
, encodeBase64 = function (text) { return window.btoa(unescape(encodeURIComponent(text))) }
, fillTemplate = function (templateString, context) { return templateString.replace(/{(\w+)}/g, function (match, key) { return context[key]; }) }
var tableHtml = generateHtml(targetElement, rowSet);
var templateContext = { worksheet: sheetName, table: tableHtml };
var encodedData = encodeBase64(fillTemplate(excelTemplate, templateContext));
if (window.navigator.msSaveBlob) {
var blobData = base64ToBlob(encodedData);
window.navigator.msSaveBlob(blobData, outputFile);
} else {
var downloadLink = $('<a style="display:none"></a>').appendTo('body');
downloadLink[0].href = dataUri + encodedData;
downloadLink[0].download = outputFile;
downloadLink[0].click();
downloadLink.remove();
}
}
$.extend($.fn.datagrid.methods, {
toHtml: function(jq, rowSet) {
return generateHtml(jq[0], rowSet);
},
toArray: function(jq, rowSet) {
return convertToArray(jq[0], rowSet);
},
toExcel: function(jq, parameters) {
return jq.each(function() {
exportToExcel(this, parameters);
});
},
print: function(jq, parameters) {
return jq.each(function() {
printGrid(this, parameters);
});
}
});
})(jQuery);
After including the script, invoke the export functionality using the syntax:
$("#offlineTable").datagrid('toExcel', 'myExcel.xls');
The toExcel() method accepts a custom filename as a string parameter. By default, this exports only the rows visible on the current paginated view. To export all data, first retrieve the complete dataset via an AJAX request, then pass the rows as a parameter:
$("#offlineTable").datagrid('toExcel', {
filename: 'exportData.xls',
rows: data.rows,
worksheet: 'Worksheet'
});
Providing the rows parameter overrides the default paginated rows, enabling the export of the entire dataset.