FlexGrid

FlexGrid

Tree view

The sample demonstrates how to export FlexGrid content to a PDF file. Tree view support and font embedding.

Features

Sample SourceDocumentation

Export Settings:

Security settings:

Permissions (require owner password)

Annotating

Content Accessibility

Copying

Document Assembly

Filling Forms

Modifying

Header

Size

App_Data

C1NWind.db

5,496,832

Content

css

bootstrap

css

bootstrap.css

127,005

fonts

glyphicons-halflings-regular.eot

20,335

glyphicons-halflings-regular.svg

63,155

glyphicons-halflings-regular.ttf

41,280

glyphicons-halflings-regular.woff

23,320

images

icons

facebook.png

1,792

google.png

1,712

picons33.png

1,561

picons36.png

1,453

logotext.png

14,533

logotext_w.png

13,691

SyntaxHighlighter

shCore.css

6,567

shCoreEclipse.css

9,363

AdvancedAnnotation.css

1,064

app.css

4,226

barcode.css

2,022

explorer.css

15,751

gcicons.css

1,065

gcicons.ja.css

1,584

showcase.css

2,533

Site.css

1,066

data

airports.json

65,804

europe.json

33,010

land.json

77,247

ProductCategories.xml

3,453

temp.json

3,690

US.json

144,481

favicon

android-chrome-192.png

3,634

android-chrome-256.png

5,059

apple-touch-icon180.png

3,393

logo16.png

359

logo32.png

578

manifest.json

296

safari-pinned-tab.svg

3,794

fonts

fira

FiraSans-Bold.ttf

438,028

FiraSans-Regular.ttf

403,924

LICENSE

4,515

controls.woff

257,592

gcicons.ttf

75,728

mescius-dev.ttf

15,140

images

icons

Columns.png

1,099

ConditionalFormating.png

1,168

Csv.png

1,147

Excel.png

1,654

pdf.png

1,334

c1icon.png

22,233

divide.png

656

down.png

763

electronics.png

331

excelWorkSheets.PNG

26,652

flag.png

280

home.png

397

icon_export.png

1,132

new.png

1,350

phones.png

340

room.png

232,407

th.png

1,281

toys.png

653

up.png

878

Scripts

BootStrap

bootstrap.js

57,209

SyntaxHighlighter

shBrushCSharp.js

2,863

shBrushJScript.js

1,855

shBrushXml.js

4,584

shCore.js

16,192

advancedAnnotation.js

3,684

AxisScrollbar.js

11,009

ControlLayout.js

3,805

jquery.js

93,436

jquery.validate.js

44,027

jquery.validate.min.js

21,093

jquery.validate.unobtrusive.js

19,033

jquery.validate.unobtrusive.min.js

5,411

jszip.js

76,998

Layout.js

2,424

MultiLevelMenu.js

9,995

Temp

Houston.xlsx

191,085

testexcel1a601035-b5ce-4dc4-a8a3-2b5425941621.xlsx

16,829

testexcel88ddbc79-0724-4439-b3cf-85c7e15448ec.xlsx

17,454

Description

This sample shows how the tree view feature of the FlexGrid is supported in the FlexGridPdfConverter.

In this sample, FlexGrid uses font Fira and two typefaces, FiraSans-Regular.ttf and FiraSans-Bold.ttf, are embeded into the document. 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.

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

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

A FlexGrid instance.
Name of the file to export.
Export settings.

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

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

You can also specify some security settings, such as user password, owner password and permissions, to protect the exported PDF content.

PDFExportTreeViewController.cs PDFExportTreeView.cshtml

using MvcExplorer.Models; 
using System.Collections.Generic; 
using Microsoft.AspNetCore.Mvc; 
using System.Linq; 
  
namespace MvcExplorer.Controllers 
{ 
    public partial class FlexGridController : Controller 
    { 
        private static IList<ITreeItem> pdfExportTreeViewData = null; 
        public ActionResult PDFExportTreeView() 
        { 
            if (pdfExportTreeViewData == null) 
            { 
                pdfExportTreeViewData = Folder.Create(Startup.Environment.WebRootPath).Children; 
            } 
            ViewBag.TreeViewData = pdfExportTreeViewData; 
            return View(); 
        } 
    } 
}

@using C1.Web.Mvc.Grid 
@{ 
    IList<ITreeItem> treeViewData = ViewBag.TreeViewData; 
} 
  
@section Styles{ 
    <style> 
        .fixed-top { 
            z-index: 999; 
            position: fixed; 
            top: 0px; 
        } 
  
        .reduce { 
            padding-bottom: 0px; 
        } 
    </style> 
} 
  
