Category / Section
How to set orientation while export to pdf?
Solution:
We can change the Orientation of the page as “Landscape” by set the “Landscape” property of the “PdfPageOrientation” class while exporting the grid in pdf.
Example:
JS:
<script type="text/javascript">
$("#Grid").ejGrid({
dataSource: ej.DataManager({ url: "http://js.syncfusion.com/ExportingServices/Northwnd.svc/Orders/", offline: true }),
allowPaging: true,
//Enable pdf export icon
toolbarSettings: { showToolbar: true, toolbarItems: [ej.Grid.ToolBarItems.PdfExport] },
columns: [
{ field: "OrderID", headerText: "Order ID", width: 75 , textAlign: ej.TextAlign.Right },
{ field: "CustomerID", headerText: "Customer ID", width: 80 },
{ field: "EmployeeID", headerText: "Employee ID", width: 75, textAlign: ej.TextAlign.Right },
{ field: "ShipCity", headerText: "Ship City", width: 110 },
{ field: "ShipCountry", headerText: "Ship Country", width: 110 }
],
toolbarClick: function (e) {
this.exportGrid = this["export"];
if (e.itemName == "PDF Export") {
//call to ExportToPdf method
this.exportGrid('api/Values/ExportToPdf’)
e.cancel = true;
}
});
</script>
ValuesController.cs
public void ExportToPdf(string GridModel)
{
PdfDocument document = new PdfDocument();
document.PageSettings.Orientation = PdfPageOrientation.Landscape; //Sets landscape page orientation.
PdfExport exp = new PdfExport();
exp.Export(obj, DataSource, "Export.pdf", false, false, "flat-saffron" , false , document, "Grid");
}
MVC:
@(Html.EJ().Grid<object>("FlatGrid")
.Datasource((IEnumerable<object>)ViewBag.datasource)
.Columns(col =>
{
col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).TextAlign(TextAlign.Right).Width(75).Add();
col.Field("CustomerID").HeaderText("Customer ID").Width(80).Add();
col.Field("EmployeeID").HeaderText("Employee ID").TextAlign(TextAlign.Right).Width(75).Add();
col.Field("ShipCity").HeaderText("Ship City").Width(110).Add();
col.Field("ShipCountry").HeaderText("Ship Country").Width(110).Add();
})
.ToolbarSettings(toolBar => toolBar.ShowToolbar().ToolbarItems(items =>
{
//Enable pdf export icon
items.AddTool(ToolBarItems.PdfExport);
})
)
GridController.cs
public void ExportToPdf(string GridModel)
{
PdfDocument document = new PdfDocument();
document.PageSettings.Orientation = PdfPageOrientation.Landscape; //Sets landscape page orientation.
PdfExport exp = new PdfExport();
exp.Export(obj, DataSource, "Export.pdf", false, false, "flat-saffron" , false , document, "Grid");
}
ASP:
<ej:Grid ID="FlatGrid" runat="server" AllowSorting="True" OnServerPdfExporting="FlatGrid_ServerPdfExporting" AllowPaging="True"> //Enable pdf export icon <toolbarsettings showtoolbar="true" toolbaritems="pdfExport"></toolbarsettings> <columns> <ej:column field="OrderID" headertext="Order ID" isprimarykey="True" width="75" /> <ej:column field="CustomerID" headertext="Customer ID" width="80" /> <ej:column field="EmployeeID" headertext="Employee ID" textalign="Right" width="75" /> <ej:column field="ShipCity" headertext="Ship City" width="110" /> <ej:column field="ShipCountry" headertext="Ship Country" width="110" /> </columns> </ej:Grid>
Default.aspx.cs
protected void FlatGrid_ServerPdfExporting(object sender, Syncfusion.JavaScript.Web. GridEventArgs e)
{
PdfDocument document = new PdfDocument();
document.PageSettings.Orientation = PdfPageOrientation.Landscape; //Sets landscape page orientation.
PdfExport exp = new PdfExport();
exp.Export(FlatGrid.Model, (IEnumerable)FlatGrid.DataSource, "Export.pdf", true, true, "flat-lime",false , document, "Grid");
}
Note: We need to refer the “Syncfusion.Pdf.Base” dll to access the Pdf options. Please refer the below screen shot.
Result:

Figure: Grid in Landscape orientation while pdf exporting.