ASP.NET MVC Controls | ComponentOne
Working with Controls / FlexGrid / Work with FlexGrid / Excel Import and Export
In This Topic
    Excel Import and Export
    In This Topic

    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:

    Add References

    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>
    See Also

    Reference

    FlexGridBase<T> Class
    FlexGrid<T> Class