MultiRow - Excel Export - C1 ASP.NET MVC

Excel Export

The sample demonstrates how to export MultiRow content to an Excel xlsx file.

Features

Sample
Source
Documentation

Active

End

Product

Color

Discount

Amount2

Product: Gadget (53 items)

Country: German (8 items)

Settings

Export

Description

The sample demonstrates how to export MultiRow content to an Excel xlsx file.

To export MultiRow content, pass the MultiRow instance to the FlexGridXlsxConverter.save method.
This generates xlsx file content, which can be saved to a local file or sent to a server.

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

ExcelExportController.cs
ExcelExport.cshtml

using MultiRowExplorer.Models; 
using System; 
using System.Collections.Generic; 
using System.Linq; 
using Microsoft.AspNetCore.Mvc; 
  
namespace MultiRowExplorer.Controllers 
{ 
    public partial class MultiRowController : Controller 
    { 
        public ActionResult ExcelExport() 
        { 
            return View(Sale.GetData(100)); 
        } 
    } 
}

@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 multiRow, colHeaderCheckBox; 
        c1.documentReady(function () { 
            multiRow = wijmo.Control.getControl("#excelExportMultiRow"); 
            colHeaderCheckBox = document.getElementById("colHeaderCheckBox"); 
        }); 
  
        function exportXlsx() { 
            if (multiRow) { 
                wijmo.grid.xlsx.FlexGridXlsxConverter.save(multiRow, { includeCellStyles: false, includeColumnHeaders: true }, 'MultiRow.xlsx'); 
            } 
        } 
  
    </script>
} 
  
<c1-multi-row id="excelExportMultiRow" class="multirow" is-read-only="true" 
              show-groups="true" group-by="Product,Country"> 
    <c1-items-source source-collection="Model"></c1-items-source> 
    <c1-multi-row-cell-group> 
        <c1-multi-row-cell binding="ID"></c1-multi-row-cell> 
        <c1-multi-row-cell binding="Active"></c1-multi-row-cell> 
    </c1-multi-row-cell-group> 
    <c1-multi-row-cell-group> 
        <c1-multi-row-cell binding="Start" format="MM/dd/yyyy"></c1-multi-row-cell> 
        <c1-multi-row-cell binding="End" format="MM/dd/yyyy HH:mm:ss" width="150"></c1-multi-row-cell> 
    </c1-multi-row-cell-group> 
    <c1-multi-row-cell-group colspan="2"> 
        <c1-multi-row-cell binding="Country" colspan="2"></c1-multi-row-cell> 
        <c1-multi-row-cell binding="Product"></c1-multi-row-cell> 
        <c1-multi-row-cell binding="Color"></c1-multi-row-cell> 
    </c1-multi-row-cell-group> 
    <c1-multi-row-cell-group colspan="2"> 
        <c1-multi-row-cell binding="Amount"></c1-multi-row-cell> 
        <c1-multi-row-cell binding="Amount2"></c1-multi-row-cell> 
        <c1-multi-row-cell binding="Discount" colspan="2"></c1-multi-row-cell> 
    </c1-multi-row-cell-group> 
</c1-multi-row> 
  
@section Settings{ 
    <div class="col-md-12 col-xs-12"> 
        <div class="form-inline well well-lg"> 
            <a download="MultiRow.xlsx" class="btn btn-default" id="exportBtn" onclick="exportXlsx();">@Html.Raw(MultiRowRes.ExcelExport_Text3)</a> 
        </div> 
    </div> 
} 
@section Description{ 
<p>@Html.Raw(MultiRowRes.ExcelExport_Text0)</p> 
  
<p>@Html.Raw(MultiRowRes.ExcelExport_Text1)</p> 
  
<p>@Html.Raw(MultiRowRes.ExcelExport_Text2)</p> 
  
} 