ASP.NET Core 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:

    Controller Code

    C#
    Copy Code 
    private static List<Sale> Sales = Sale.GetData(50).ToList<Sale>();
public IActionResult ExcelImportExport()
{
    return View(Sales);
}

    View Code

    CSHTML
    Copy Code 
    @model IEnumerable<Sale>

<!-- SheetJS library reference to import and export FlexGrid to/from an Excel xlsx file. -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js"></script>
<script>
    function ImportExcel() {
        var grid = wijmo.Control.getControl("#flexGrid");
        var file = document.getElementById("importExcel").files[0];
        var includeHeader = document.getElementById("importHeader").checked;
        wijmo.grid.xlsx.FlexGridXlsxConverter.load(grid, file , { includeColumnHeaders: includeHeader });
    }
    function ExportExcel() {
        var grid = wijmo.Control.getControl("#flexGrid");
        var exportHeader = document.getElementById("exportHeader").checked;
        wijmo.grid.xlsx.FlexGridXlsxConverter.save(grid, { includeColumnHeaders: exportHeader }, "FlexGrid.xlsx");
    }
    
</script>
<div>
    Headers Import/Export
    <br />
    <div>
        <input type="checkbox" id="importHeader" /><label for="importHeader">Import Column Headers</label><br />
        <input type="checkbox" id="exportHeader" /><label for="exportHeader">Export Column Headers</label>
    </div>
    <div>
        Import Excel <br />
        <div>
            <input type="file" id="importExcel" /><button onclick="ImportExcel()">Import Excel</button>
        </div>
    </div>
    <div>
        Export Excel <br />
        <button onclick="ExportExcel()">Export Excel</button>
    </div>
</div>

<c1-flex-grid id="flexGrid" auto-generate-columns="false" height="500px">
    <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>