Menu
I am new in jQuery/jQgrid coding. I am using jQgrid version is 4.4.4 & jQuery 1.8.3. I want to enable export to PDF/EXCEL functionality in my jQgrid. For that I referred following links - Click Here and Click Here. On the basis of this links, I developed few lines of code in jquery which is as follows:
.jqGrid('navGrid', topPagerSelector, { edit: false, add: false, del: false, search: false, pdf: true}, {}, {}, {}, {}
}).jqGrid('navButtonAdd',topPagerSelector,{
id:'ExportToPDF',
caption:'',
title:'Export To Pdf',
onClickButton : function(e)
{
try {
$("#tbPOIL").jqGrid('excelExport', { tag: 'pdf', url: sRelativePath + '/rpt/poil.aspx' });
} catch (e) {
window.location = sRelativePath + '/rpt/poil.aspx&oper=pdf';
}
},
buttonicon: 'ui-icon-print'
});
But this code is not working properly. I searched on internet google a lot but I am not getting useful & relevant info to achieve my task. Is anyone know how to do this???
UPDATE: I a am not using paid version of jqgrid.
598
jqGrid is an Ajax-enabled JavaScript control that provides solutions for representing and manipulating tabular data on the web.
Here is a clever solution to save the jqGrid data as excel sheet: (You just need to call this function with GridID and an optional Filename)
var createExcelFromGrid = function(gridID,filename) {
var grid = $('#' + gridID);
var rowIDList = grid.getDataIDs();
var row = grid.getRowData(rowIDList[0]);
var colNames = [];
var i = 0;
for(var cName in row) {
colNames[i++] = cName; // Capture Column Names
}
var html = "";
for(var j=0;j<rowIDList.length;j++) {
row = grid.getRowData(rowIDList[j]); // Get Each Row
for(var i = 0 ; i<colNames.length ; i++ ) {
html += row[colNames[i]] + ';'; // Create a CSV delimited with ;
}
html += '\n';
}
html += '\n';
var a = document.createElement('a');
a.id = 'ExcelDL';
a.href = 'data:application/vnd.ms-excel,' + html;
a.download = filename ? filename + ".xls" : 'DataList.xls';
document.body.appendChild(a);
a.click(); // Downloads the excel document
document.getElementById('ExcelDL').remove();
}
We first create a CSV string delimited with ;. Then an anchor tag is created with certain attributes. Finally click is called on a to download the file.
57
function to be called inside of your onclick event.
function exportGrid(){
mya = $("#" + table).getDataIDs(); // Get All IDs
var data = $("#" + table).getRowData(mya[0]); // Get First row to get the
// labels
var colNames = new Array();
var ii = 0;
for ( var i in data) {
colNames[ii++] = i;
} // capture col names
var html = "<html><head>"
+ "<style script="css/text">"
+ "table.tableList_1 th {border:1px solid black; text-align:center; "
+ "vertical-align: middle; padding:5px;}"
+ "table.tableList_1 td {border:1px solid black; text-align: left; vertical-align: top; padding:5px;}"
+ "</style>"
+ "</head>"
+ "<body style="page:land;">";
for ( var k = 0; k < colNames.length; k++) {
html = html + "<th>" + colNames[k] + "</th>";
}
html = html + "</tr>"; // Output header with end of line
for (i = 0; i < mya.length; i++) {
html = html + "<tr>";
data = $("#" + table).getRowData(mya[i]); // get each row
for ( var j = 0; j < colNames.length; j++) {
html = html + "<td>" + data[colNames[j]] + "</td>"; // output each Row as
// tab delimited
}
html = html + "</tr>"; // output each row with end of line
}
html = html + "</table></body></html>"; // end of line at the end
alert(html);
html = html.replace(/'/g, ''');
// var form = "<form name='pdfexportform' action='generategrid' method='post'>";
// form = form + "<input type='hidden' name='pdfBuffer' value='" + html + "'>";
// form = form + "</form><script>document.pdfexportform.submit();</sc"
// + "ript>";
// OpenWindow = window.open('', '');
// OpenWindow.document.write(form);
// OpenWindow.document.close();
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
