- 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
PDF Export
PDF Export
Features
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.
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)); }); }; } } } }
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)); } } }
@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. }