Export to XLSX

To export FlexGrid controls to the XLSX format, you should include following extra modules in your application:

  1. jszip.js: Javascript library for creating, reading and editing ZIP files.

To export FlexGrid to XLSX, call the FlexGridXlsxConverter.save method to obtain a 'book' object. You may modify the book object before saving it. For example, you may add or rename sheets. Once the 'book' is ready, call its save method to create the XLSX file.

ID
Country
Sales
Expenses
0
US
81,732.54
38,401.13
1
Germany
20,603.32
27,944.24
2
UK
44,217.79
48,877.49
3
Japan
29,190.63
23,365.74
4
Italy
46,951.19
49,107.56
5
Greece
86,237.02
49,767.35
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// This file locates: "Scripts/Lesson/C1FlexGrid/Excel.js".
c1.documentReady(function () {
    var theGrid = wijmo.Control.getControl('#theGrid');
 
    // export grid to XLSX
    document.getElementById('btnExport').addEventListener('click', function () {
 
        // create book with current view
        var book = wijmo.grid.xlsx.FlexGridXlsxConverter.save(theGrid, {
            includeColumnHeaders: true,
            includeRowHeaders: true
        });
        book.sheets[0].name = 'Learn MVC Client';
 
        // save the book
        book.save('LearnMvcClient.xlsx');
    })
});
1
2
3
4
5
6
7
8
9
10
11
12
13
using System.Web.Mvc;
 
namespace LearnMvcClient.Controllers
{
    public partial class C1FlexGridController : Controller
    {
        // GET: Excel
        public ActionResult Excel()
        {
            return View(Models.FlexGridData.GetSales());
        }
    }
}
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
@model IEnumerable<FlexGridData.Sale>
 
<h1>
    @Html.Raw(Resources.C1FlexGrid.Excel_Title)
</h1>
<p>
    @Html.Raw(Resources.C1FlexGrid.Excel_Text1)
</p>
<ol>
    <li>
        @Html.Raw(Resources.C1FlexGrid.Excel_Text2)
    </li>
</ol>
<p>
    @Html.Raw(Resources.C1FlexGrid.Excel_Text3)
</p>
 
<button id="btnExport" class="btn btn-default">
    @Html.Raw(Resources.C1FlexGrid.Excel_Text4)
</button>
 
@(Html.C1().FlexGrid().Id("theGrid")
    .Bind(Model)
    .AutoGenerateColumns(false)
    .Columns(cs=>
    {
        cs.Add().Binding("Id").Header("ID").Width("60");
        cs.Add().Binding("Country").Header("Country").Width("2*");
        cs.Add().Binding("Sales").Header("Sales").Width("*").Format("n2");
        cs.Add().Binding("Expenses").Header("Expenses").Width("*").Format("n2");
    })
    .Height(250)
    .Filterable() // add a filter to show that it works while exporting
)
 
@section Scripts{
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js"></script>
}