Category / Section
How to print only the current page records of the Grid?
1 min read
You can print the current page records of the Grid instead of printing the entire records of the Grid. In the toolbarClick event of the Grid, the default action of the Grid to print is prevented. You can obtain the currentElement of the Grid instance and pass it to the ej.print() method in order to process the print operation.
JS
<div id="Grid"></div>
<script type="text/javascript">
function toolbarClick(args) {
if (args.itemName == "Print") {
args.cancel = true;
var obj = $("#Grid").ejGrid("instance");
var ele = obj.element.clone();//Obtaining the clone element.
$(ele.find("#" + this._id + "_toolbarItems")).remove();//Before requesting to print, the toolbar item is removed from the clone element and then passed
ej.print(ele); //passing the clone element to the print method
}
}
$(function () {
$("#Grid").ejGrid({
// the datasource "window.gridData" is referred from jsondata.min.js
dataSource: window.gridData,
allowPaging: true,
toolbarSettings:{showToolbar:true,toolbarItems: [ej.Grid.ToolBarItems.PrintGrid]},
enableHeaderHover: true,
columns: [
{ field: "OrderID", isPrimaryKey: true, headerText: "Order ID", textAlign: ej.TextAlign.Right, width: 75 },
{ field: "CustomerID", headerText: "Customer ID", width: 90 },
{ field: "EmployeeID", headerText: "Employee ID", textAlign: ej.TextAlign.Right, width: 80 },
{ field: "Freight", headerText: "Freight", textAlign: ej.TextAlign.Right, width: 80 },
{ field: "ShipCity", headerText: "Ship City", width: 90 },
{ field: "Verified", headerText: "Verified", width: 90 }
]
});
});
</script>
MVC
@(Html.EJ().Grid<object>("Grid")
.Datasource(((IEnumerable<object>)ViewBag.datasource))
.ToolbarSettings(toolbar =>
{
toolbar.ShowToolbar().ToolbarItems(items =>
{
items.AddTool(ToolBarItems.PrintGrid);
});
})
.AllowPaging()
.Columns(col =>
{
col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).TextAlign(TextAlign.Right).Add();
col.Field("CustomerID").HeaderText("Customer ID").Add();
col.Field("EmployeeID").HeaderText("Employee ID").TextAlign(TextAlign.Right).Add();
col.Field("Freight").Format("{0:c}").Add();
col.Field("OrderDate").Format("{0:MM/dd/yyyy}").Add();
col.Field("ShipCity").Add();
col.Field("ShipCountry").HeaderText("Ship Country").Add();
})
.ClientSideEvents(eve=>eve.ToolbarClick("toolbarClick"))
)
ASP.NET
<ej:Grid ID="OrdersGrid" runat="server" AllowPaging="True">
<ClientSideEvents ToolbarClick="toolbarClick" />
<ToolbarSettings ShowToolbar="true" ToolbarItems="printGrid"></ToolbarSettings>
<Columns>
<ej:Column Field="OrderID" HeaderText="Order ID" IsPrimaryKey="True" />
<ej:Column Field="CustomerID" HeaderText="Customer ID" />
<ej:Column Field="EmployeeID" HeaderText="Employee ID" CssClass="orientationcss" />
<ej:Column Field="Freight" HeaderText="Freight" Format="{0:C}" />
<ej:Column Field="OrderDate" HeaderText="Order Date" Format="{0:MM/dd/yyyy}"/>
<ej:Column Field="ShipCountry" HeaderText="Ship Country" />
<ej:Column Field="ShipCity" HeaderText="Ship City" />
</Columns>
</ej:Grid>
Screenshot:
The printed sheet will have only the data corresponding to grid current page as in the below screenshot
