Features

Excel Export

Excel Export

Features

Settings

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

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="http://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"></c1-multi-row-cell>
        <c1-multi-row-cell binding="End"></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();">Export</a>
        </div>
    </div>
}
@section Description{
    <p>
        The sample demonstrates how to export <b>MultiRow</b> content to an Excel xlsx file.
    </p>
    <p>
        To export <b>MultiRow</b> content, pass the <b>MultiRow</b> instance to the <b>FlexGridXlsxConverter.save</b> method.
        This generates xlsx file content, which can be saved to a local file or sent to a server.
    </p>
    <p>
        <b>Note:</b> You should add <b>jszip.js</b> library by yourself and the CDN link is: <a href="http://cdnjs.cloudflare.com/ajax/libs/jszip/2.2.1/jszip.min.js">http://cdnjs.cloudflare.com/ajax/libs/jszip/2.2.1/jszip.min.js</a>
    </p>
}