Features

PDF Export

PDF Export

This sample demonstrates how to export the contents of MultiRow to PDF (Portable Document Format) using the FlexGridPdfConverter, a PDFKit-based JavaScript library, without using any server-side code.

Features

Overview
Collapsible Column Headers
Styling Records, Groups, and Cells
Grouping
Filtering
Row and Column Freezing
Paging
Group Panel
Remote Data Binding
Custom Cells
Custom Editors
Editing
Batch Editing
Sorting
Virtual Scrolling
Disable Server Reading
Data Map
Excel Export
PDF Export
Unobtrusive Validation

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

To export the contents of MultiRow control, 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 by using the menus below:

  • scaleMode: Determines how the MultiRow contents should be scaled in order to fit the page.
  • orientation: Determines the orientation of pages.
  • exportMode: Determines which part of the MultiRow control should be exported (all 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 the rest of the content.

To embed the fonts in 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:


ID
Start
Country
Color
Amount
Amount2
Product: Gadget (15 items)
Country: German (4 items)
1
1/25/2025
German
581.61
-2,939.67
1/25/2025
Gadget
Green
0.14
4
4/25/2025
German
1,248.66
-2,815.93
4/25/2025
Gadget
Red
0.22
5
5/25/2025
German
4,051.76
-3,108.76
5/25/2025
Gadget
Black
0.12
13
1/25/2025
German
-2,446.92
-2,351.67
1/25/2025
Gadget
Red
0.12
Country: Canada (3 items)
2
2/25/2025
Canada
4,919.02
-4,673.75
2/25/2025
Gadget
Green
0.17
6
6/25/2025
Canada
-3,131.28
-4,314.81
6/25/2025
Gadget
Black
0.16
24
12/25/2025
Canada
4,917.55
-4,479.39
12/25/2025
Gadget
Red
0.14
Country: Japan (3 items)
3
3/25/2025
Japan
2,159.73
-3,810.42
3/25/2025
Gadget
Red
0.07
15
3/25/2025
Japan
1,089.32
-4,102.95
3/25/2025
Gadget
Green
0.16
23
11/25/2025
Japan
-4,146.76
853.06
11/25/2025
Gadget
White
0.01
Country: Korea (2 items)
9
9/25/2025
Korea
-2,363.16
3,425.60
9/25/2025
Gadget
Black
0.14
25
1/25/2025
Korea
3,824.28
2,007.51
1/25/2025
Gadget
Black
0.08
Country: China (1 items)
16
4/25/2025
China
1,341.85
532.34
4/25/2025
Gadget
Black
0.08
Country: France (2 items)
19
7/25/2025
France
-2,008.99
1,805.09
7/25/2025
Gadget
Green
0.09
20
8/25/2025
France
2,568.01
2,889.37
8/25/2025
Gadget
White
0.03
Product: Widget (10 items)
Country: China (2 items)
7
7/25/2025
China
698.62
-2,745.97
7/25/2025
Widget
Red
0.15
18
6/25/2025
China
3,232.11
305.20
6/25/2025
Widget
Green
0.24
Country: US (3 items)
8
8/25/2025
US
3,464.15
1,131.58
8/25/2025
Widget
White
0.03
10
10/25/2025
US
-2,836.94
-4,283.10
10/25/2025
Widget
White
0.06
17
5/25/2025
US
3,596.33
623.80
5/25/2025
Widget
Black
0.18
Country: France (1 items)
11
11/25/2025
France
877.93
2,722.02
11/25/2025
Widget
Green
0.08
Country: Korea (1 items)
12
12/25/2025
Korea
-3,788.14
-3,050.89
12/25/2025
Widget
Red
0.12
Country: German (1 items)
14
2/25/2025
German
-4,374.97
-3,899.38
2/25/2025
Widget
Black
0.18
Country: UK (2 items)
21
9/25/2025
UK
-3,476.95
4,852.50
9/25/2025
Widget
Black
0.01
22
10/25/2025
UK
2,290.56
3,295.03
10/25/2025
Widget
Red
0.06
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
using C1.Web.Mvc.Fluent;
using C1.Web.Mvc.Grid;
using C1.Web.Mvc.MultiRow;
using C1.Web.Mvc.MultiRow.Fluent;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
 
namespace MultiRowExplorer.Models
{
    public class LayoutDefinitionsBuilders
    {
        public static Action<ListItemFactory<CellGroup, CellGroupBuilder>> OneLine
        {
            get
            {
                return ld =>
                {
                    ld.Add().Colspan(15).Cells(cells =>
                    {
                        cells.Add(cell => cell.Binding("Id").Header("ID").CssClass("id"))
                            .Add(cell => cell.Binding("Date").Header("Ordered"))
                            .Add(cell => cell.Binding("ShippedDate").Header("Shipped"))
                            .Add(cell => cell.Binding("Amount").Header("Amount").Format("c").CssClass("amount"))
                            .Add(cell => cell.Binding("Customer.Name").Name("CustomerName").Header("Customer"))
                            .Add(cell => cell.Binding("Customer.Address").Name("CustomerAddress").Header("Address"))
                            .Add(cell => cell.Binding("Customer.City").Name("CustomerCity").Header("City")
                                .DataMap(dm => { dm.DisplayMemberPath("Value").SelectedValuePath("Value").Bind(Orders.GetCities().ToValues()); }))
                            .Add(cell => cell.Binding("Customer.State").Name("CustomerState").Header("State"))
                            .Add(cell => cell.Binding("Customer.Zip").Name("CustomerZip").Header("Zip"))
                            .Add(cell => cell.Binding("Customer.Email").Name("CustomerEmail").Header("Customer Email").CssClass("email"))
                            .Add(cell => cell.Binding("Customer.Phone").Name("Customerphone").Header("Customer Phone"))
                            .Add(cell => cell.Binding("Shipper.Name").Name("ShipperName").Header("Shipper"))
                            .Add(cell => cell.Binding("Shipper.Email").Name("ShipperEmail").Header("Shipper Email").CssClass("email"))
                            .Add(cell => cell.Binding("Shipper.Phone").Name("ShipperPhone").Header("Shipper Phone"))
                            .Add(cell => cell.Binding("Shipper.Express").Name("ShipperExpress").Header("Express"));
                    });
                };
            }
        }
 
        public static Action<ListItemFactory<CellGroup, CellGroupBuilder>> TwoLines
        {
            get
            {
                return ld =>
                {
                    ld.Add().Header("Order").Colspan(2).Cells(cells =>
                    {
                        cells.Add(cell => cell.Binding("Id").Header("ID").CssClass("id").Width("150"))
                            .Add(cell => cell.Binding("Date").Header("Ordered").Width("150"))
                            .Add(cell => cell.Binding("Amount").Header("Amount").Format("c").CssClass("amount"))
                            .Add(cell => cell.Binding("ShippedDate").Header("Shipped"));
                    });
                    ld.Add().Header("Customer").Colspan(3).Cells(cells =>
                    {
                        cells.Add(cell => cell.Binding("Customer.Name").Name("CustomerName").Header("Customer").Width("200"))
                            .Add(cell => cell.Binding("Customer.Email").Name("CustomerEmail").Header("Customer Email").Colspan(2).CssClass("email"))
                            .Add(cell => cell.Binding("Customer.Address").Name("CustomerAddress").Header("Address"))
                            .Add(cell => cell.Binding("Customer.City").Name("CustomerCity").Header("City").ShowDropDown(true)
                                .DataMap(dm => { dm.DisplayMemberPath("Value").SelectedValuePath("Value").Bind(Orders.GetCities().ToValues()); }))
                            .Add(cell => cell.Binding("Customer.State").Name("CustomerState").Header("State"));
                    });
                    ld.Add().Header("Shipper").Colspan(2).Cells(cells =>
                    {
                        cells.Add(cell => cell.Binding("Shipper.Name").Name("ShipperName").Header("Shipper").Colspan(2))
                            .Add(cell => cell.Binding("Shipper.Email").Name("ShipperEmail").Header("Shipper Email").Width("200").CssClass("email"))
                            .Add(cell => cell.Binding("Shipper.Express").Name("ShipperExpress").Header("Express"));
                    });
                };
            }
        }
 
        public static Action<ListItemFactory<CellGroup, CellGroupBuilder>> ThreeLines
        {
            get
            {
                return ld =>
                {
                    ld.Add().Header("Order").Colspan(2).Cells(cells =>
                    {
                        cells.Add(cell => cell.Binding("Id").Header("ID").Colspan(2).CssClass("id"))
                            .Add(cell => cell.Binding("Amount").Header("Amount").Format("c").Colspan(2).CssClass("amount"))
                            .Add(cell => cell.Binding("Date").Header("Ordered"))
                            .Add(cell => cell.Binding("ShippedDate").Header("Shipped"));
                    });
                    ld.Add().Header("Customer").Colspan(3).Cells(cells =>
                    {
                        cells.Add(cell => cell.Binding("Customer.Name").Name("CustomerName").Header("Customer"))
                            .Add(cell => cell.Binding("Customer.Email").Name("CustomerEmail").Header("Customer Email").Colspan(2).CssClass("email"))
                            .Add(cell => cell.Binding("Customer.Address").Name("CustomerAddress").Header("Address").Colspan(2))
                            .Add(cell => cell.Binding("Customer.Phone").Name("CustomerPhone").Header("Phone"))
                            .Add(cell => cell.Binding("Customer.City").Name("CustomerCity").Header("City")
                                .DataMap(dm => { dm.DisplayMemberPath("Value").SelectedValuePath("Value").Bind(Orders.GetCities().ToValues()); }))
                            .Add(cell => cell.Binding("Customer.State").Name("CustomerState").Header("State"))
                            .Add(cell => cell.Binding("Customer.Zip").Name("CustomerZip").Header("Zip"));
                    });
                    ld.Add().Header("Shipper").Cells(cells =>
                    {
                        cells.Add(cell => cell.Binding("Shipper.Name").Name("ShipperName").Header("Shipper").Width("*"))
                            .Add(cell => cell.Binding("Shipper.Email").Name("ShipperEmail").Header("Shipper Email").CssClass("email"))
                            .Add(cell => cell.Binding("Shipper.Express").Name("ShipperExpress").Header("Express"));
                    });
                };
            }
        }
 
        public static Action<ListItemFactory<CellGroup, CellGroupBuilder>> Sales
        {
            get
            {
                return ld =>
                {
                    ld.Add().Cells(cells =>
                    {
                        cells.Add(cell => cell.Binding("ID").Header("ID"));
                        cells.Add(cell => cell.Binding("Active").Header("Active"));
                    });
                    ld.Add().Cells(cells =>
                    {
                        cells.Add(cell => cell.Binding("Start").Header("Start"));
                        cells.Add(cell => cell.Binding("End").Header("End"));
                    });
                    ld.Add().Colspan(2).Cells(cells =>
                    {
                        cells.Add(cell => cell.Binding("Country").Header("Country").Colspan(2));
                        cells.Add(cell => cell.Binding("Product").Header("Product"));
                        cells.Add(cell => cell.Binding("Color").Header("Color"));
                    });
                    ld.Add().Colspan(2).Cells(cells =>
                    {
                        cells.Add(cell => cell.Binding("Amount").Header("Amount"));
                        cells.Add(cell => cell.Binding("Amount2").Header("Amount2"));
                        cells.Add(cell => cell.Binding("Discount").Header("Discount").Colspan(2));
                    });
                };
            }
        }
    }
}
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 System.Web.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
@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 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
                    }]
                    : [],
                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'
                    },
                    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>
        You can use the <b>FlexGridPdfConverter</b>, a <a href="https://github.com/devongovett/pdfkit">PDFKit</a>-based JavaScript library,
        to export the contents of <b>MultiRow</b> control to PDF (Portable Document Format) without using any server-side code.
    </p>
    <p>
        To export the contents of <b>MultiRow</b> control, you need to use the <b>FlexGridPdfConverter.export</b> function that takes the following arguments:
    </p>
    <ul>
        <li>A MultiRow instance</li>
        <li>Name of the file to export</li>
        <li>Export settings</li>
    </ul>
    <p>
        In this sample, you can change the following export settings by using the menus below:
    </p>
    <ul>
        <li><b>scaleMode</b>: Determines how the MultiRow contents should be scaled in order to fit the page.</li>
        <li><b>orientation</b>: Determines the orientation of pages.</li>
        <li><b>exportMode</b>: Determines which part of the MultiRow control should be exported (all the data or only the current selection).</li>
    </ul>
    <p>
        In this sample, <b>MultiRow</b> uses font <a href="https://github.com/mozilla/Fira">Fira</a> and two typefaces, <b>FiraSans-Regular.ttf</b> and <b>FiraSans-Bold.ttf</b>.
        The FiraSans-Bold.ttf (boldface) typeface is used to display the header cells, and the FiraSans-Regular.ttf typeface is used for the rest of the content.
    </p>
    <p>
        To embed the fonts in the PDF, the following export settings are used:
    </p>
    <ul>
        <li>
            <b>embeddedFonts</b>: Provides information to the export library about various custom fonts to be embedded, such as URL, name, style, weight.
        </li>
        <li><b>styles</b>: It is used to set up the style for the grid elements and link them with the embedded fonts.</li>
    </ul>
