How to show grid header in all pages while printing

4 mins read

This Knowledge Base explains the way, to show the grid column header in all pages while printing the grid.

We can achieve this by using beforePrint event of Grid. The beforePrint event triggers every time before grid starts showing print window.

HTML

   <div id="Grid"></div>

<script type="text/javascript">
    $(function () {
        $("#Grid").ejGrid({
            dataSource: window.gridData,
            allowPaging: true,
            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 },
                     { field: "ShipCity", headerText: "Ship City", width: 90 }
            ],
            beforePrint: "beforeprint"
        });
    });
    </script>

RAZOR

@(Html.EJ().Grid<object>("Grid")
        .Datasource((IEnumerable<object>)ViewBag.datasource)
        .AllowPaging()
        .ToolbarSettings(toolbar => { toolbar.ShowToolbar().ToolbarItems(items => {items.AddTool(ToolBarItems.PrintGrid); }); })
         .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").Width(80).Add();
                   col.Field("ShipCity").HeaderText("ShipCity").Width(90).Add();
                })
         .ClientSideEvents(eve => { eve.BeforePrint("beforeprint"); })
)

namespace Sample.Controllers
{
    public class GridController : Controller
    {
        public ActionResult GridFeatures()
        {
            ViewBag.datasource = new NorthwindDataContext().OrdersViews.ToList();
            return View();
        }
    }
}

ASPX

<ej:Grid ID="Grid" runat="server" AllowPaging="True">
    <toolbarsettings showtoolbar="True" toolbaritems="printGrid"></toolbarsettings>
    <columns>
        <ej:column field="OrderID" headertext="Order ID" width=”75"></ej:column>
        <ej:column field="CustomerID" headertext="CustomerID" textalign="Left"></ej:column>
        <ej:column field="EmployeeID" headertext="EmployeeID" width="80"></ej:column>
        <ej:column field="ShipCity" headertext="ShipCity" width="90"></ej:column>
    </columns>
    <clientsideevents beforeprint="beforeprint" />
</ej:Grid>

The grid header can be printed for all pages using ej.print method by inserting the grid header element before the grid content body in the beforePrint event function.

<script type="text/javascript">
    function beforeprint(args) {
        var head = args.element.find(".e-gridheader thead");
        head.insertBefore(args.element.find(".e-gridcontent table tbody")); //Inserting the header elements before the grid content body
        ej.print(args.element);     //using external print method printing the grid
    }
    </script>

$C:\Users\Manisankar.durai\Videos\1.png$