Category / Section
How to fit all columns in single page for PDF exporting
1 min read
This knowledge base explains how to fit all columns in a single page for PDF exporting
Solution:
While exporting the Grid, columns width is based on its content. By default, it is not feasible to fit n number of columns in a single page of PDF document. But we can afford some more number of columns by rendering the Grid columns based on column width. We can achieve this by defining the isAutoFit as false and setting the PdfPageOrientation as landscape.
- The Grid initialization as follows.
HTML
<div id="Grid"></div>
JS
<script type="text/javascript">
$(function () {
$("#Grid").ejGrid({
dataSource: @Html.Raw(Json.Encode(@ViewBag.DataSource)),
allowPaging: true,
allowTextWrap: true,
toolbarSettings: { showToolbar: true, toolbarItems: [ej.Grid.ToolBarItems.PdfExport] },
columns: [
{ field: "OrderID", headerText: "Order ID", width: 60 },
{ field: "CustomerID", headerText: "Customer ID", width: 70 },
{ field: "EmployeeID", headerText: "Employee ID", width: 60 },
{ field: "Freight", headerText: "Freight", format:"{0:C}", width: 65 },
{ field: "OrderDate", headerText: "Order Date", width: 75, format:"{0: MM/dd/yyyy}" },
{ field: "ShipCity", headerText: "Ship City", width: 90 },
{ field: "ShipName", headerText: "Ship Name", width: 80 },
{ field: "ShipCountry", headerText: "Ship Country", width: 75 },
{ field: "ShipRegion", headerText: "Ship Region", width: 60 },
{ field: "PostalCode", headerText: "Postal Code", width: 75 }
]
});
});
</script>
MVC
@(Html.EJ().Grid<OrdersView>("Grid")
.Datasource((IEnumerable<object>)ViewBag.DataSource)
.AllowPaging()
.AllowTextWrap()
.ToolbarSettings(tool => tool.ShowToolbar(true).ToolbarItems(items =>
items.AddTool(ToolBarItems.PdfExport)
))
.Columns(col =>
{
col.Field("OrderID").HeaderText("Order ID").Width(60).Add();
col.Field("CustomerID").HeaderText("Customer ID").Width(70).Add();
col.Field("EmployeeID").HeaderText("Employee ID").Width(60).Add();
col.Field("Freight").HeaderText("Freight").Width(65).Format("{0:C}").Add();
col.Field("OrderDate").HeaderText("Order Date").Width(75).Format("{0:MM/dd/yyyy}").Add();
col.Field("ShipCity").HeaderText("Ship City").Width(90).Add();
col.Field("ShipName").HeaderText("Ship Name").Width(80).Add();
col.Field("ShipCountry").HeaderText("Ship Country").Width(75).Add();
col.Field("ShipRegion").HeaderText("Ship Region").Width(60).Add();
col.Field("PostalCode").HeaderText("Postal Code").Width(75).Add();
})
)
[CS]
namespace SyncfusionMvcApplication121.Controllers
{
public class GridController : Controller
{
public ActionResult GridFeatures()
{
IEnumerable DataSource = new NorthwindDataContext().OrdersViews.ToList();
ViewBag.datasource = DataSource;
return View();
}
}
}
ASP
<ej:Grid ID="Grid" runat="server" AllowPaging="true" AllowTextWrap="true" OnServerPdfExporting="EmployeesGrid_ServerPdfExporting">
<ToolbarSettings ShowToolbar="true" ToolbarItems="pdfExport"></ToolbarSettings>
<Columns>
<ej:Column Field="OrderID" HeaderText="Order ID" Width="60" />
<ej:Column Field="CustomerID" HeaderText="Customer ID" Width="70" />
<ej:Column Field="EmployeeID" HeaderText="Employee ID" Width="60" />
<ej:Column Field="Freight" HeaderText="Freight" Format="{0:C}" Width="65" />
<ej:Column Field="OrderDate" HeaderText="Order Date" Format="{0:MM/dd/yyyy}" Width="75" />
<ej:Column Field="ShipCity" HeaderText="Ship City" Width="90" />
<ej:Column Field="ShipName" HeaderText="Ship Name" Width="80" />
<ej:Column Field="ShipCountry" HeaderText="Ship Country" Width="75" />
<ej:Column Field="ShipRegion" HeaderText="Ship Region" Width="60" />
<ej:Column Field="PostalCode" HeaderText="PostalCode" Width="75" />
</Columns>
</ej:Grid>
[CS]
namespace SyncfusionASPNETApplication2
{
public partial class _Default : Page
{
protected void Page_Load(object sender, EventArgs e)
{
this.Grid.DataSource = OrderRepository.GetAllRecords();
this.Grid.DataBind();
}
}
}
CORE
<ej-grid id="Grid" allow-paging="true" allow-text-wrap="true" datasource="ViewBag.dataSource">
<e-toolbar-settings show-toolbar="true" toolbar-items="@(new List<string>() { "pdfExport" })"></e-toolbar-settings>
<e-columns>
<e-column field="OrderID" header-text="Order ID" width="60"></e-column>
<e-column field="CustomerID" header-text="Customer ID" width="70"></e-column>
<e-column field="EmployeeID" header-text="Employee ID" width="60"></e-column>
<e-column field="Freight" header-text="Freight" format="{0:C}" width="65"></e-column>
<e-column field="OrderDate" header-text="Order Date" format="{0:MM/dd/yyyy}" width="75"></e-column>
<e-column field="ShipCity" header-text="Ship City" width="90"></e-column>
<e-column field="ShipName" header-text="Ship Name" width="80"></e-column>
<e-column field="ShipCountry" header-text="Ship Country" width="75"></e-column>
<e-column field="ShipRegion" header-text="Ship Region" width="60"></e-column>
<e-column field="PostalCode" header-text="Postal Code" width="75"></e-column>
</e-columns>
</ej-grid>
[CS]
namespace WebApplication1.Controllers
{
public class HomeController : Controller
{
private NORTHWNDContext _context;
public HomeController(NORTHWNDContext context)
{
_context = context;
}
public IActionResult Index()
{
ViewBag.dataSource = _context.Orders.Take(100).ToList();
return View();
}
}
}
Angular
<ej-grid id="Grid" [dataSource]="DataManager" [allowPaging]="true" [allowTextWrap]="true" [toolbarSettings]="toolbarItems">
<e-columns>
<e-column field="OrderID" headertext="Order ID" width="60"></e-column>
<e-column field="CustomerID" headertext="Customer ID" width="70"></e-column>
<e-column field="EmployeeID" headertext="Employee ID" width="60"></e-column>
<e-column field="Freight" headertext="Freight" format="{0:C}" width="65"></e-column>
<e-column field="OrderDate" headertext="Order Date" format= "{0:MM/dd/yyyy}" width="75"></e-column>
<e-column field="ShipCity" headertext="Ship City" width="90"></e-column>
<e-column field="ShipName" headertext="Ship Name" width="80"></e-column>
<e-column field="ShipCountry" headertext="Ship Country" width="75"></e-column>
<e-column field="ShipRegion" headertext="Ship Region" width="60"></e-column>
<e-column field="PostalCode" headertext="Postal Code" width="75"></e-column>
</e-columns>
</ej-grid>
TS
export class AppComponent {
public toolbarItems;
public DataManager : any;
constructor() {
this.DataManager = (window as any).gridData;
this.toolbarItems = { showToolbar : true, toolbarItems : ["pdfExport"]};
}
}
- Handling server-side for PDF exporting
ASP
protected void Grid_ServerPdfExporting(object sender, GridEventArgs e)
{
PdfExport exp = new PdfExport();
PdfDocument doc = new PdfDocument();
doc.PageSettings.Orientation = PdfPageOrientation.Landscape;
doc.PageSettings.Size = PdfPageSize.A3;
exp.Export(Grid.Model, (IEnumerable)Grid.DataSource, "Export.pdf", false, false, "flat-saffron", false, false, doc, "Grid", false);
}
MVC
public void ExportToPdf(string GridModel)
{
PdfExport exp = new PdfExport();
BindDataSource();
var DataSource = order.ToList();
GridProperties obj = (GridProperties)Syncfusion.JavaScript.Utils.DeserializeToModel(typeof(GridProperties), GridModel);
PdfDocument doc = new PdfDocument();
doc.PageSettings.Orientation = PdfPageOrientation.Landscape;
doc.PageSettings.Size = PdfPageSize.A3;
exp.Export(obj, DataSource, "Export.pdf", false, false, "flat-saffron", false, false, doc, "Grid", false);
}
Core
private NORTHWNDContext _context;
public HomeController(NORTHWNDContext context)
{
_context = context;
}
public ActionResult ExportToPdf(string GridModel)
{
PdfExport exp = new PdfExport();
var DataSource = _context.Orders.Take(100).ToList();
GridProperties obj = ConvertGridObject(GridModel);
GridPdfExport pdfExp = new GridPdfExport();
PdfDocument doc = new PdfDocument();
doc.PageSettings.Orientation = PdfPageOrientation.Landscape;
doc.PageSettings.Size = PdfPageSize.A3;
pdfExp.FileName = "Export.pdf"; pdfExp.Theme = "flat-saffron";
pdfExp.IsAutoFit = false; pdfExp.PdfDocument = doc;
pdfExp.Unicode = false; pdfExp.IsHideColumnIncude = false;
pdfExp.IsTemplateColumnIncluded = false; pdfExp.HeaderText = "Grid";
return exp.Export(obj, DataSource, pdfExp);
}
private GridProperties ConvertGridObject(string gridProperty)
{
GridProperties gridProp = new GridProperties();
gridProp = (GridProperties)JsonConvert.DeserializeObject(gridProperty, typeof(GridProperties));
return gridProp;
}
Note:
- If we have more columns which is not fit into A4 size landscape mode, then we can change the size of pageSettings as you want.
- We cannot render n number of columns in a single page of pdf document
Result:
Figure 1: Grid exported document with landscape mode
