FlexGrid
Excel Import And Export
Features
Sample
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
Source
ExcelImportExportController.cs
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));
}
}
}
ExcelImportExport.cshtml
@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>
}
Documentation