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
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%
Amount: ($1,375.59) (1 items)
($1,375.59)
$4,973.59
8.0%
1
1/25/2025
1/25/2025
Japan
Gadget
Green
($1,375.59)
$4,973.59
8.0%
Amount: ($3,789.61) (1 items)
($3,789.61)
$2,702.96
9.0%
35
11/25/2025
11/25/2025
Japan
Gadget
White
($3,789.61)
$2,702.96
9.0%
Amount: $1,055.34 (1 items)
$1,055.34
$3,350.72
10.0%
53
5/25/2025
5/25/2025
Japan
Gadget
Red
$1,055.34
$3,350.72
10.0%
Amount: ($1,914.36) (1 items)
($1,914.36)
$3,717.47
3.0%
58
10/25/2025
10/25/2025
Japan
Gadget
Red
($1,914.36)
$3,717.47
3.0%
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, { includeStyles: 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> } |