Features

PDF Export

PDF Export

You can use the FlexGridPdfConverter, a PDFKit-based JavaScript library, to export MultiRow to PDF (Portable Document Format) without using any server-side code.

Features

You can use the FlexGridPdfConverter, a PDFKit-based JavaScript library,
to export MultiRow to PDF (Portable Document Format) without using any server-side code.

To export a MultiRow, you need to use the FlexGridPdfConverter.export function that takes the following arguments:

  • A MultiRow instance.
  • Name of the file to export.
  • Export settings.

In this sample, you can change the following export settings using the menus below:

  • scaleMode: Determines how the MultiRow content should be scaled in order to fit the page.
  • orientation: Determines the orientation of pages.
  • exportMode: Determines which part of the MultiRow should be exported (all of the data or only the current selection).

In this sample, MultiRow uses font Fira and two typefaces, FiraSans-Regular.ttf and FiraSans-Bold.ttf.
The FiraSans-Bold.ttf (boldface) typeface is used to display the header cells, and the FiraSans-Regular.ttf typeface is used for rest of the content.

To embed the fonts into the PDF, the following export settings are used:

  • embeddedFonts: Provides information to the export library, about various custom fonts to be embedded, such as URL, name, style, weight.
  • styles: It is used to set up the style for the grid elements and link them with the embedded fonts.
Export Settings:


Active
End
Product
Color
Discount
Amount2
Product: Gadget (13 items)
Country: Japan (2 items)
1
01/25/2025
Japan
-4,257.83
-1,652.26
01/25/2025 00:00:00
Gadget
White
0.23
14
02/25/2025
Japan
1,493.10
391.20
02/25/2025 13:30:00
Gadget
Red
0.19
Country: Italy (1 items)
2
02/25/2025
Italy
1,095.08
1,413.34
02/25/2025 01:30:00
Gadget
Black
0.20
Country: German (2 items)
3
03/25/2025
German
1,853.66
4,924.12
03/25/2025 02:00:00
Gadget
Green
0.18
6
06/25/2025
German
-165.64
-4,919.21
06/25/2025 05:30:00
Gadget
White
0.04
Country: Canada (1 items)
5
05/25/2025
Canada
-3,447.73
3,738.87
05/25/2025 04:00:00
Gadget
Green
0.10
Country: Korea (3 items)
10
10/25/2025
Korea
-4,563.28
1,361.51
10/25/2025 09:30:00
Gadget
Red
0.02
19
07/25/2025
Korea
2,170.82
-3,562.14
07/25/2025 18:00:00
Gadget
Green
0.14
20
08/25/2025
Korea
-3,000.98
-238.75
08/25/2025 19:30:00
Gadget
Red
0.09
Country: US (2 items)
12
12/25/2025
US
544.13
-4,548.24
12/25/2025 11:30:00
Gadget
Red
0.10
21
09/25/2025
US
3,374.49
-4,629.37
09/25/2025 20:00:00
Gadget
Red
0.23
Country: UK (1 items)
16
04/25/2025
UK
-3,175.21
-2,650.41
04/25/2025 15:30:00
Gadget
Black
0.18
Country: France (1 items)
24
12/25/2025
France
-748.11
1,463.78
12/25/2025 23:30:00
Gadget
Green
0.14
Product: Widget (12 items)
Country: Italy (2 items)
4
04/25/2025
Italy
3,708.86
-2,697.08
04/25/2025 03:30:00
Widget
White
0.03
9
09/25/2025
Italy
3,288.12
-2,392.41
09/25/2025 08:00:00
Widget
Red
0.19
Country: China (1 items)
7
07/25/2025
China
160.62
1,299.66
07/25/2025 06:00:00
Widget
White
0.08
Country: Korea (2 items)
8
08/25/2025
Korea
-2,575.30
-1,036.23
08/25/2025 07:30:00
Widget
Red
0.17
18
06/25/2025
Korea
-4,129.88
-3,660.62
06/25/2025 17:30:00
Widget
Black
0.17
Country: Canada (3 items)
11
11/25/2025
Canada
-4,839.71
-1,835.02
11/25/2025 10:00:00
Widget
White
0.19
13
01/25/2025
Canada
538.45
1,848.22
01/25/2025 12:00:00
Widget
Red
0.04
22
10/25/2025
Canada
-2,103.52
-4,860.82
10/25/2025 21:30:00
Widget
Green
0.23
Country: US (1 items)
15
03/25/2025
US
-2,838.54
4,241.04
03/25/2025 14:00:00
Widget
Black
0.14
Country: France (1 items)
17
05/25/2025
France
22.88
-2,410.67
05/25/2025 16:00:00
Widget
Black
0.17
Country: German (2 items)
23
11/25/2025
German
-2,077.64
-4,678.39
11/25/2025 22:00:00
Widget
Red
0.06
25
01/25/2025
German
678.23
95.72
01/25/2025 00:00:00
Widget
Red
0.03
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
using MultiRowExplorer.Models;
using System;
using System.Collections.Generic;
using System.Linq;
using Microsoft.AspNetCore.Mvc;
  
