Exporting grid in server in EJ2 JavaScript Grid control
23 Dec 202313 minutes to read
The Grid have an option to export the data to PDF in server side using Grid server export library.
Server dependencies
The Server side export functionality is shipped in the Syncfusion.EJ2.GridExport package, which is available in Essential Studio and nuget.org.The following list of dependencies is required for Grid server side PDF exporting action.
- Syncfusion.EJ2
- Syncfusion.EJ2.GridExport
- Syncfusion.Compression.Base
- Syncfusion.Pdf.Base
Server configuration
The following code snippets shows server configuration using ASP.NET MVC Controller Action.
To Export the Grid in server side, You need to call the
serverPdfExport
method for passing the Grid properties to server exporting action.
public ActionResult PdfExport(string gridModel)
{
GridPdfExport exp = new GridPdfExport();
Grid gridProperty = ConvertGridObject(gridModel);
return exp.PdfExport<OrdersDetails>(gridProperty, OrdersDetails.GetAllRecords());
}
private Grid ConvertGridObject(string gridProperty)
{
Grid GridModel = (Grid)Newtonsoft.Json.JsonConvert.DeserializeObject(gridProperty, typeof(Grid));
GridColumnModel cols = (GridColumnModel)Newtonsoft.Json.JsonConvert.DeserializeObject(gridProperty, typeof(GridColumnModel));
GridModel.Columns = cols.columns;
return GridModel;
}
public class GridColumnModel
{
public List<GridColumn> columns { get; set; }
}
public ActionResult DataSource(DataManager dm)
{
var DataSource = OrderRepository.GetAllRecords();
DataResult result = new DataResult();
result.result = DataSource.Skip(dm.Skip).Take(dm.Take).ToList();
result.count = result.result.Count;
return Json(result, JsonRequestBehavior.AllowGet);
}
import { Grid, Toolbar } from '@syncfusion/ej2-grids';
import { DataManager, UrlAdaptor } from '@syncfusion/ej2-data';
Grid.Inject(Toolbar);
let data: DataManager = new DataManager({
url: "Home/DataSource",
adaptor: new UrlAdaptor
});
let grid: Grid = new Grid({
dataSource: data,
toolbar: ['PdfExport'],
columns: [
{ field: 'OrderID', headerText: 'Order ID', textAlign: 'Right', width: 100 },
{ field: 'CustomerID', headerText: 'Customer ID', width: 120 },
{ field: 'Freight', headerText: 'Freight', textAlign: 'Right', width: 120, format: 'C2' },
{ field: 'ShipCountry', headerText: 'Ship Country', width: 150 }
],
height: 265
});
grid.appendTo('#Grid');
grid.toolbarClick = (args: Object) => {
if (args['item'].id === 'Grid_pdfexport') {
grid.serverPdfExport("Home/PdfExport");
}
}
Note: Refer to the GitHub sample for quick implementation and testing from here.
Export grid as memory stream
The Grid offers an option to export the data as a memory stream instead of downloading it as a file in the browser. To obtain the memory stream of the exported grid, set the AsMemoryStream
parameter to true in the PdfExport method.
The following code demonstrates how to get the memory stream of exported grid.
public object PdfExport(string gridModel)
{
GridPdfExport exp = new GridPdfExport();
Grid gridProperty = ConvertGridObject(gridModel);
// pass third parameter as true to get the Memory Stream of exported grid data
return (MemoryStream)exp.PdfExport<OrdersDetails>(gridProperty, OrdersDetails.GetAllRecords(), true);
}
Merge grid’s memory stream
The Essential PDF library is used to merge multiple memory streams into a single stream. To learn more about the merge option, please refer to this documentation.
You can merge a memory stream, a file stream, and a local file with the Grid’s memory stream in the following ways:
Merging with an existing memory stream
If you already have a memory stream, you can directly use it to merge with the Grid’s memory stream.
In the following code, the Merge method of the PdfDocumentBase class is used to merge the grid’s memory stream with an existing memory stream.
using Syncfusion.Pdf;
public MemoryStream ms1; // defines existing memory stream
public object PdfExport(string gridModel)
{
GridPdfExport exp = new GridPdfExport();
Grid gridProperty = ConvertGridObject(gridModel);
// get the memory stream of exported grid data
MemoryStream ms2 = (MemoryStream)exp.PdfExport<OrdersDetails>(gridProperty, OrdersDetails.GetAllRecords(), true);
//Creates a PDF document.
PdfDocument finalDoc = new PdfDocument();
//Creates a PDF stream for merging. ms1 and ms2 represents the existing stream and grid's stream.
Stream[] streams = { ms1, ms2 };
//Merges PDFDocument.
PdfDocumentBase.Merge(finalDoc, streams);
//Save the document into stream.
MemoryStream ms3 = new MemoryStream();
finalDoc.Save(ms3);
ms3.Position = 0;
//Close the document.
finalDoc.Close(true);
//Dispose the streams.
ms1.Dispose();
ms2.Dispose();
return ms3;
}
Merging with an existing file stream
If you already have a file stream, you can directly use it to merge with the Grid’s memory stream. In the following code, the existing file stream is merged with the Grid’s memory stream.
using Syncfusion.Pdf;
public FileStream fs1; // defines existing file stream
public ActionResult PdfExport(string gridModel)
{
GridPdfExport exp = new GridPdfExport();
Grid gridProperty = ConvertGridObject(gridModel);
MemoryStream ms1 = (MemoryStream)exp.PdfExport<OrdersDetails>(gridProperty, OrdersDetails.GetAllRecords(), true);
PdfDocument finalDoc = new PdfDocument();
//fs1 and ms1 represents the existing stream and grid's stream.
Stream[] streams = { fs1, ms1 };
PdfDocumentBase.Merge(finalDoc, streams);
MemoryStream ms3 = new MemoryStream();
finalDoc.Save(ms3);
ms3.Position = 0;
return ms3;
}
Merging with a local file
To merge a local file with the Grid’s memory stream, you need to convert it into a file stream before merging. In the following code, the existing local file is merged with the Grid’s memory stream.
using Syncfusion.Pdf;
// get the file stream of local file
public FileStream fs1 = new FileStream("D:/PdfDoc.pdf", FileMode.Open, FileAccess.Read); // PdfDoc.pdf is a local file which is located in local disk D.
public ActionResult PdfExport(string gridModel)
{
GridPdfExport exp = new GridPdfExport();
Grid gridProperty = ConvertGridObject(gridModel);
MemoryStream ms1 = (MemoryStream)exp.PdfExport<OrdersDetails>(gridProperty, OrdersDetails.GetAllRecords(), true);
PdfDocument finalDoc = new PdfDocument();
//fs1 and ms1 represents the local file's stream and grid's stream.
Stream[] streams = { fs1, ms1 };
PdfDocumentBase.Merge(finalDoc, streams);
MemoryStream ms3 = new MemoryStream();
finalDoc.Save(ms3);
ms3.Position = 0;
return ms3;
}
Downloading the merged memory stream
You can download the merged memory stream by converting it into a FileStreamResult
. In the following code, the merged memory stream is downloaded to the browser.
using Syncfusion.Pdf;
public ActionResult PdfExport(string gridModel)
{
PdfDocument finalDoc = new PdfDocument();
//ms1 and ms2 represents the streams needs to merge.
Stream[] streams = { ms1, ms2 };
PdfDocumentBase.Merge(finalDoc, streams);
MemoryStream ms3 = new MemoryStream();
finalDoc.Save(ms3);
ms3.Position = 0;
// Save the MemoryStream into FileStreamResult
FileStreamResult fileStreamResult = new FileStreamResult(ms3, "application/pdf");
fileStreamResult.FileDownloadName = "Export.pdf";
//Close the document.
finalDoc.Close(true);
//Dispose the streams.
ms1.Dispose();
ms2.Dispose();
// return the file
return fileStreamResult;
}
Rotate a header text to a certain degree in the exported grid on the server side
The Grid has support to customize the column header styles such as changing text orientation, the font color, and so on in the exported PDF file. To achieve this requirement, define the BeginCellLayout
event of the PdfExportProperties
with an event handler to perform the required action.
The PdfHeaderQueryCellInfoEvent
will be triggered when creating a column header for the pdf document to be exported. Collect the column header details in this event and handle the custom in the BeginCellLayout event handler.
In the following demo, the DrawString
method from the Graphics
is used to rotate the header text of the column header inside the BeginCellLayout
event handler.
A PDF exporting is not supported to rotate the column header on the client side.
public ActionResult PdfExport(string gridModel)
{
GridPdfExport exp = new GridPdfExport();
Grid gridProperty = ConvertGridObject(gridModel);
gridProperty.ServerPdfHeaderQueryCellInfo = PdfHeaderQueryCellInfo;
PdfGrid grid = new PdfGrid();
PdfExportProperties pdfExportProperties = new PdfExportProperties();
pdfExportProperties.IsRepeatHeader = true;
pdfExportProperties.BeginCellLayout = new PdfGridBeginCellLayoutEventHandler(BeginCellEvent);
gridProperty.ServerPdfQueryCellInfo = PdfQueryCellInfo;
IEnumerable data = Utils.DataTableToJson(dt);
var result = exp.PdfExport<dynamic>(gridProperty, data, pdfExportProperties);
return result;
}
public void BeginCellEvent(object sender, PdfGridBeginCellLayoutEventArgs args)
{
PdfGrid grid = (PdfGrid)sender;
var brush = new PdfSolidBrush(new PdfColor(Color.DimGray));
args.Graphics.Save();
args.Graphics.TranslateTransform(args.Bounds.X + 50, args.Bounds.Height + 40); // give the value for bounds x and Y by the user
args.Graphics.RotateTransform(-60); // give the rotate degree value by the user
// Draw the text at particular bounds.
args.Graphics.DrawString(headerValues[args.CellIndex], new PdfStandardFont(PdfFontFamily.Helvetica, 10), brush, new PointF(0, 0));
if (args.IsHeaderRow)
{
grid.Headers[0].Cells[args.CellIndex].Value = string.Empty;
}
args.Graphics.Restore();
}
private void PdfHeaderQueryCellInfo(object pdf)
{
ServerPdfHeaderQueryCellInfoEventArgs name = (ServerPdfHeaderQueryCellInfoEventArgs)pdf;
PdfGrid grid = new PdfGrid();
headerValues.Add(name.Column.HeaderText);
var longestString = headerValues.Where(s => s.Length == headerValues.Max(m => m.Length)).First();
PdfFont font = new PdfStandardFont(PdfFontFamily.Helvetica, 6);
SizeF size = font.MeasureString(longestString);
name.Headers[0].Height = size.Width * 2;
}
Limitations
- The export feature for detail templates is not supported in server-side exporting.
- Multiple grids exporting feature is not supported with server side exporting.