The Grid have an option to export the data to PDF in server side using Grid server export library.
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.
The following code snippet shows server configuration using ASP.NET Core 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([FromForm] 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 IActionResult UrlDatasource([FromBody]DataManagerRequest dm)
{
IEnumerable DataSource = OrdersDetails.GetAllRecords();
DataOperations operation = new DataOperations();
int count = DataSource.Cast<OrdersDetails>().Count();
return dm.RequiresCounts ? Json(new { result = DataSource, count = count }) : Json(DataSource);
}import { ClickEventArgs } from '@syncfusion/ej2-navigations';
import { DataManager, UrlAdaptor } from '@syncfusion/ej2-data';
import { ColumnDirective, ColumnsDirective, GridComponent, ToolbarItems } from '@syncfusion/ej2-react-grids';
import { Grid, Inject, Toolbar } from '@syncfusion/ej2-react-grids';
import * as React from 'react';
export default class App extends React.Component<{}, {}> {
public grid: Grid | null;
public dataManager: DataManager = new DataManager({
adaptor: new UrlAdaptor(),
url: "Home/UrlDatasource"
});
public toolbar: ToolbarItems[] = ['PdfExport'];
public toolbarClick = (args: ClickEventArgs) => {
if (this.grid && args.item.id === 'grid_pdfexport') {
this.grid.serverPdfExport('Home/PdfExport');
}
}
public render() {
this.toolbarClick = this.toolbarClick.bind(this);
return (
<div>
<GridComponent id='grid' dataSource={this.dataManager} height={270} toolbar={this.toolbar} toolbarClick={this.toolbarClick} ref={g=> this.grid = g}>
<ColumnsDirective>
<ColumnDirective field='OrderID' headerText='Order ID' width='120' textAlign='Right'/>
<ColumnDirective field='CustomerID' headerText='Customer ID' width='150' />
<ColumnDirective field='Freight' format="C2" width='100' textAlign='Right'/>
<ColumnDirective field='ShipCity' headerText='Ship City' width='150'/>
<ColumnDirective field='ShipName' headerText='Ship Name' width='150' />
</ColumnsDirective>
<Inject services={[Toolbar]}/>
</GridComponent>
</div>
);
}
}Note: Refer to the GitHub sample for quick implementation and testing from here.
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;
}