FlexGrid
FlexGrid
Excel Import And Export
The sample demonstrates how to export or import FlexGrid content to/from an Excel xlsx file.
To export FlexGrid content, pass the FlexGrid instance to the FlexGridXlsxConverter.save method.
Features
ID
Start Date
End Date
Country
Product
Color
Amount
Pending
Discount
Active
Product: Gadget (229 items)
$29,144.57
$575,576.23
11.5%
Country: Japan (29 items)
($5,018.49)
$79,054.31
11.0%
ID
Start Date
End Date
Country
Product
Color
Amount
Pending
Discount
Active
0
Description
The sample demonstrates how to export or import FlexGrid content to/from an Excel xlsx file.
To export FlexGrid content, pass the FlexGrid instance to the FlexGridXlsxConverter.save method. This generates xlsx file content, which can be saved to a local file or sent to a server.
To populate FlexGrid with data from an xlsx file, pass the FlexGrid instance and the xlsx file content to the FlexGridXlsxConverter.load method.
Note:You should add jszip.js library by yourself and the CDN link is:http://cdnjs.cloudflare.com/ajax/libs/jszip/2.2.1/jszip.min.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | using C1.Web.Mvc; using C1.Web.Mvc.Serialization; using Microsoft.AspNetCore.Mvc; using MvcExplorer.Models; using System.Collections.Generic; namespace MvcExplorer.Controllers { public partial class FlexGridController : Controller { public ActionResult ExcelImportExport() { return View(Sale.GetData(500)); } } } |
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 | @model IEnumerable<Sale> @{ ViewBag.DemoSettings = true; } @section Styles{ <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 src="https://cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js"></script><script> var grid, colHeaderCheckBox, importFile; c1.documentReady(function () { grid = wijmo.Control.getControl("#importExportFlexGrid"); colHeaderCheckBox = document.getElementById("colHeaderCheckBox"); importFile = document.getElementById("importFile"); }); function importGrid() { if (grid) { var isIncludeColumnHeaders = colHeaderCheckBox.checked; if (importFile.files[0]) { wijmo.grid.xlsx.FlexGridXlsxConverter.load(grid, importFile.files[0], { includeColumnHeaders: isIncludeColumnHeaders }); } } } function exportGrid() { if (grid) { var isIncludeColumnHeaders = colHeaderCheckBox.checked; wijmo.grid.xlsx.FlexGridXlsxConverter.save(grid, { includeCellStyles: false, includeColumnHeaders: isIncludeColumnHeaders }, 'FlexGrid.xlsx'); } } function updateImportButtonState() { var file = document.getElementById('importFile').value; document.getElementById('importBtn').disabled = !file; } </script>} <c1-flex-grid id="importExportFlexGrid" show-groups="true" group-by="Product,Country,Amount" is-read-only="true" class="grid" auto-generate-columns="false"> <c1-items-source initial-items-count="500" source-collection="Model"></c1-items-source> <c1-flex-grid-column binding="ID"></c1-flex-grid-column> <c1-flex-grid-column binding="Start" header="Start Date" format="d"></c1-flex-grid-column> <c1-flex-grid-column binding="End" header="End Date" format="d"></c1-flex-grid-column> <c1-flex-grid-column binding="Country"></c1-flex-grid-column> <c1-flex-grid-column binding="Product"></c1-flex-grid-column> <c1-flex-grid-column binding="Color"></c1-flex-grid-column> <c1-flex-grid-column binding="Amount" format="c" aggregate="Sum"></c1-flex-grid-column> <c1-flex-grid-column binding="Amount2" header="Pending" format="c2" aggregate="Sum"></c1-flex-grid-column> <c1-flex-grid-column binding="Discount" format="p1" aggregate="Avg"></c1-flex-grid-column> <c1-flex-grid-column binding="Active"></c1-flex-grid-column> </c1-flex-grid> @section Settings{ <div class="col-md-6 col-xs-12"> <div class="form-inline well well-lg"> <button class="btn btn-default" id="importBtn" disabled onclick="importGrid();">@Html.Raw(FlexGridRes.ExcelImportExport_Import)</button> <input type="file" id="importFile" class="form-control" onchange="updateImportButtonState();" /> </div> </div> <div class="col-md-6 col-xs-12"> <div class="form-inline well well-lg"> <a download="FlexGrid.xlsx" class="btn btn-default" id="exportBtn" onclick="exportGrid();">@Html.Raw(FlexGridRes.ExcelImportExport_Export)</a> </div> </div> <div class="checkbox-div"> <label> <input type="checkbox" id="colHeaderCheckBox" class="checkbox" checked="checked" /> @Html.Raw(FlexGridRes.ExcelImportExport_IncludeColumnHeaders) </label> </div> } @section Description{ <p>@Html.Raw(FlexGridRes.ExcelImportExport_Text0)</p> <p>@Html.Raw(FlexGridRes.ExcelImportExport_Text1)</p> <p>@Html.Raw(FlexGridRes.ExcelImportExport_Text2)</p> <p>@Html.Raw(FlexGridRes.ExcelImportExport_Text3)</p> } |