How to export grid data to Excel, Word and PDF formats on external action?
The JavaScript Grid data export can be done externally using the “export” public method of the JavaScript 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 JavaScript Grid export.
In the below, we have explained how to use the export method out of the grid to export the JavaScript Grid data. We have exported the JavaScript 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.
Conclusion
I hope you enjoyed learning how to export grid data to Excel, Word and PDF formats on external action.
You can refer to our JavaScript Grid feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our JavaScript Grid example to understand how to create and manipulate data.
For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