namespace MultiRowExplorer.Controllers
{
    public partial class MultiRowController : Controller
    {
        public ActionResult PdfExport()
        {
            return View(Sale.GetData(25));
        }
    }
}
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
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
@model IEnumerable<Sale>
  
@{
    ViewBag.DemoDescription = false;
}
  
@section Styles{
    <link rel="stylesheet" href="~/Content/css/CustomMultiRow.css" />
  
    <style>
        .checkbox-div {
            padding-left: 15px;
            display: inline-block;
            vertical-align: middle;
        }
  
            .checkbox-div .checkbox {
                display: inline-block;
                vertical-align: middle;
            }
    </style>
}
  
@section Scripts{
    <script>
        var multiRow, exportSettings, settingsDiv, settingsDivDfScroll;
  
        c1.documentReady(function () {
            multiRow = wijmo.Control.getControl("#exportPdfMultiRow");
            settingsDiv = document.getElementById("exportSettingsDiv");
            exportSettings = {
                exportMode: wijmo.grid.pdf.ExportMode.All,
                orientation: wijmo.pdf.PdfPageOrientation.Portrait,
                scaleMode: wijmo.grid.pdf.ScaleMode.ActualSize
            };
        });
  
        function exportPdf() {
            var fontFile = { source: 'https://demo.grapecity.com/wijmo/sample/fonts/ipaexg.ttf', name: 'ipaexg' },
            font = new wijmo.pdf.PdfFont('ipaexg');
            var needEmbedFonts = embedFontsCheckBox.checked;
            wijmo.grid.pdf.FlexGridPdfConverter.export(multiRow, 'MultiRow.pdf', {
                maxPages: 10,
                exportMode: exportSettings.exportMode,
                scaleMode: exportSettings.scaleMode,
                embeddedFonts: needEmbedFonts
                    ? [{
                        source: '@(Url.Content("~/Content/fonts/fira/FiraSans-Regular.ttf"))',
                        name: 'fira',
                        style: 'normal',
                        weight: 'normal',
                        sansSerif: true
                    }, {
                        source: '@(Url.Content("~/Content/fonts/fira/FiraSans-Bold.ttf"))',
                        name: 'fira',
                        style: 'normal',
                        weight: 'bold',
                        sansSerif: true
                    }, fontFile]
                    : [fontFile],
                documentOptions: {
                    pageSettings: {
                        layout: exportSettings.orientation
                    },
                    header: {
                        declarative: {
                            text: '&[Page]\\&[Pages]\theader\t&[Page]\\&[Pages]'
                        }
                    },
                    footer: {
                        declarative: {
                            text: '&[Page]\\&[Pages]\tfooter\t&[Page]\\&[Pages]'
                        }
                    },
                    info: {
                        author: 'C1',
                        title: 'PdfDocument sample',
                        keywords: 'PDF, C1, sample',
                        subject: 'PdfDocument'
                    }
                },
                styles: {
                    cellStyle: {
                        backgroundColor: '#ffffff',
                        borderColor: '#c6c6c6',
                        font: {
                            family: 'fira'
                        }
                    },
                    altCellStyle: {
                        backgroundColor: '#f9f9f9'
                    },
                    groupCellStyle: {
                        backgroundColor: '#dddddd',
                        font: font
                    },
                    headerCellStyle: {
                        backgroundColor: '#eaeaea'
                    }
                }
            });
        }
  
        function setScaleMode(menu) {
            menu.header = "Scale Mode: <b>" + menu.selectedItem.Header + "</b>";
            exportSettings.scaleMode = wijmo.grid.pdf.ScaleMode[menu.selectedItem.Header];
        }
  
        function setOrientation(menu) {
            menu.header = "Orientation: <b>" + menu.selectedItem.Header + "</b>";
            exportSettings.orientation = wijmo.pdf.PdfPageOrientation[menu.selectedItem.Header];
        }
  
        function setExportMode(menu) {
            menu.header = "Export Mode: <b>" + menu.selectedItem.Header + "</b>";
            exportSettings.exportMode = wijmo.grid.pdf.ExportMode[menu.selectedItem.Header];
        }
  
        function setEmbedFonts(menu) {
            menu.header = "Embed Fonts: <b>" + menu.selectedItem.Header + "</b>";
            exportSettings.embedFonts = Boolean.valueOf(menu.selectedItem.Header);
        }
    </script>
}
  
