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.