- Page setup
- Print on external button click
- Print visible page
Contact Support
12 Jun 20237 minutes to read
Use the print()
method from Grid instance to print the grid. You can add print option in Toolbar item by adding printGrid
in toolbar-items
.
<ej-grid id="FlatGrid" allow-paging="true" datasource="ViewBag.DataSource">
<e-toolbar-settings show-toolbar="true" toolbar-items='@new List<string> {"printGrid"}'/>
<e-columns>
<e-column field="OrderID" header-text="Order ID" width="75" text-align="Right"></e-column>
<e-column field="CustomerID" header-text="CustomerID" width="90"></e-column>
<e-column field="EmployeeID" header-text="Employee ID" width="80" text-align="Right"></e-column>
<e-column field="Freight" header-text="Freight" text-align="Right" width="80"></e-column>
<e-column field="ShipCity" header-text="Ship City" width="90"></e-column>
</e-columns>
</ej-grid>
namespace MVCSampleBrowser.Controllers
{
public class GridController : Controller
{
public IActionResult GridFeatures()
{
var DataSource = new NorthwindDataContext().OrdersViews.ToList();
ViewBag.DataSource = DataSource;
return View();
}
}
}
Page setup
Some of print options are not configurable through JavaScript code. You need to customize layout, paper size and margins options through browser’s page setup dialog. Find the following guidelines link for the browser page setup.
Print on external button click
By default, the grid can be print from toolbar. To print from external button action, you need to call the grid’s print()
method from required button event.
<button id="print">Print</button>
<ej-grid id="FlatGrid" allow-paging="true" datasource="ViewBag.DataSource">
<e-toolbar-settings show-toolbar="true" toolbar-items='@new List<string> {"printGrid"}'/>
<e-columns>
<e-column field="OrderID" header-text="Order ID" width="75" text-align="Right"></e-column>
<e-column field="CustomerID" header-text="Customer ID" width="90"></e-column>
<e-column field="EmployeeID" header-text="Employee ID" width="80" text-align="Right"></e-column>
<e-column field="Freight" header-text="Freight" text-align="Right" width="80"></e-column>
<e-column field="ShipCity" header-text="Ship City" width="90"></e-column>
</e-columns>
</ej-grid>
<script type="text/javascript">
$("#print").ejButton({
showRoundedCorner: true,
size: "mini",
click: function () {
$("#PrintGrid").ejGrid("print");
}
});
</script>
namespace MVCSampleBrowser.Controllers
{
public class GridController : Controller
{
public IActionResult GridFeatures()
{
var DataSource = new NorthwindDataContext().OrdersViews.ToList();
ViewBag.DataSource = DataSource;
return View();
}
}
}
Grid with external button for Print
Print dialog in Chrome browser
Print visible page
By default, the grid will print all records. To print current page, you need to set the print-mode
as CurrentPage
in the e-page-settings
property.
<ej-grid id="FlatGrid" allow-paging="true" datasource="ViewBag.DataSource">
<e-toolbar-settings show-toolbar="true" toolbar-items='@new List<string> {"printGrid"}'/>
<e-page-settings print-mode="CurrentPage"></e-page-settings>
<e-columns>
<e-column field="OrderID" header-text="Order ID" width="75" text-align="Right"></e-column>
<e-column field="CustomerID" header-text="CustomerID" width="90"></e-column>
<e-column field="EmployeeID" header-text="Employee ID" width="80" text-align="Right"></e-column>
<e-column field="Freight" header-text="Freight" text-align="Right" width="80"></e-column>
<e-column field="ShipCity" header-text="Ship City" width="90"></e-column>
</e-columns>
</ej-grid>
namespace MVCSampleBrowser.Controllers
{
public class GridController : Controller
{
public IActionResult GridFeatures()
{
var DataSource = new NorthwindDataContext().OrdersViews.ToList();
ViewBag.DataSource = DataSource;
return View();
}
}
}