- 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.
}