PrintDocument

The PrintDocument class makes it easy to create documents for printing or exporting to PDF. Most browsers allow you to select the paper size, orientation, margins, and whether to include page headers and footers.

Here is a table with some radial gauges. The table will be included in the PrintDocument.

20
20

And here is a FlexGrid control. Printing it directly would show the scrollbars and the part of the content that is visible. The PrintDocument class allows us to replace that with a printer-friendly version of the grid.

Id
Country
Product
Active
Downloads
Sales
Expenses
Overdue
0
US
Phones
145,248
81,732.54
38,401.13
1
Germany
Computers
111,632
20,603.32
27,944.24
2
UK
Cameras
181,205
44,217.79
48,877.49
3
Japan
Stereos
54,740
29,190.63
23,365.74
4
Italy
Phones
126,531
46,951.19
49,107.56
5
Greece
Computers
6,073
86,237.02
49,767.35
6
US
Cameras
135,436
31,459.18
40,845.40
7
Germany
Stereos
169,610
99,190.22
1,631.26
8
UK
Phones
139,988
52,628.41
46,700.93
9
Japan
Computers
137,524
54,681.54
4,055.50
10
Italy
Cameras
37,424
45,332.72
14,858.59
11
Greece
Stereos
197,708
64,269.75
38,148.18
12
US
Phones
6,078
38,100.45
17,157.09
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
// This file locates: "Scripts/Lesson/C1Mvc/PrintDocument.js".
c1.documentReady(function () {
    // render using window.print()
    document.getElementById('btnPrintDirect').addEventListener('click', function (e) {
        window.print();
    });
 
    // render using wijmo.PrintDocument class
    document.getElementById('btnPrintDoc').addEventListener('click', function (e) {
 
        // create PrintDocument
        var doc = new wijmo.PrintDocument({
            title: 'PrintDocument Test',
            copyCss: true // includes the CSS style sheets defined in the main document.
        });
 
        // add C1WebMvc CSS explicitly (only the CSS file ends with '.css' is copied).
        var links = document.head.querySelectorAll('LINK');
        for (var i = 0; i < links.length; i++) {
            var link = links[i];
            if (link.href.match(/C1WebMvc\/WebResources\?/i) && link.rel.match(/stylesheet/i)) {
                doc.append('<link href="' + link.href + '" rel="stylesheet">');
            }
        }
 
        // add some simple text
        doc.append('<h1>Printing Example</h1>');
        doc.append('<p>This document was created using the <b>PrintDocument</b> class.</p>');
 
        // add existing elements
        doc.append('<h2>Render Existing Elements</h2>');
        doc.append('<p>Check out these gauges:</p>');
        doc.append(document.getElementById('tblGauge'));
 
        // add a printer-friendly version of a FlexGrid to the document
        var flex = wijmo.Control.getControl('#theGrid');
        doc.append('<h2>Printer-Friendly FlexGrid</h2>');
        doc.append('<p>And here\'s a FlexGrid rendered as a table:</p>');
        var tbl = renderTable(flex);
        doc.append(tbl);
 
        // print the document
        doc.print();
    });
 
    // custom grid rendering function:
    // renders grid as a table
    function renderTable(flex) {
 
        // start table
        var tbl = '<table>';
 
        // headers
        if (flex.headersVisibility & wijmo.grid.HeadersVisibility.Column) {
            tbl += '<thead>';
            for (var r = 0; r < flex.columnHeaders.rows.length; r++) {
                tbl += renderRow(flex.columnHeaders, r);
            }
            tbl += '</thead>';
        }
 
        // body
        tbl += '<tbody>';
        for (var r = 0; r < flex.rows.length; r++) {
            tbl += renderRow(flex.cells, r);
        }
        tbl += '</tbody>';
 
        // done
        tbl += '</table>';
        return tbl;
    }
    function renderRow(panel, r) {
        var tr = '',
        row = panel.rows[r];
        if (row.renderSize > 0) {
            tr += '<tr>';
            for (var c = 0; c < panel.columns.length; c++) {
                var col = panel.columns[c];
                if (col.renderSize > 0) {
 
                    // get cell style, content
                    var style = 'width:' + col.renderSize + 'px;' +
                                'text-align:' + col.getAlignment() + ';' +
                      'padding-right: 6px';
                    var content = panel.getCellData(r, c, true);
                    if (!row.isContentHtml && !col.isContentHtml) {
                        content = wijmo.escapeHtml(content);
                    }
 
                    // add cell to row
                    if (panel.cellType == wijmo.grid.CellType.ColumnHeader) {
                        tr += '<th style="' + style + '">' + content + '</th>';
                    } else {
 
                        // show boolean values as checkboxes
                        var raw = panel.getCellData(r, c, false);
                        if (raw === true) {
                            content = '&#9745;';
                        } else if (raw === false) {
                            content = '&#9744;';
                        }
 
                        tr += '<td style="' + style + '">' + content + '</td>';
                    }
                }
            }
            tr += '</tr>';
        }
        return tr;
    }
});
1
2
3
4
5
6
7
8
9
10
11
12
13
using System.Web.Mvc;
 
namespace LearnMvcClient.Controllers
{
    public partial class C1MvcController : Controller
    {
        // GET: PrintDocument
        public ActionResult PrintDocument()
        {
            return View(Models.FlexGridData.GetSales(100));
        }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
@model IEnumerable < FlexGridData.Sale >
 
<h1>
    @Html.Raw(Resources.C1Mvc.PrintDocument_Title)
</h1>
<p>
    @Html.Raw(Resources.C1Mvc.PrintDocument_Text1)
</p>
<p>
    <button class="btn btn-default" id="btnPrintDoc">@Html.Raw(Resources.C1Mvc.PrintDocument_Text2)</button>
    <button class="btn btn-default" id="btnPrintDirect">@Html.Raw(Resources.C1Mvc.PrintDocument_Text3)</button>
</p>
<p>
    @Html.Raw(Resources.C1Mvc.PrintDocument_Text4)
</p>
<table id="tblGauge">
    <tr>
        <td>
            <div id="theGauge1"></div>
        </td>
        <td>
            <div id="theGauge2"></div>
        </td>
    </tr>
</table>
@Html.C1().RadialGauge("#theGauge1").Max(100).Value(20).IsReadOnly(false)
@Html.C1().RadialGauge("#theGauge2").Max(100).Value(20).IsReadOnly(false)
 
<p>
    @Html.Raw(Resources.C1Mvc.PrintDocument_Text5)
</p>
@(Html.C1().FlexGrid().Id("theGrid").Bind(Model).Height(250))