WYSIWYG Export

The Grid View control supports exporting data to the following formats: XLSX, XLS, RTF and CSV.

To implement the export functionality in your application, use these steps:

  1. In the controller, get an instance of the IDevExpressControlAccessor interface via Dependency Injection (DI)
  2. Add a separate controller action method for the exporting operation
  3. In the created action method, get an instance of the GridView's state available through the GridView method of the IDevExpressControlAccessor interface instance. Pass a path to the Grid View control's partial view and a model object in the GridView method. On a request to this action, the instance of the IDevExpressControlAccessor interface will find the Grid View control in the specified view file and obtain the control's settings
  4. Call one of the exporting methods depending on the required target format: ExportToXlsx, ExportToXls, ExportToRtf, ExportToCsv. If you need to set up format-specific options, use the exporting method's overload taking the options parameter

The Grid View control supports both data-aware (used by default for the XLS and XLSX formats) and WYSIWYG export modes. The WYSIWYG export mode supports a wide range of customizations of an exported document, such as paper size and page orientation, custom headers and footers, custom document styles, and exporting a master-detail Grid View.

To use the WYSIWYG mode for XLS and XLSX formats, pass the ExportType.WYSIWYG value to the ExportType method (available through the ExportToXlsx or ExportToXls method). Exporting to the CSV and RTF formats is always performed in the WYSIWYG mode.

Format-unspecific export options can be set using methods of the IDataAwareExportService interface:

Export To:

Drag a column header here to group by that column
Product Name Category Supplier Quantity Per Unit Unit Price
ChaiBeveragesExotic Liquids10 boxes x 20 bags$18.00
ChangBeveragesExotic Liquids24 - 12 oz bottles$19.00
Aniseed SyrupCondimentsExotic Liquids12 - 550 ml bottles$10.00
Chef Anton's Cajun SeasoningCondimentsNew Orleans Cajun Delights48 - 6 oz jars$22.00
Chef Anton's Gumbo MixCondimentsNew Orleans Cajun Delights36 boxes$21.00
Grandma's Boysenberry SpreadCondimentsGrandma Kelly's Homestead12 - 8 oz jars$25.00
Uncle Bob's Organic Dried PearsProduceGrandma Kelly's Homestead12 - 1 lb pkgs.$30.00
Northwoods Cranberry SauceCondimentsGrandma Kelly's Homestead12 - 12 oz jars$40.00
Mishi Kobe NikuMeat/PoultryTokyo Traders18 - 500 g pkgs.$97.00
IkuraSeafoodTokyo Traders12 - 200 ml jars$31.00
@model IEnumerable
@using(Html.BeginForm()) {
    @(Html.DevExpress()
            .BootstrapButton("wysiwygXLSX")
            .Text("XLSX")
            .UseSubmitBehavior(true)
            .Route(route => route.Action("ExportToXlsx").Controller("GridView"))
            .CssClasses(css => css.Icon("fa fa-file-excel-o")))
    ...
    @Html.Partial("Export/ExportingPartial", Model)
}
@(Html.DevExpress()
    .BootstrapGridView("wysiwygExportGrid")
    .Columns(columns => {
        columns.Add().FieldName("ProductName");
        columns.Add().FieldName("Category");
        columns.Add().FieldName("Supplier");
        columns.Add().FieldName("QuantityPerUnit");
        columns
            .AddTextColumn()
            .FieldName("UnitPrice")
            .PropertiesTextEdit(p => p.DisplayFormatString("c"));
    })
    .Settings(settings => settings.ShowGroupPanel(true))
    .Routes(routes => routes
        .MapRoute(r => r.Action("ExportingPartial").Controller("GridView")))
    .Bind(Model))
using DevExpress.AspNetCore.Bootstrap;
using DevExpress.AspNetCore.DemoModels;
using DevExpress.Export;
using Microsoft.AspNetCore.Mvc;
namespace DevExpress.AspNetCore.Demos {
    public partial class GridViewController : Controller {
        public GridViewController(IDevExpressControlAccessor devExpress, NorthwindContext northwindContext) {
            DevExpress = devExpress;
            NorthwindContext = northwindContext;
        }
        protected IDevExpressControlAccessor DevExpress { get; }
        protected NorthwindContext NorthwindContext { get; }
        public IActionResult Exporting() {
            return PartialView("Export/Exporting", NorthwindContext.GetDetailedProductsInfo());
        }
        public IActionResult ExportingPartial() {
            return PartialView("Export/ExportingPartial", NorthwindContext.GetDetailedProductsInfo());
        }
        public IActionResult ExportToXlsx() {
            var grid = DevExpress.GridView("Export/ExportingPartial", NorthwindContext.GetDetailedProductsInfo());
            return grid.ExportToXlsx(xlsx => xlsx.ExportType(ExportType.WYSIWYG));
        }
        public IActionResult ExportToXls() {
            var grid = DevExpress.GridView("Export/ExportingPartial", NorthwindContext.GetDetailedProductsInfo());
            return grid.ExportToXls(xls => xls.ExportType(ExportType.WYSIWYG));
        }
        public IActionResult ExportToCsv() {
            var grid = DevExpress.GridView("Export/ExportingPartial", NorthwindContext.GetDetailedProductsInfo());
            return grid.ExportToCsv(csv => csv.ExportType(ExportType.WYSIWYG));
        }
        public IActionResult ExportToRtf() {
            var grid = DevExpress.GridView("Export/ExportingPartial", NorthwindContext.GetDetailedProductsInfo());
            return grid.ExportToRtf();
        }
    }
}

