Getting Started

15 Nov 20175 minutes to read

This section explains briefly about how to use the Print widget on your application. It allows either printing of an entire page or specific elements alone from a page.

Including Script and CSS

To get start with Print, create a new HTML file and add the required dependent CSS as well as script files to it.

CSS file

ej.web.all.min.css – includes all the widgets styles.

External script files

jQuery 1.7.1 and later versions.
jQuery.easing.js - to support the animation effects.

Internal script files

File	Description
ej.core.min.js	Must be referred always before using all the JS controls.
ej.print.min.js	The Print source file

The above mentioned internal script files can be individually referred on an application, if the Print control alone needs to be used. If in case, other controls also needs to be used on your application - then it is necessary to make use of the ‘ej.web.all.min.js’ file which encapsulates all the ej components and frameworks in a single file.

ej.web.all.min.js – includes scripts of all widgets.

NOTE

In production, we highly recommend you to use our custom script generator to create custom script file with required controls and its dependencies only. Also to reduce the file size further, please use GZip compression in your server.

Add reference links of the CDN for the script and CSS file dependencies in the head section.

HTML

<head>
    <meta charset="utf-8" />
    <title>Getting Started - Print</title>
    <link href="http://cdn.syncfusion.com/28.1.33/js/web/flat-azure/ej.web.all.min.css" rel="stylesheet" />
    <script src="http://cdn.syncfusion.com/js/assets/external/jquery-1.10.2.min.js"></script>
    <script src="http://cdn.syncfusion.com/js/assets/external/jquery.easing.1.3.min.js"></script>
    <script src="http://cdn.syncfusion.com/js/assets/external/jquery.globalize.min.js"></script>
    <script src="http://cdn.syncfusion.com/js/assets/external/jsrender.min.js"></script>
    <script src="http://cdn.syncfusion.com/28.1.33/js/web/ej.web.all.min.js"></script>
</head>

Using Print widget

To Print a Grid control, first the grid control needs to be defined and rendered on the page properly. Refer to the following code example.

HTML

<div id="control">
        <div id="Grid"></div>
    </div>
    <script>
        $(function () {
            $("#Grid").ejGrid({
                dataSource: shipDetails
            });
        });
        var shipDetails = [
              { Name: 'Hanari Carnes', City: 'Brazil' },
              { Name: 'Split Rail Beer & Ale', City: 'USA' },
              { Name: 'Ricardo Adocicados', City: 'Brazil' }
        ];
    </script>

Keep a separate button on a page and on it’s click action, call the ejPrint function as depicted in the below code example to print the entire grid control.

HTML

<div id="control">
        <div id='Grid'></div>
        <br />
        <button class="button" id="print">Print the Grid</button>
    </div>

JAVASCRIPT

$(function () {
            $('#Grid').ejGrid({
                dataSource: shipDetails
            });
            $("#print").ejButton({
                size: "normal", width: "113px", click: "onPrintPage"
            });
        })
        var shipDetails = [
              { Name: 'Hanari Carnes', City: 'Brazil' },
              { Name: 'Split Rail Beer & Ale', City: 'USA' },
              { Name: 'Ricardo Adocicados', City: 'Brazil' }
        ];
        function onPrintPage(e) {
            var ele = $("#Grid");
            if (!ele.hasClass("e-print")) {
                $("#Grid").ejPrint();
            } else {
                obj = $("#Grid").ejPrint("instance");
                obj.print();
            }
        }