Search results

Add a title to the header when using Grid print function

20 Apr 2021 / 1 minute to read

You can add your title in the header through an beforePrint event. With the help of this event you can add your title element as you want.

tagHelper
titleprint.cs
Copied to clipboard
<div id="GridParent">
    <ejs-grid id="Grid" dataSource="@ViewBag.DataSource" toolbar="@(new List<string>() { "Print" })" beforePrint="beforePrint" height="315" allowPaging="true">
        <e-grid-columns>
            <e-grid-column field="OrderID" headerText="Order ID" textAlign="Right" width="120"></e-grid-column>
            <e-grid-column field="CustomerID" headerText="Customer ID" type="string" width="120"></e-grid-column>
            <e-grid-column field="Freight" headerText="Freight" textAlign="Right" format="C2" editType="numericedit" width="120"></e-grid-column>
            <e-grid-column field="ShipCity" headerText="Ship City" width="120"></e-grid-column>
            <e-grid-column field="ShipCountry" headerText="Ship Country" width="150"></e-grid-column>
        </e-grid-columns>
    </ejs-grid>
</div>

<script>
    function beforePrint(args) {
    var div = document.createElement("Div")
        div.innerHTML = "Title here"
        div.style.textAlign = 'center';
        div.style.color = 'red';
        div.style.padding = '10px 0';
        div.style.fontSize = '25px';
        args.element.insertBefore(div, args.element.childNodes[0]);
}
</script>
Copied to clipboard
public IActionResult Index()
{
    var Order = OrderDetails.GetAllRecords();
    ViewBag.DataSource = Order;
    return View();
}