Category / Section
How to set orientation while export to pdf?
2 mins read
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.