Category / Section
How to hide certain columns only when printing the Grid?
1 min read
This knowledge base document explains about how to hide certain columns only when print the JavaScript Grid.
Solution
We can achieve this by using actionBegin and actionComplete event of Grid. In actionBegin event we can hide the certain columns only when print the Grid, and in actionComplete event again we can show the hided column in grid after print the grid.
- Render the Grid with print icon in the Grid toolbar
HTML
<div id="Grid"></div>
JS
<script type="text/javascript">
$(function () {
$("#Grid").ejGrid({
// the datasource "window.gridData" is referred from jsondata.min.js
dataSource: window.gridData,
allowPaging: true,
actionBegin: "actionBegin",
actionComplete: "actionComplete",
toolbarSettings: { showToolbar: true, toolbarItems: [ej.Grid.ToolBarItems.PrintGrid] },
columns: [
{ field: "OrderID", 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, format:"{0:C}" },
{ field: "ShipCity", headerText: "Ship City", width: 90 },
{ field: "Verified", headerText: "Verified", width: 90 }
]
});
});
MVC
@(Html.EJ().Grid<OrdersView>("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").TextAlign(TextAlign.Right).Width(75).Add();
col.Field("CustomerID").HeaderText("Customer ID").Width(90).Add();
col.Field("EmployeeID").HeaderText("Employee ID").TextAlign(TextAlign.Right).Width(80).Add(); col.Field("Freight").HeaderText("Freight").TextAlign(TextAlign.Right).Width(80).Format("{0:C}").Add();
col.Field("ShipCity").HeaderText("Ship City").Width(90).Add();
col.Field("Verified").HeaderText("Verified").Width(90).Add();
})
.ClientSideEvents(eve=>eve.ActionBegin("actionBegin").ActionComplete("actionComplete")))
public class GridController : Controller
{
public ActionResult GridFeatures()
{
var DataSource = new NorthwindDataContext().OrdersViews.ToList();
ViewBag. datasource = DataSource;
return View();
}
}
ASP
<div>
<ej:Grid ID="Grid" runat="server" AllowSorting="True" AllowPaging="True">
<ToolbarSettings ShowToolbar="true" ToolbarItems="printGrid"></ToolbarSettings>
<ClientSideEvents ActionComplete="actionComplete" ActionBegin="actionBegin" />
<Columns>
<ej:Column Field="OrderID" HeaderText="Order ID" TextAlign="Right" Width="75" />
<ej:Column Field="CustomerID" HeaderText="Customer ID" Width="90" />
<ej:Column Field="EmployeeID" HeaderText="Employee ID" TextAlign="Right" Width="80" />
<ej:Column Field="Freight" HeaderText="Freight" TextAlign="Right" Width="80" Format="{0:C}" />
<ej:Column Field="ShipCity" HeaderText="Ship City Width="90”/>
<ej:Column Field="Verified" HeaderText="Verified" Width="90" />
</Columns>
</ej:Grid>
</div>
public partial class GridFeatures : System.Web.UI.Page
{
List<Orders> order = new List<Orders>();
protected void Page_Load(object sender, EventArgs e)
{
BindDataSource();
}
private void BindDataSource()
{
int orderId = 10643;
int empId = 0;
for (int i = 1; i < 9; i++)
{
order.Add(new Orders(orderId + 1, "VINET", empId + 1, 32.38, "Alfreds Futterkiste ", true));
order.Add(new Orders(orderId + 2, "TOMSP", empId + 2, 11.61, "Ana Trujillo Emparedados y helados", false));
order.Add(new Orders(orderId + 3, "HANAR", empId + 3, 45.34, "Antonio Moreno Taquería", true));
order.Add(new Orders(orderId + 4, "VICTE", empId + 4, 37.28, "Around the Horn", false));
order.Add(new Orders(orderId + 5, "SUPRD", empId + 5, 67.00, "Berglunds snabbköp", false));
order.Add(new Orders(orderId + 6, "BLONP", empId + 6, 23.32, "Blondel père et fils", true));
orderId += 6;
empId += 6;
}
this.Grid.DataSource = order;
this.Grid.DataBind();
}
ASP CORE
<ej-grid id="Grid" allow-paging="true" datasource="ViewBag.datasource" action-begin="actionBegin" action-complete="actionComplete">
<e-toolbar-settings show-toolbar="true" toolbar-items="@(new List<string> { "printGrid" })" />
<e-columns>
<e-column field="OrderID" header-text="Order ID" text-align="Right" width="75" is-primary-key="true"></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” format="{0:C}" width="80" ></e-column>
<e-column field="ShipCity" header-text="Ship City" width="90" ></e-column>
<e-column field="Verified" header-text="Verified" width="90" ></e-column>
</e-columns>
</ej-grid>
public class HomeController : Controller
{
private readonly NORTHWNDContext _context;
public HomeController(NORTHWNDContext context)
{
_context = context;
}
public ActionResult Index()
{
ViewBag.datasource = _context.Orders.ToList();
return View();
}
}
ANGULAR
<ej-grid #Grid [allowPaging]="true" [dataSource]="gridData" [toolbarSettings.showToolbar]="true" [toolbarSettings.toolbarItems]="tools" (actionBegin)="actionBegin($event)" (actionComplete)="actionComplete($event)" >
<e-columns>
<e-column field="OrderID" headerText="OrderID" textAlign="Right" width="75"></e-column>
<e-column field="CustomerID" headerText="CustomerID width="80"></e-column>
<e-column field="EmployeeID" headerText="Employee ID textAlign="Right" width="90" textAlign="right"></e-column>
<e-column field="Freight" headerText="Freight" width="80" textAlign="Right" format=”{0:C}”></e-column>
<e-column field="ShipCity" headerText="Ship City" width="90" format= ”{0:C}”></e-column>
<e-column field="Verified" headerText="Verified" width="90"></e-column>
</e-columns>
</ej-grid>
TS
actionBegin(e:any){
if (e.requestType == "print")
e.model.columns[0].visible = false;
}
actionComplete(e:any){
if (e.requestType == "print")
e.model.columns[0].visible = true;
}
- In the actionBegin event of the Gird, hide the particular column by defining visible property of the column as false when the requestType is print
function actionBegin(args) {
if (args.requestType == "print") {
this.model.columns[0].visible = false;
}
}
- Similarly in the actionComplete event set the visible property as true for the column which has been hided in the actionBegin event when requestType is print to display the column in Grid.
function actionComplete(args) {
if (args.requestType == "print") {
var inst = $("#Grid").ejGrid("instance")
inst.model.columns[0].visible = true;
}
}
RESULT: The following output will be the result of the above code example
Figure1. Columns displayed in the Grid.
Figure2. Number of columns visible in the Print preview window
Conclusion
I hope you enjoyed learning how to hide certain columns only when printing the Grid.
You can refer to our JavaScript DataGrid feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our JavaScript DataGrid example to understand how to create and manipulate data.
For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