Data Aware Export

In data-aware mode, the DevExpress Export Engine maintains a data grouping layout and automatically transforms summary items to corresponding Excel functions, but this mode has a number of limitations related to styling of exported document content.

This mode is available for the XLS and XLSX formats (available through the ExportToXlsx or ExportToXls method) and is used by default.

Export To:

Order ID Order Date Company Name Shipped Date Ship City Sale Amount
Ship Country: Austria (Continued on the next page)
 1035111/11/2014Ernst Handel11/20/2014Graz$5,445.00
 1035311/13/2014Piccolo und mehr11/25/2014Salzburg$8,603.00
 1038212/13/2014Ernst Handel12/16/2014Graz$2,900.00
 104021/2/2015Ernst Handel1/10/2015Graz$2,695.00
 104301/30/2015Ernst Handel2/3/2015Graz$4,880.00
 105144/22/2015Ernst Handel5/16/2015Graz$8,648.00
 105305/8/2015Piccolo und mehr5/12/2015Salzburg$4,190.00
 105957/10/2015Ernst Handel7/14/2015Graz$4,770.00
 106338/15/2015Ernst Handel8/18/2015Graz$5,483.00
 1069810/9/2015Ernst Handel10/17/2015Graz$3,436.00
 1077612/15/2015Ernst Handel12/18/2015Graz$6,656.00
@model IEnumerable
@using(Html.BeginForm()) {
    @(Html.DevExpress()
        .BootstrapButton("DataAwareXLSX")
        .Text("XLSX")
        .UseSubmitBehavior(true)
        .Route(route => route.Action("DataAwareExportToXlsx").Controller("GridView"))
        .CssClasses(css => css.Icon("fa fa-file-excel-o")))
    ...
    @Html.Partial("Export/DataAwareExportPartial", Model)
}
@(Html.DevExpress()
    .BootstrapGridView("dataAwareExportGrid")
    .Columns(columns => {
        columns.Add().FieldName("OrderID");
        columns.Add().FieldName("OrderDate");
        columns.Add().FieldName("ShipCountry").GroupIndex(0);
        ...
    })
    .Settings(settings => settings
        .ShowGroupPanel(true)
        .ShowFooter(true)
        .ShowGroupFooter(GridViewGroupFooterMode.VisibleIfExpanded))
    .GroupSummary(summary => {
        summary
            .Add()
            .FieldName("OrderID")
            .ShowInGroupFooterColumn("OrderDate")
            .SummaryType(SummaryItemType.Count);
        ...
    })
    .TotalSummary(summary => {
        summary
            .Add()
            .FieldName("OrderID")
            .ShowInColumn("OrderDate")
            .SummaryType(SummaryItemType.Count);
        ...
    })
    .Routes(routes => routes
        .MapRoute(r => r.Action("DataAwareExportPartial").Controller("GridView")))
    ...
    .Bind(Model))
using DevExpress.AspNetCore.Bootstrap;
using DevExpress.AspNetCore.DemoModels;
using Microsoft.AspNetCore.Mvc;
using System;
namespace DevExpress.AspNetCore.Demos {
    public partial class GridViewController : Controller {
        public GridViewController(IDevExpressControlAccessor devExpress, NorthwindContext northwindContext) {
            DevExpress = devExpress;
            NorthwindContext = northwindContext;
        }
        protected IDevExpressControlAccessor DevExpress { get; }
        protected NorthwindContext NorthwindContext { get; }
        public IActionResult DataAwareExport() {
            return PartialView("Export/DataAwareExport", NorthwindContext.GetTotalSalesOfOrders());
        }
        public IActionResult DataAwareExportPartial() {
            return PartialView("Export/DataAwareExportPartial", NorthwindContext.GetTotalSalesOfOrders());
        }
        public IActionResult DataAwareExportToXlsx() {
            var grid = DevExpress.GridView("Export/DataAwareExportPartial", NorthwindContext.GetTotalSalesOfOrders());
            return grid.ExportToXlsx();
        }
        public IActionResult DataAwareExportToXls() {
            var grid = DevExpress.GridView("Export/DataAwareExportPartial", NorthwindContext.GetTotalSalesOfOrders());
            return grid.ExportToXls();
        }
    }
}