</div>
 
<div class="copy well" id="exportSettingsDiv">
    <b>Export Settings:</b>
    <br />
    <br />
    <div class="col-md-12 col-xs-12">
        @(Html.C1().Menu().Header("Scale Mode: <b>ActualSize</b>").OnClientItemClicked("setScaleMode")
        .MenuItems(items =>
        {
            items.Add("ActualSize");
            items.Add("PageWidth");
            items.Add("SinglePage");
        }))
        @(Html.C1().Menu().Header("Orientation: <b>Portrait</b>").OnClientItemClicked("setOrientation")
        .MenuItems(items =>
        {
            items.Add("Portrait");
            items.Add("Landscape");
        }))
        @(Html.C1().Menu().Header("Export Mode: <b>All</b>").OnClientItemClicked("setExportMode")
        .MenuItems(items =>
        {
            items.Add("All");
            items.Add("Selection");
        }))
    </div>
    <div class="checkbox-div">
        <label>
            <input type="checkbox" id="embedFontsCheckBox" class="checkbox"/> Embed Fonts
        </label>
    </div>
</div>
 
<button class="btn btn-default" onclick="exportPdf()">Export</button>
<br />
@(Html.C1().MultiRow<Sale>().Id("exportPdfMultiRow")
    .Bind(Model)
    .SelectionMode(SelectionMode.ListBox)
    .HeadersVisibility(HeadersVisibility.All)
    .ShowGroups(true)
    .GroupBy("Product", "Country")
    .CssClass("multirow custom-multi-row")
    .LayoutDefinition(LayoutDefinitionsBuilders.Sales)
)
 
@section Summary{
    This sample demonstrates how to export the contents of MultiRow to PDF (Portable Document Format) using the FlexGridPdfConverter, a PDFKit-based JavaScript library, without using any server-side code.
}