Features
- Overview
- Collapsible Column Headers
- Styling Records, Groups, and Cells
- Grouping
- Filtering
- Row and Column Freezing
- Paging
- Group Panel
- Remote Data Binding
- Custom Cells
- Custom Editors
- Editing
- Batch Editing
- Sorting
- Virtual Scrolling
- Disable Server Reading
- Data Map
- Excel Export
- PDF Export
- Unobtrusive Validation
Excel Export
Excel Export
Features
Settings
Description
The sample demonstrates how to export the contents of MultiRow control to an Microsoft Excel (xlsx) format.
To export MultiRow contents, 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 a jszip.js library to your application. Its CDN link is: http://cdnjs.cloudflare.com/ajax/libs/jszip/2.2.1/jszip.min.js
using C1.Web.Mvc.Fluent; using C1.Web.Mvc.Grid; using C1.Web.Mvc.MultiRow; using C1.Web.Mvc.MultiRow.Fluent; using System; using System.Collections.Generic; using System.Linq; using System.Web; namespace MultiRowExplorer.Models { public class LayoutDefinitionsBuilders { public static Action<ListItemFactory<CellGroup, CellGroupBuilder>> OneLine { get { return ld => { ld.Add().Colspan(15).Cells(cells => { cells.Add(cell => cell.Binding("Id").Header("ID").CssClass("id")) .Add(cell => cell.Binding("Date").Header("Ordered")) .Add(cell => cell.Binding("ShippedDate").Header("Shipped")) .Add(cell => cell.Binding("Amount").Header("Amount").Format("c").CssClass("amount")) .Add(cell => cell.Binding("Customer.Name").Name("CustomerName").Header("Customer")) .Add(cell => cell.Binding("Customer.Address").Name("CustomerAddress").Header("Address")) .Add(cell => cell.Binding("Customer.City").Name("CustomerCity").Header("City") .DataMap(dm => { dm.DisplayMemberPath("Value").SelectedValuePath("Value").Bind(Orders.GetCities().ToValues()); })) .Add(cell => cell.Binding("Customer.State").Name("CustomerState").Header("State")) .Add(cell => cell.Binding("Customer.Zip").Name("CustomerZip").Header("Zip")) .Add(cell => cell.Binding("Customer.Email").Name("CustomerEmail").Header("Customer Email").CssClass("email")) .Add(cell => cell.Binding("Customer.Phone").Name("Customerphone").Header("Customer Phone")) .Add(cell => cell.Binding("Shipper.Name").Name("ShipperName").Header("Shipper")) .Add(cell => cell.Binding("Shipper.Email").Name("ShipperEmail").Header("Shipper Email").CssClass("email")) .Add(cell => cell.Binding("Shipper.Phone").Name("ShipperPhone").Header("Shipper Phone")) .Add(cell => cell.Binding("Shipper.Express").Name("ShipperExpress").Header("Express")); }); }; } } public static Action<ListItemFactory<CellGroup, CellGroupBuilder>> TwoLines { get { return ld => { ld.Add().Header("Order").Colspan(2).Cells(cells => { cells.Add(cell => cell.Binding("Id").Header("ID").CssClass("id").Width("150")) .Add(cell => cell.Binding("Date").Header("Ordered").Width("150")) .Add(cell => cell.Binding("Amount").Header("Amount").Format("c").CssClass("amount")) .Add(cell => cell.Binding("ShippedDate").Header("Shipped")); }); ld.Add().Header("Customer").Colspan(3).Cells(cells => { cells.Add(cell => cell.Binding("Customer.Name").Name("CustomerName").Header("Customer").Width("200")) .Add(cell => cell.Binding("Customer.Email").Name("CustomerEmail").Header("Customer Email").Colspan(2).CssClass("email")) .Add(cell => cell.Binding("Customer.Address").Name("CustomerAddress").Header("Address")) .Add(cell => cell.Binding("Customer.City").Name("CustomerCity").Header("City").ShowDropDown(true) .DataMap(dm => { dm.DisplayMemberPath("Value").SelectedValuePath("Value").Bind(Orders.GetCities().ToValues()); })) .Add(cell => cell.Binding("Customer.State").Name("CustomerState").Header("State")); }); ld.Add().Header("Shipper").Colspan(2).Cells(cells => { cells.Add(cell => cell.Binding("Shipper.Name").Name("ShipperName").Header("Shipper").Colspan(2)) .Add(cell => cell.Binding("Shipper.Email").Name("ShipperEmail").Header("Shipper Email").Width("200").CssClass("email")) .Add(cell => cell.Binding("Shipper.Express").Name("ShipperExpress").Header("Express")); }); }; } } public static Action<ListItemFactory<CellGroup, CellGroupBuilder>> ThreeLines { get { return ld => { ld.Add().Header("Order").Colspan(2).Cells(cells => { cells.Add(cell => cell.Binding("Id").Header("ID").Colspan(2).CssClass("id")) .Add(cell => cell.Binding("Amount").Header("Amount").Format("c").Colspan(2).CssClass("amount")) .Add(cell => cell.Binding("Date").Header("Ordered")) .Add(cell => cell.Binding("ShippedDate").Header("Shipped")); }); ld.Add().Header("Customer").Colspan(3).Cells(cells => { cells.Add(cell => cell.Binding("Customer.Name").Name("CustomerName").Header("Customer")) .Add(cell => cell.Binding("Customer.Email").Name("CustomerEmail").Header("Customer Email").Colspan(2).CssClass("email")) .Add(cell => cell.Binding("Customer.Address").Name("CustomerAddress").Header("Address").Colspan(2)) .Add(cell => cell.Binding("Customer.Phone").Name("CustomerPhone").Header("Phone")) .Add(cell => cell.Binding("Customer.City").Name("CustomerCity").Header("City") .DataMap(dm => { dm.DisplayMemberPath("Value").SelectedValuePath("Value").Bind(Orders.GetCities().ToValues()); })) .Add(cell => cell.Binding("Customer.State").Name("CustomerState").Header("State")) .Add(cell => cell.Binding("Customer.Zip").Name("CustomerZip").Header("Zip")); }); ld.Add().Header("Shipper").Cells(cells => { cells.Add(cell => cell.Binding("Shipper.Name").Name("ShipperName").Header("Shipper").Width("*")) .Add(cell => cell.Binding("Shipper.Email").Name("ShipperEmail").Header("Shipper Email").CssClass("email")) .Add(cell => cell.Binding("Shipper.Express").Name("ShipperExpress").Header("Express")); }); }; } } public static Action<ListItemFactory<CellGroup, CellGroupBuilder>> Sales { get { return ld => { ld.Add().Cells(cells => { cells.Add(cell => cell.Binding("ID").Header("ID")); cells.Add(cell => cell.Binding("Active").Header("Active")); }); ld.Add().Cells(cells => { cells.Add(cell => cell.Binding("Start").Header("Start")); cells.Add(cell => cell.Binding("End").Header("End")); }); ld.Add().Colspan(2).Cells(cells => { cells.Add(cell => cell.Binding("Country").Header("Country").Colspan(2)); cells.Add(cell => cell.Binding("Product").Header("Product")); cells.Add(cell => cell.Binding("Color").Header("Color")); }); ld.Add().Colspan(2).Cells(cells => { cells.Add(cell => cell.Binding("Amount").Header("Amount")); cells.Add(cell => cell.Binding("Amount2").Header("Amount2")); cells.Add(cell => cell.Binding("Discount").Header("Discount").Colspan(2)); }); }; } } } }
using MultiRowExplorer.Models; using System; using System.Collections.Generic; using System.Linq; using System.Web.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> } @(Html.C1().MultiRow<Sale>().Id("excelExportMultiRow") .Bind(Model) .ShowGroups(true) .GroupBy("Product", "Country") .IsReadOnly(true) .CssClass("multirow") .LayoutDefinition(LayoutDefinitionsBuilders.Sales) ) @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 the contents of <b>MultiRow</b> control to an Microsoft Excel (xlsx) format. </p> <p> To export <b>MultiRow</b> contents, 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 a <b>jszip.js</b> library to your application. Its 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> }