Title: Printing a datagrid groupview content
Post by: thecyberzone on March 10, 2015, 09:45:18 AM
I have used following code to print the contents of a datagrid groupview. Everything is working fine, except the group header rows is not available in printing, surprisingly it becomes vanish in output. // StrPrintName print task name // PrintDatagrid will print DataGrid function CreateFormPage(strPrintName, printDatagrid) { var tableString = '<table cellspacing="0" class="pb">'; var frozenColumns = printDatagrid.datagrid("options").frozenColumns; // Get the frozenColumns object var columns = printDatagrid.datagrid("options").columns; // Get the columns object var nameList = '';
// Load title if (typeof columns != 'undefined' && columns != '') { $(columns).each(function (index) { tableString += '\n<tr>'; if (typeof frozenColumns != 'undefined' && typeof frozenColumns[index] != 'undefined') { for (var i = 0; i <frozenColumns[index].length; ++i) { if (!frozenColumns[index][i].hidden) { tableString += '\n<th width="' + frozenColumns[index][i].width + '"'; if (typeof frozenColumns[index][i].rowspan != 'undefined' && frozenColumns[index][i].rowspan > 1) { tableString += ' rowspan="' + frozenColumns[index][i].rowspan + '"'; } if (typeof frozenColumns[index][i].colspan != 'undefined' && frozenColumns[index][i].colspan > 1) { tableString += ' colspan="' + frozenColumns[index][i].colspan + '"'; } if (typeof frozenColumns[index][i].field != 'undefined' && frozenColumns[index][i].field != '') { nameList += ',{"f":"' + frozenColumns[index][i].field + '", "a":"' + frozenColumns[index][i].align + '"}'; } tableString += '>' + frozenColumns[0][i].title + '</th>'; } } } for (var i = 0; i <columns[index].length; ++i) { if (!columns[index][i].hidden) { tableString += '\n<th width="' + columns[index][i].width + '"'; if (typeof columns[index][i].rowspan != 'undefined' && columns[index][i].rowspan > 1) { tableString += ' rowspan="' + columns[index][i].rowspan + '"'; } if (typeof columns[index][i].colspan != 'undefined' && columns[index][i].colspan > 1) { tableString += ' colspan="' + columns[index][i].colspan + '"'; } if (typeof columns[index][i].field != 'undefined' && columns[index][i].field != '') { nameList += ',{"f":"' + columns[index][i].field + '", "a":"' + columns[index][i].align + '"}'; } tableString += '>' + columns[index][i].title + '</th>'; } } tableString += '\n</tr>'; }); } // Load content var rows = printDatagrid.datagrid("getRows"); // This code is all for access to the current page var nl = eval('([' + nameList.substring(1) + '])'); for (var i = 0; i <rows.length; ++i) { tableString += '\n<tr>'; $(nl).each(function (j) { var e = nl[j].f.lastIndexOf('_0');
tableString += '\n<td'; if (nl[j].a != 'undefined' && nl[j].a != '') { tableString += ' style="text-align:' + nl[j].a + ';"'; } tableString += '>'; if (e + 2 == nl[j].f.length) { tableString += rows[i][nl[j].f.substring(0, e)]; } else tableString += rows[i][nl[j].f]; tableString += '</td>'; }); tableString += '\n</tr>'; } tableString += '\n</table>';
window.showModalDialog("print.htm", tableString, "location:No;status:No;help:No;dialogWidth:800px;dialogHeight:600px;scroll:auto;"); } Content of print.htm is as follows : <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Data printing</title> <style type="text/css"> body{background:white;margin:0px;padding:0px;font-size:13px;text-align:left;} h1 (font-size:18px; font-weight:bold; text-align:center; margin-left:200;) .pb{font-size:13px;border-collapse:collapse;} .pb th{font-weight:bold;text-align:center;border:1px solid #333333;padding:2px;} .pb td{border:1px solid #333333;padding:2px;} </style> </head> <body> <h1>ANNUAL TRAINING PLAN</h1> <script type="text/javascript"> document.write(window.dialogArguments); window.print(); </script> </body> </html> Printing is called by pressing a button as follows: <a href="#" class="easyui-linkbutton" iconCls="icon-print" onclick="CreateFormPage('Printing', $('#dg'));">Print</a> Anybody please help by detecting why the group header (containing expand/collapse button) is not available in printed output.
Title: Re: Printing a datagrid groupview content
Post by: thecyberzone on March 10, 2015, 09:53:08 AM
Also is there any way to extend datagrid to add a print() method by including the above function to datagrid ?
Title: Re: Printing a datagrid groupview content
Post by: stworthy on March 11, 2015, 02:07:07 AM
You can extend $.fn.datagrid.methods to add any methods to the datagrid. Please try the code below: $.extend($.fn.datagrid.methods, { print: function(jq){ return jq.each(function(){ CreateFormPage('Printing', $(this)); }); function CreateFormPage(strPrintName, printDatagrid) { //... } } });
The button can be rewritten as: <a href="#" class="easyui-linkbutton" iconCls="icon-print" onclick="$('#dg').datagrid('print')">Print</a>
Title: Re: Printing a datagrid groupview content
Post by: thecyberzone on March 11, 2015, 04:48:39 AM
but why group header rows vanishes in printed output ?
Title: Re: Printing a datagrid groupview content
Post by: stworthy on December 09, 2017, 03:29:15 AM
To print the group rows when applying the group view on the datagrid, the 'CreateFormPage' function should be rewritten as: function CreateFormPage(strPrintName, printDatagrid) { var tableString = '<table cellspacing="0" class="pb">'; var frozenColumns = printDatagrid.datagrid("options").frozenColumns; // Get the frozenColumns object var columns = printDatagrid.datagrid("options").columns; // Get the columns object var nameList = '';
// Load title if (typeof columns != 'undefined' && columns != '') { $(columns).each(function (index) { tableString += '\n<tr>'; if (typeof frozenColumns != 'undefined' && typeof frozenColumns[index] != 'undefined') { for (var i = 0; i <frozenColumns[index].length; ++i) { if (!frozenColumns[index][i].hidden) { tableString += '\n<th width="' + frozenColumns[index][i].width + '"'; if (typeof frozenColumns[index][i].rowspan != 'undefined' && frozenColumns[index][i].rowspan > 1) { tableString += ' rowspan="' + frozenColumns[index][i].rowspan + '"'; } if (typeof frozenColumns[index][i].colspan != 'undefined' && frozenColumns[index][i].colspan > 1) { tableString += ' colspan="' + frozenColumns[index][i].colspan + '"'; } if (typeof frozenColumns[index][i].field != 'undefined' && frozenColumns[index][i].field != '') { nameList += ',{"f":"' + frozenColumns[index][i].field + '", "a":"' + frozenColumns[index][i].align + '"}'; } tableString += '>' + frozenColumns[0][i].title + '</th>'; } } } for (var i = 0; i <columns[index].length; ++i) { if (!columns[index][i].hidden) { tableString += '\n<th width="' + columns[index][i].width + '"'; if (typeof columns[index][i].rowspan != 'undefined' && columns[index][i].rowspan > 1) { tableString += ' rowspan="' + columns[index][i].rowspan + '"'; } if (typeof columns[index][i].colspan != 'undefined' && columns[index][i].colspan > 1) { tableString += ' colspan="' + columns[index][i].colspan + '"'; } if (typeof columns[index][i].field != 'undefined' && columns[index][i].field != '') { nameList += ',{"f":"' + columns[index][i].field + '", "a":"' + columns[index][i].align + '"}'; } tableString += '>' + columns[index][i].title + '</th>'; } } tableString += '\n</tr>'; }); }
var groups = printDatagrid.datagrid('groups'); var nl = eval('([' + nameList.substring(1) + '])'); for(var i=0; i<groups.length; i++){ var groupValue = groups[i].value; var rows = groups[i].rows; tableString += '<tr><td colspan="'+nl.length+'">'+groupValue+'</td></tr>'; tableString += getRowsContent(rows); } tableString += '\n</table>';
function getRowsContent(rows){ var tableString = ''; for (var i = 0; i <rows.length; ++i) { tableString += '\n<tr>'; $(nl).each(function (j) { var e = nl[j].f.lastIndexOf('_0');
tableString += '\n<td'; if (nl[j].a != 'undefined' && nl[j].a != '') { tableString += ' style="text-align:' + nl[j].a + ';"'; } tableString += '>'; if (e + 2 == nl[j].f.length) { tableString += rows[i][nl[j].f.substring(0, e)]; } else tableString += rows[i][nl[j].f]; tableString += '</td>'; }); tableString += '\n</tr>'; } return tableString; }
window.showModalDialog("print.html", tableString, "location:No;status:No;help:No;dialogWidth:800px;dialogHeight:600px;scroll:auto;"); }
|