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