<div class="copy well">
    <p>@Html.Raw(MultiRowRes.PdfExport_Text0)</p>
  
    <p>@Html.Raw(MultiRowRes.PdfExport_Text1)</p>
  
    <ul>
        <li>@Html.Raw(MultiRowRes.PdfExport_Text5)</li>
        <li>@Html.Raw(MultiRowRes.PdfExport_Text6)</li>
        <li>@Html.Raw(MultiRowRes.PdfExport_Text7)</li>
    </ul>
    <p>@Html.Raw(MultiRowRes.PdfExport_Text2)</p>
  
    <ul>
        <li>@Html.Raw(MultiRowRes.PdfExport_Text8)</li>
        <li>@Html.Raw(MultiRowRes.PdfExport_Text9)</li>
        <li>@Html.Raw(MultiRowRes.PdfExport_Text10)</li>
    </ul>
    <p>@Html.Raw(MultiRowRes.PdfExport_Text3)</p>
  
    <p>@Html.Raw(MultiRowRes.PdfExport_Text4)</p>
  
    <ul>
        <li>
            <b>@Html.Raw(MultiRowRes.PdfExport_Text11)</b>
        </li>
        <li>@Html.Raw(MultiRowRes.PdfExport_Text12)</li>
    </ul>
</div>
  
<div class="copy well" id="exportSettingsDiv">
    <b>@Html.Raw(MultiRowRes.PdfExport_Text13)</b>
    <br />
    <br />
    <div class="col-md-12 col-xs-12">
        <c1-menu header="Scale Mode: <b>ActualSize</b>" item-clicked="setScaleMode">
            <c1-menu-item header="ActualSize"></c1-menu-item>
            <c1-menu-item header="PageWidth"></c1-menu-item>
            <c1-menu-item header="SinglePage"></c1-menu-item>
        </c1-menu>
  
        <c1-menu header="Orientation: <b>Portrait</b>" item-clicked="setOrientation">
            <c1-menu-item header="Portrait"></c1-menu-item>
            <c1-menu-item header="Landscape"></c1-menu-item>
        </c1-menu>
  
        <c1-menu header="Export Mode: <b>All</b>" item-clicked="setExportMode">
            <c1-menu-item header="All"></c1-menu-item>
            <c1-menu-item header="Selection"></c1-menu-item>
        </c1-menu>
    </div>
    <div class="checkbox-div">
        <label>
            <input type="checkbox" id="embedFontsCheckBox" class="checkbox" /> @Html.Raw(MultiRowRes.PdfExport_Text15)
        </label>
    </div>
</div>
  
<button class="btn btn-default" onclick="exportPdf()">@Html.Raw(MultiRowRes.PdfExport_Text16)</button>
<br />
  
<c1-multi-row id="exportPdfMultiRow" class="multirow custom-multi-row" selection-mode="ListBox"
              show-groups="true" group-by="Product,Country" headers-visibility="All">
    <c1-items-source source-collection="Model"></c1-items-source>
    <c1-multi-row-cell-group>
        <c1-multi-row-cell binding="ID"></c1-multi-row-cell>
        <c1-multi-row-cell binding="Active"></c1-multi-row-cell>
    </c1-multi-row-cell-group>
    <c1-multi-row-cell-group>
        <c1-multi-row-cell binding="Start" format="MM/dd/yyyy"></c1-multi-row-cell>
        <c1-multi-row-cell binding="End" format="MM/dd/yyyy HH:mm:ss" width="150"></c1-multi-row-cell>
    </c1-multi-row-cell-group>
    <c1-multi-row-cell-group colspan="2">
        <c1-multi-row-cell binding="Country" colspan="2"></c1-multi-row-cell>
        <c1-multi-row-cell binding="Product"></c1-multi-row-cell>
        <c1-multi-row-cell binding="Color"></c1-multi-row-cell>
    </c1-multi-row-cell-group>
    <c1-multi-row-cell-group colspan="2">
        <c1-multi-row-cell binding="Amount"></c1-multi-row-cell>
        <c1-multi-row-cell binding="Amount2"></c1-multi-row-cell>
        <c1-multi-row-cell binding="Discount" colspan="2"></c1-multi-row-cell>
    </c1-multi-row-cell-group>
</c1-multi-row>
  
@section Summary{
    @Html.Raw(MultiRowRes.PdfExport_Text14)
}