Category / Section
How to export grid data to Excel, Word and PDF formats on external action
1 min read
The Grid data export can be done externally using the “export” public method of the Grid. The export method will take three parameter such as URL to the export method, Server event name which is used in web forms and a third Boolean parameter to enable multiple grid export.
In the below, we have explained how to use the export method out of the grid to export the grid data. We have exported the grid data on button click.
The Grid initialization will be as follows.
JS
<input id="Export" value="Excel" class="e-exportbutton" />
<input id="Export" value="Word" class="e-exportbutton" />
<input id="Export" value="PDF" class="e-exportbutton" />
<div id="Grid"></div>
<script>
$(function () {
$(".e-exportbutton").ejButton({
click: "exportGrid"
});
$("#Grid").ejGrid({
dataSource: window.gridData,
columns: [
{ field: "OrderID", headerText: "Order ID" },
{ field: "CustomerID", headerText: "Customer ID" }
],
});
});
</script>
MVC
@(Html.EJ().Button("Excel").Text("Excel").ClientSideEvents(evt => evt.Click("exportGrid")))
@(Html.EJ().Button("Word").Text("Word").ClientSideEvents(evt => evt.Click("exportGrid")))
@(Html.EJ().Button("PDF").Text("PDF").ClientSideEvents(evt => evt.Click("exportGrid")))
@(Html.EJ().Grid<Order>("Grid")
.Datasource((IEnumerable<Order>)ViewBag.data)
.AllowPaging()
.Columns(col =>
{
col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true). Add();
col.Field("CustomerID").HeaderText("Customer ID").Add();
})
)
ASPX
<ej:Button ID="Excel" runat="server" Text="Excel" ClientSideOnClick="exportGrid"> </ej:Button> <ej:Button ID="Word" runat="server" Text="Word" ClientSideOnClick="exportGrid"> </ej:Button> <ej:Button ID="PDF" runat="server" Text="PDF" ClientSideOnClick="exportGrid"> </ej:Button> <ej:Grid id="Grid" runat="server" AllowPaging="true"> <Columns> <ej:Column Field="OrderID" HeaderText="Order ID" EditType="Numeric"/> <ej:Column Field="CustomerID" HeaderText="Customer ID" EditType="String"/> </Columns> </ej:Grid>
The client side click event of the button in which we have invoked export operation is as follows.
function exportGrid(args) {
var gridObj = $("#Grid").ejGrid("instance");
var action = args.model.text + "Export";
gridObj.export("/api/GridExport/" + action);
}
We have used the Web API controller to perform the export operation and we can also MVC controllers or ASP.Net web methods to perform export. The Web API controller used is as follows.
public class GridExportController : ApiController
{
// GET api/<controller>
public IEnumerable<string> Get()
{
return new string[] { "value1", "value2" };
}
[System.Web.Http.ActionName("ExcelExport")]
[AcceptVerbs("POST")]
public void ExcelExport()
{
string gridModel = HttpContext.Current.Request.Params["GridModel"];
GridProperties gridPropert = ConvertGridObject(gridModel);
ExcelExport exp = new ExcelExport();
IEnumerable data = new NorthwindDataContext().OrdersViews.ToList();
exp.Export(gridPropert, (IEnumerable)data, "Export.xlsx", ExcelVersion.Excel2010, false, false, "flat-azure-dark");
}
[System.Web.Http.ActionName("WordExport")]
[AcceptVerbs("POST")]
public void WordExport()
{
string gridModel = HttpContext.Current.Request.Params["GridModel"];
GridProperties gridPropert = ConvertGridObject(gridModel);
WordExport exp = new WordExport();
IEnumerable data = new NorthwindDataContext().OrdersViews.ToList();
exp.Export(gridPropert, (IEnumerable)data, "Export.docx");
}
[System.Web.Http.ActionName("PdfExport")]
[AcceptVerbs("POST")]
public void PdfExport()
{
string gridModel = HttpContext.Current.Request.Params["GridModel"];
GridProperties gridPropert = ConvertGridObject(gridModel);
PdfExport exp = new PdfExport();
IEnumerable data = new NorthwindDataContext().OrdersViews.ToList();
exp.Export(gridPropert, (IEnumerable)data, "Export.pdf");
}
private GridProperties ConvertGridObject(string gridProperty)
{
JavaScriptSerializer serializer = new JavaScriptSerializer();
IEnumerable div = (IEnumerable)serializer.Deserialize(gridProperty, typeof(IEnumerable));
GridProperties gridProp = new GridProperties();
foreach (KeyValuePair<string, object> ds in div)
{
var property = gridProp.GetType().GetProperty(ds.Key, BindingFlags.Instance | BindingFlags.Public | BindingFlags.IgnoreCase);
if (property != null)
{
Type type = property.PropertyType;
string serialize = serializer.Serialize(ds.Value);
object value = serializer.Deserialize(serialize, type);
property.SetValue(gridProp, value, null);
}
}
return gridProp;
}
}
The output will be as follows.
Figure 1: Grid with external button to perform export data.
Figure 2: Exported Excel file.
