Printer

Printer can also be seen as an export option, especially since most modern browsers allow users to redirect the output to PDF files, cloud storage, etc.

The PrintDocument class makes it easy to create documents for printing. This sample shows how you can convert a FlexGrid into a table element suitable for printing with the PrintDocument class.

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
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
// This file locates: "Scripts/Lesson/C1FlexGrid/ImportExport.js".
c1.documentReady(function () {
    var theGrid = wijmo.Control.getControl('#theGrid');
 
    // render using wijmo.PrintDocument class
    document.getElementById('btnPrintDoc').addEventListener('click', function (e) {
 
        // create PrintDocument
        var doc = new wijmo.PrintDocument({
            title: 'PrintDocument Test',
            copyCss: true
        });
 
        // 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 a printer-friendly version of a FlexGrid to the document
        doc.append('<p>Here\'s a FlexGrid rendered as a table:</p>');
        var tbl = renderTable(theGrid);
        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 C1FlexGridController : Controller
    {
        // GET: ImportExport
        public ActionResult ImportExport()
        {
            return View(Models.FlexGridData.GetSales());
        }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
@model IEnumerable<FlexGridData.Sale>
 
<h1>
    @Html.Raw(Resources.C1FlexGrid.ImportExport_Title)
</h1>
<p>
    @Html.Raw(Resources.C1FlexGrid.ImportExport_Text1)
</p>
<p>
    @Html.Raw(Resources.C1FlexGrid.ImportExport_Text2)
</p>
<button class="btn btn-default" id="btnPrintDoc">
    @Html.Raw(Resources.C1FlexGrid.ImportExport_Text3)
</button>
@Html.C1().FlexGrid().Id("theGrid").Bind(Model).Height(250)