Export with Format Conditions

When data is exported to a RTF file, the Grid View maintains the style settings applied to the cells (with the exception of images). Moreover, when we export data to Excel formats (XLS and XLSX), the format conditions are transformed to corresponding Excel conditional formatting rules. Therefore, you can manage the rules in Excel after export.

Export To:

Company Name Unit Price Discount Quantity Total
Vins et alcools Chevalier$14.000 %12$168.00
Vins et alcools Chevalier$10.000 %10$100.00
Vins et alcools Chevalier$35.000 %5$175.00
Toms Spezialitäten$19.000 %9$171.00
Toms Spezialitäten$42.000 %40$1,680.00
Hanari Carnes$8.000 %10$80.00
Hanari Carnes$42.0015 %35$1,249.50
Hanari Carnes$17.0015 %15$216.75
Victuailles en stock$17.005 %6$96.90
Victuailles en stock$16.005 %15$228.00
@model IEnumerable
@using(Html.BeginForm()) {
    @(Html.DevExpress()
        .BootstrapButton("formatConditionsXLSX")
        .Text("XLSX")
        .UseSubmitBehavior(true)
        .Route(route => route.Action("ExportWithFormatConditionsToXlsx").Controller("GridView"))
        .CssClasses(css => css.Icon("fa fa-file-excel-o")))
                ...
    @Html.Partial("Export/ExportWithFormatConditionsPartial", Model)
}
@(Html.DevExpress()
    .BootstrapGridView("formatConditionsGrid")
    .Columns(columns => {
        ...
    })
    .FormatConditions(conditions => {
        conditions.AddTopBottom()
            .FieldName("UnitPrice")
            .Rule(GridTopBottomRule.AboveAverage)
            .Format(GridConditionHighlightFormat.ItalicText);
        conditions.AddTopBottom()
            .FieldName("UnitPrice")
            .Rule(GridTopBottomRule.AboveAverage)
            .Format(GridConditionHighlightFormat.RedText);
        conditions.AddTopBottom()
            .FieldName("Discount")
            .Rule(GridTopBottomRule.TopItems)
            .Threshold(15)
            .Format(GridConditionHighlightFormat.BoldText);
        conditions.AddHighlight()
            .FieldName("Discount")
            .Expression("[Discount] > 0")
            .Format(GridConditionHighlightFormat.GreenFillWithDarkGreenText);
        conditions.AddColorScale()
            .FieldName("Quantity")
            .Format(GridConditionColorScaleFormat.GreenWhite);
        conditions.AddIconSet()
            .FieldName("Quantity")
            .Format(GridConditionIconSetFormat.Ratings4);
        conditions.AddTopBottom()
            .FieldName("Total")
            .Rule(GridTopBottomRule.TopPercent)
            .Threshold(20)
            .Format(GridConditionHighlightFormat.Custom)
            .Style(style => style.Font(font => font.Bold(true)).ForeColor(System.Drawing.Color.FromArgb(0x9c, 0x00, 0x06)));
    })
    .Routes(routes => routes
        .MapRoute(r => r.Action("ExportWithFormatConditionsPartial").Controller("GridView")))
    .Bind(Model))
using DevExpress.AspNetCore.Bootstrap;
using DevExpress.AspNetCore.DemoModels;
using DevExpress.Export;
using Microsoft.AspNetCore.Mvc;
namespace DevExpress.AspNetCore.Demos {
    public partial class GridViewController : Controller {
        public GridViewController(IDevExpressControlAccessor devExpress, NorthwindContext northwindContext) {
            DevExpress = devExpress;
            NorthwindContext = northwindContext;
        }
        protected IDevExpressControlAccessor DevExpress { get; }
        protected NorthwindContext NorthwindContext { get; }
        public IActionResult ExportWithFormatConditions() {
            return PartialView("Export/ExportWithFormatConditions", NorthwindContext.GetInvocesSummary());
        }
        public IActionResult ExportWithFormatConditionsPartial() {
            return PartialView("Export/ExportWithFormatConditionsPartial", NorthwindContext.GetInvocesSummary());
        }
        public IActionResult ExportWithFormatConditionsToXlsx() {
            var grid = DevExpress.GridView("Export/ExportWithFormatConditionsPartial", NorthwindContext.GetInvocesSummary());
            return grid.ExportToXlsx();
        }
        public IActionResult ExportWithFormatConditionsToXls() {
            var grid = DevExpress.GridView("Export/ExportWithFormatConditionsPartial", NorthwindContext.GetInvocesSummary());
            return grid.ExportToXls();
        }
        public IActionResult ExportWithFormatConditionsToRtf() {
            var grid = DevExpress.GridView("Export/ExportWithFormatConditionsPartial", NorthwindContext.GetInvocesSummary());
            return grid.ExportToRtf();
        }
    }
}
Screen Size
Color Themes
Demo QR Code