ASP.NET MVC Controls | ComponentOne
Working with Controls / FlexGrid / Work with FlexGrid / PDF Export
In This Topic
    PDF Export
    In This Topic

    FlexGrid supports exporting the grid content to a PDF file. 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 FlexGrid to a PDF, you need to use the FlexGridPdfConverter.export function that takes the following arguments:

    You can also specify some security settings, such as a separate user password and owner password. In addition, you can also define permissions for the PDF document including Annotating, ContentAccessibility, Copying, DocumentAssembly, FillingForms, Modifying, and Printing. You can refer to the FlexGrid PDF Export product sample for experiencing how the MVC FlexGrid control supports security settings in PDF Export.

    Moreover, you can also create and add tags in the FlexGrid cells when exporting the grid to a PDF file. You can use the tag method to create tags and addTag method to add tags to the logical document tree of your application. Note that tagged PDF file required document version 1.4 or higher. For more information, see the FlexGrid PDF Export product sample to understand how the MVC FlexGrid control supports tags in PDF Export.

    In the following example, we have set the following export settings to show how you can export FlexGrid to PDF. The example uses Sale.cs model added in the Custom Editors topic.

    Controller

    CellMarkerController.cs
    Copy Code
    public ActionResult Index()
    {
        return View(Sale.GetData(20));
    }
    

    View for the Controller

    Index.cshtml
    Copy Code
    @model IEnumerable<Sale>
    
    <style type="text/css">
        .grid {
            height: 500px;
            border: 2px solid #e0e0e0;
            font-family: Cambria;
            font-weight: bold;
        }
    </style>
    <div>
        <button id="btnExportToPDF" class="btn btn-default">
            Export To PDF
        </button>
        <br />
        <br />
        @*Instantiate FlexGrid and set its properties*@
        @(Html.C1().FlexGrid<Sale>()
            .Id("fgrid")
                        .AutoGenerateColumns(false)
                        .Width(700)
                        .AllowAddNew(true)
                        .SelectionMode(C1.Web.Mvc.Grid.SelectionMode.Cell)
                        .CssClass("grid")
                        .Bind(Model)
    
                         //Binding columns data to FlexGrid
                         .Columns(bl =>
                         {
                             bl.Add(cb => cb.Binding("ID"));
                             bl.Add(cb => cb.Binding("Start"));
                             bl.Add(cb => cb.Binding("Product"));
                             bl.Add(cb => cb.Binding("Amount").Format("c"));
                             bl.Add(cb => cb.Binding("Discount").Format("p0"));
                             bl.Add(cb => cb.Binding("Active"));
                         }))
    </div>
    
    @section Scripts{
        <script>
            c1.documentReady(function () {
                var grid = wijmo.Control.getControl('#fgrid');
                
                //Pdf
                document.getElementById("btnExportToPDF").addEventListener("click", function () {
                    wijmo.grid.pdf.FlexGridPdfConverter.export(grid, 'ExportedFlexGrid.pdf', {
                        exportMode: wijmo.grid.pdf.ExportMode.All,
                        scaleMode: wijmo.grid.pdf.ScaleMode.ActualSize,
                        orientation: wijmo.pdf.PdfPageOrientation.Portrait,
                        version: "v1_3"
                    });
                });
            });
        </script>
    }