dgrid Print Shim
If you need to print a dgrid, you can query the store and create an HTML table with JavaScript.
Create and work with the dgrid as usual, but add a second div below it which will contain the table.
<div class="no-print" id="grid"></div>
<div class="print-only" id="grid_print"></div>
Then set up the CSS to hide the print-only by default. Create a print.css file and the appropriate media attribute hide the no-print class and display the print-only.
Relevant lines of print.css
.print-only {
display: block;
}
.print-only table {
width: 100%;
table-layout: fixed;
}
.print-only table th {
border: 1px solid #000;
font-weight: bolder;
}
Relevant lines of admin.css (screen)
.print-only,.page-break {
display:none;
}
Link tag for the print.css file
<link media="print” href=’/css/print.css’ rel=’stylesheet’ type=’text/css’>
JavaScript to create the table. This code is used on a page with several grids, the grids are in the grids object, with stores in the stores object.
byId("print_button").onclick = function() {
/* This will find all the print_grids */
query("[id$='_grid_print']").forEach(function(node) {
if (node.hasChildNodes()) {
node.removeChild(node.firstChild);
}
var grid, grid_id;
grid_id = node.id.replace(/_grid_print/,'');
grid = grids[grid_id];
var store = stores[grid_id];
var data = store.query({});
if (data.length === 0) {
var no_data = document.createTextNode("None at this time");
node.appendChild(no_data);
} else {
var table, tr, th, td, content, c;
var hasNumber = false;
table = document.createElement("table");
tr = document.createElement("tr");
for (c in grid.columns) {
content = document.createTextNode(grid.columns[c].label);
th = document.createElement("th");
th.appendChild(content);
tr.appendChild(th);
if (c === "number") hasNumber = true;
}
table.appendChild(tr);
if (hasNumber) {
data = store.query({},[{attribute:"number"}]);
}
var i = 1,j,l;
l = data.length;
for (j=0; j<l; j++) {
tr = document.createElement("tr");
for (c in grid.columns) {
content = document.createTextNode(data[j][c]);
td = document.createElement("td");
td.appendChild(content);
tr.appendChild(td);
}
table.appendChild(tr);
i++;
}
node.appendChild(table);
}
});
window.print()
};
The hasNumber code is used to order the rows by a number in one of the columns.
This post courtesy of Worktrainer.
Print article | This entry was posted by elvis on 02/02/13 at 12:54:00 pm . Follow any responses to this post through RSS 2.0. |