Features
- Overview
- Collapsible Column Headers
- Styling Records, Groups, and Cells
- Grouping
- Group Headers
- Row Header
- Filtering
- Row and Column Freezing
- Paging
- Group Panel
- Remote Data Binding
- Custom Cells
- Custom Editors
- Custom Column Headers
- Editing
- Batch Editing
- Sorting
- Virtual Scrolling
- Disable Server Reading
- Data Map
- Excel Export
- PDF Export
- Unobtrusive Validation
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:
Scale Mode: ActualSize
Orientation: Portrait
Export Mode: All
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
ID
Start
Country
Amount
Amount2
Active
End
Product
Color
Discount
0
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) } |