@section Scripts{ 
    <script>
        var treeViewGrid, exportSettings, settingsDiv, securitySettingsDiv; 
  
        c1.documentReady(function () { 
            treeViewGrid = wijmo.Control.getControl("#treeFlexGrid"); 
            settingsDiv = document.getElementById("exportSettingsDiv"); 
            securitySettingsDiv = document.getElementById("securitySettingsDiv"); 
            exportSettings = { 
                exportMode: wijmo.grid.pdf.ExportMode.All, 
                orientation: wijmo.pdf.PdfPageOrientation.Portrait, 
                scaleMode: wijmo.grid.pdf.ScaleMode.ActualSize, 
                version: "v1_4", 
            }; 
        }); 
  
        function setScaleMode(menu) { 
            menu.header = "@(FlexGridRes.PDFExport_ScaleMode): <b>" + menu.selectedItem.Header + "</b>"; 
            exportSettings.scaleMode = wijmo.grid.pdf.ScaleMode[menu.selectedItem.Header]; 
        } 
  
        function setOrientation(menu) { 
            menu.header = "@(FlexGridRes.PDFExport_Orientation): <b>" + menu.selectedItem.Header + "</b>"; 
            exportSettings.orientation = wijmo.pdf.PdfPageOrientation[menu.selectedItem.Header]; 
        } 
  
        function setExportMode(menu) { 
            menu.header = "@(FlexGridRes.PDFExport_ExportMode): <b>" + menu.selectedItem.Header + "</b>"; 
            exportSettings.exportMode = wijmo.grid.pdf.ExportMode[menu.selectedItem.Header]; 
        } 
  
        function setPermissionPrinting(menu) { 
            menu.header = "@FlexGridRes.PDFExport_Printing: <b>" + menu.selectedItem.Header + "</b>"; 
            exportSettings.permissionPrinting = menu.selectedItem.Header; 
        } 
  
        function setVersion(menu) { 
            menu.header = "PDF version: <b>" + menu.selectedItem.Header + "</b>"; 
            switch (menu.selectedItem.Header) { 
                case "1.3": 
                    exportSettings.version = "v1_3"; 
                    break; 
                case "1.4": 
                    exportSettings.version = "v1_4"; 
                    break; 
                case "1.5": 
                    exportSettings.version = "v1_5"; 
                    break; 
                case "1.6": 
                    exportSettings.version = "v1_6"; 
                    break; 
                case "1.7": 
                    exportSettings.version = "v1_7"; 
                    break; 
                case "1.7 ExtensionLevel 3": 
                    exportSettings.version = "v1_7Ext3"; 
                    break; 
            } 
        } 
  
        function getPassword(user) { 
            return document.querySelector('#tb' + user + 'Password').value; 
        } 
  
        function getPermission(permissionName) { 
            if (permissionName == 'Printing') { 
                return exportSettings.permissionPrinting || 'NotAllowed'; 
            } else { 
                return document.querySelector('#cb' + permissionName).checked; 
            } 
        } 
  
        function exportTreeViewGrid() { 
            wijmo.grid.pdf.FlexGridPdfConverter.export(treeViewGrid, 'FlexGrid.pdf', { 
                maxPages: 10, 
                exportMode: exportSettings.exportMode, 
                scaleMode: exportSettings.scaleMode, 
                embeddedFonts: [{ 
                    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: { 
                    userPassword: getPassword('User'), 
                    ownerPassword: getPassword('Owner'), 
                    version: exportSettings.version, 
                    permissions: { 
                        annotating: getPermission('Annotating'), 
                        contentAccessibility: getPermission('ContentAccessibility'), 
                        copying: getPermission('Copying'), 
                        documentAssembly: getPermission('DocumentAssembly'), 
                        fillingForms: getPermission('FillingForms'), 
                        modifying: getPermission('Modifying'), 
                        printing: getPermission('Printing') 
                    }, 
  
                    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'
                    } 
                } 
            }); 
        } 
    </script>
} 
  
<div class="copy well" id="exportSettingsDiv"> 
    <b>@Html.Raw(FlexGridRes.PDFExport_ExportSettings)</b> 
    <c1-menu header="@(FlexGridRes.PDFExport_ScaleMode + " <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="@(FlexGridRes.PDFExport_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="@(FlexGridRes.PDFExport_ExportMode + " <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 id="securitySettingsDiv"> 
  
        <p></p> 
        <b>@Html.Raw(FlexGridRes.PDFExport_SecuritySettings)</b> 
        <div class="panel-body reduce"> 
            <div class="row"> 
                <div class="col-sm-3"> 
                    <input type="text" id="tbUserPassword" class="form-control" placeholder="@FlexGridRes.PDFExport_UserPassword" /> 
                </div> 
                <div class="col-sm-3"> 
                    <input type="text" id="tbOwnerPassword" class="form-control" placeholder="@FlexGridRes.PDFExport_OwnerPassword" /> 
                </div> 
            </div> 
            <br /> 
            <div class="row"> 
                <div class="col-sm-3"> 
                    <c1-menu header="PDF version: <b>1.4</b>" item-clicked="setVersion" selected-index="1"> 
                        <c1-menu-item header="1.3"></c1-menu-item> 
                        <c1-menu-item header="1.4"></c1-menu-item> 
                        <c1-menu-item header="1.5"></c1-menu-item> 
                        <c1-menu-item header="1.6"></c1-menu-item> 
                        <c1-menu-item header="1.7"></c1-menu-item> 
                        <c1-menu-item header="1.7 ExtensionLevel 3"></c1-menu-item> 
                    </c1-menu> 
                </div> 
            </div> 
            <div class="panel-body reduce"> 
                <div class="row"> 
                    <div class="col"> 
                        <b>@FlexGridRes.PDFExport_Permissions</b> (<i>@FlexGridRes.PDFExport_PermissionsNote</i>) 
                    </div> 
                </div> 
                <div class="row"> 
                    <div class="col-sm-3"> 
                        <div class="checkbox"> 
                            <label><input type="checkbox" id="cbAnnotating" />@FlexGridRes.PDFExport_Annotating</label> 
                        </div> 
                        <div class="checkbox"> 
                            <label><input type="checkbox" id="cbContentAccessibility" />@FlexGridRes.PDFExport_ContentAccessibility</label> 
                        </div> 
                        <div class="checkbox"> 
                            <label><input type="checkbox" id="cbCopying" />@FlexGridRes.PDFExport_Copying</label> 
                        </div> 
                        <div class="checkbox"> 
                            <label><input type="checkbox" id="cbDocumentAssembly" />@FlexGridRes.PDFExport_DocumentAssembly</label> 
                        </div> 
                        <div class="checkbox"> 
                            <label><input type="checkbox" id="cbFillingForms" />@FlexGridRes.PDFExport_FillingForms</label> 
                        </div> 
                        <div class="checkbox"> 
                            <label><input type="checkbox" id="cbModifying" />@FlexGridRes.PDFExport_Modifying</label> 
                        </div> 
                    </div> 
                </div> 
  
                <c1-menu header="@(FlexGridRes.PDFExport_Printing + " <b>NotAllowed</b>")" item-clicked="setPermissionPrinting"> 
                    <c1-menu-item header="NotAllowed"></c1-menu-item> 
                    <c1-menu-item header="AllowLowResolution"></c1-menu-item> 
                    <c1-menu-item header="AllowHighResolution"></c1-menu-item> 
                </c1-menu> 
            </div> 
        </div> 
    </div> 
</div> 
  
<button class="btn btn-default" onclick="exportTreeViewGrid()">@Html.Raw(FlexGridRes.PDFExport_Export)</button> 
<br /> 
<c1-flex-grid id="treeFlexGrid" class="grid custom-flex-grid"
                child-items-path="Children" auto-generate-columns="false"
                allow-resizing="None" headers-visibility="Column" selection-mode="ListBox"> 
    <c1-items-source source-collection="treeViewData"></c1-items-source> 
    <c1-flex-grid-column binding="Header" width="*"></c1-flex-grid-column> 
    <c1-flex-grid-column binding="Size" width="80"></c1-flex-grid-column> 
</c1-flex-grid> 
  
@section Summary{ 
    <p>@Html.Raw(FlexGridRes.PDFExport_Summary) @Html.Raw(FlexGridRes.PDFExport_TreeViewSupportAndFontEmbedding).</p> 
} 
  
@section Description{ 
    <p><b>@Html.Raw(FlexGridRes.PDFExport_Text5)</b></p> 
    <p><b>@Html.Raw(FlexGridRes.PDFExport_Text6)</b></p> 
  
    <p>@Html.Raw(FlexGridRes.PDFExport_Text0)</p> 
    <p>@Html.Raw(FlexGridRes.PDFExport_Text1)</p> 
    <ul> 
        <li>@Html.Raw(FlexGridRes.PDFExport_Li1)</li> 
        <li>@Html.Raw(FlexGridRes.PDFExport_Li2)</li> 
        <li>@Html.Raw(FlexGridRes.PDFExport_Li3)</li> 
    </ul> 
    <p>@Html.Raw(FlexGridRes.PDFExport_Text2)</p> 
    <ul> 
        <li>@Html.Raw(FlexGridRes.PDFExport_Li4)</li> 
        <li>@Html.Raw(FlexGridRes.PDFExport_Li5)</li> 
        <li>@Html.Raw(FlexGridRes.PDFExport_Li6)</li> 
    </ul> 
    <p>@Html.Raw(FlexGridRes.PDFExport_Text8)</p> 
}

New Controls >

Popular Controls >

Data Management >

Data Visualization >

Navigation and Layout >

Document >

Scheduling >

Input and Editing >

Tutorials >

New Features >

Getting Started Guides >

Sample Applications >

Data Management

Data Visualization

Navigation and Layout

Document

Scheduling

Input and Editing

Tutorials

New Features

Getting Started Guides

Sample Applications

Tree view

Features

Description