| ASP.NET MVC Controls > Controls > FlexGrid > Features > Excel Import and Export |
This topic explains how to export or import FlexGrid content to/from an Excel xlsx file. To export the FlexGrid content in Excel format, pass the FlexGrid instance to the FlexGridXlsxConverter.save method. This generates xlsx file content, which can be saved to local file or sent to a server. To import an Excel (xlsx file) content to your FlexGrid control, pass the FlexGrid instance and the xlsx file content to the FlexGridXlsxConverter.load method. The example uses Sale.cs model, which was added to the application in the QuickStart.
The following code examples demonstrate how to export or import FlexGrid content to/from an Excel xlsx file:
Before implementing the code below, you need to add the jszip.min.js library reference to import and export FlexGrid to/from an Excel xlsx file.
_Layout.cshtml
| HTML |
Copy Code
|
|---|---|
<!-- SheetJS library --> <script src="http://cdnjs.cloudflare.com/ajax/libs/jszip/2.2.1/jszip.min.js"></script> |
|
HomeController.cs
| C# |
Copy Code
|
|---|---|
public ActionResult Index() { return View(Sale.GetData(500)); } |
|
App.js
| JavaScript |
Copy Code
|
|---|---|
//Controls Declaration var gFlexGrid = null, IncludeHeadersExport = null, IncludeHeadersImport = null; //Controls Initialization function InitialControls() { gFlexGrid = wijmo.Control.getControl("#gFlexGrid"); IncludeHeadersImport = document.getElementById('IncludeHeadersImport'); IncludeHeadersExport = document.getElementById('IncludeHeadersExport'); } // export function exportExcel() { if (gFlexGrid) { wijmo.grid.xlsx.FlexGridXlsxConverter.save(gFlexGrid, { includeColumnHeaders: IncludeHeadersExport.checked }, 'FlexGrid.xlsx'); } }; // import function importExcel() { if (gFlexGrid) { if ($('#importFile')[0].files[0]) { wijmo.grid.xlsx.FlexGridXlsxConverter.load(gFlexGrid, $('#importFile')[0].files[0], { includeColumnHeaders: IncludeHeadersImport.checked }); } else { alert('Select an Excel file to Import.'); } } }; |
|
Index.cshtml
| Razor |
Copy Code
|
|---|---|
@using C1MVCExcelImportExport.Models
@using C1.Web.Mvc.Grid
@model IEnumerable<Sale>
@{
ViewBag.Title = "C1 ASP.NET MVC Excel Import Export";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<!-- App scripts -->
<script src="@Url.Content("~/Scripts/app.js")" type="text/javascript"></script>
<div class="container">
<div class="row">
<div class="col-md-6 col-xs-12">
<div class="form-inline well well-lg">
<input type="file" class="form-control" id="importFile" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" />
<button class="btn btn-default" onclick="importExcel()">Import</button>
<br />
<div class="checkbox">
<label>
<input id="IncludeHeadersImport" type="checkbox" checked="checked"> Include Column Headers
</label>
</div>
</div>
</div>
<div class="col-md-6 col-xs-12">
<div class="form-inline well well-lg">
<a href="#" class="btn btn-default" id="export" onclick="exportExcel()">Export</a>
<div class="checkbox">
<label>
<input id="IncludeHeadersExport" type="checkbox" checked="checked"> Include Column Headers
</label>
</div>
</div>
</div>
</div>
<div class="row">
@(Html.C1().FlexGrid().Id("gFlexGrid").AutoGenerateColumns(false).AllowSorting(true)
.("max-height", "400px").IsReadOnly(true)
Bind(bl => bl.DisableServerRead(true).Bind(Model)).CssClass("grid")
Columns(bl =>
{
bl.Add(cb => cb.Binding("Country").Header("Country").Width("*"));
bl.Add(cb => cb.Binding("Product").Header("Product").Width("*"));
bl.Add(cb => cb.Binding("Color").Header("Color").Width("*"));
bl.Add(cb => cb.Binding("Start").Header("Start").Width("*"));
bl.Add(cb => cb.Binding("Amount").Header("Amount").Format("n0").Width("*")
.Aggregate(C1.Web.Mvc.Grid.Aggregate.Sum));
})
)
</div>
</div>
<script type="text/javascript">
c1.documentReady(function () {
if (window["InitialControls"]) {
window["InitialControls"]();
}
});
</script>
|
|
| Razor |
Copy Code
|
|---|---|
@using C1MVCExcelImportExport.Models
@using C1.Web.Mvc.Grid
@model IEnumerable<Sale>
@{
ViewBag.Title = "C1 ASP.NET MVC Excel Import Export";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<!-- App scripts -->
<script src="@Url.Content("~/Scripts/app.js")" type="text/javascript"></script>
@section Settings{
<div class="col-md-6 col-xs-12">
<div class="form-inline well well-lg">
<button class="btn btn-default" id="importBtn" onclick="importGrid();">Import</button>
<input type="file" id="importFile" class="form-control" />
</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();">Export</a>
</div>
</div>
<div class="checkbox-div">
<label>
<input type="checkbox" id="colHeaderCheckBox" class="checkbox" checked="checked" /> Include Column Headers
</label>
</div>
}
<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>
<script type="text/javascript">
c1.documentReady(function () {
if (window["InitialControls"]) {
window["InitialControls"]();
}
});
</script>
|
|