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 (256 items)
($6,284.05)
$616,014.62
11.8%
Country: German (29 items)
($9,359.35)
$74,301.01
12.4%
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 MvcExplorer.Models;using System;using System.Collections.Generic;using System.Linq;using System.Web.Mvc;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 94 95 96 97 98 99 100 | @using C1.Web.Mvc.Grid@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> 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; 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>}@(Html.C1().FlexGrid<Sale>().Id("importExportFlexGrid") .Bind(Model) .ShowGroups(true) .GroupBy("Product", "Country", "Amount") .IsReadOnly(true) .CssClass("grid") .AutoGenerateColumns(false) .Columns(bl => { bl.Add(cb => cb.Binding("ID")); bl.Add(cb => cb.Binding("Start").Header("Start Date").Format("d")); bl.Add(cb => cb.Binding("End").Header("End Date").Format("d")); bl.Add(cb => cb.Binding("Country")); bl.Add(cb => cb.Binding("Product")); bl.Add(cb => cb.Binding("Color")); bl.Add(cb => cb.Binding("Amount").Format("c").Aggregate(Aggregate.Sum)); bl.Add(cb => cb.Binding("Amount2").Header("Pending").Format("c2").Aggregate(Aggregate.Sum)); bl.Add(cb => cb.Binding("Discount").Format("p1").Aggregate(Aggregate.Avg)); bl.Add(cb => cb.Binding("Active")); }))@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(Resources.FlexGrid.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(Resources.FlexGrid.ExcelImportExport_Export)</a> </div> </div> <div class="checkbox-div"> <label> <input type="checkbox" id="colHeaderCheckBox" class="checkbox" checked="checked" /> @Html.Raw(Resources.FlexGrid.ExcelImportExport_IncludeColumnHeaders) </label> </div>}@section Description{ <p>@Html.Raw(Resources.FlexGrid.ExcelImportExport_Text0)</p> <p>@Html.Raw(Resources.FlexGrid.ExcelImportExport_Text1)</p> <p>@Html.Raw(Resources.FlexGrid.ExcelImportExport_Text2)</p> <p>@Html.Raw(Resources.FlexGrid.ExcelImportExport_Text3)</p>} |