Forums Ignite UI for jQuery
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
Ankur Shah
455
IgGrid printing
posted

Hi 

I have one question regarding IgGrid I need to print header on every page break. How can we achieve this?

Parents
No Data
Reply
  • 485
    Offline posted

    Hello, Ankur

    By default every browser prints the THEAD DOM element on top of every page.

    What might be causing the issue are the different “features”, as well as “height” you probably have during initialization. If you remove all of them the problem would disappear.

    It is a good idea to have a completely separate grid (maybe even on a different page), just for printing purposes – one with minimal styling and with no attributes specified. Like this example :

    <!DOCTYPE html>
<html>
<head>
    <title></title>
    <script src="https://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.8.3.js"></script>
    <script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="https://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
    <script src="https://cdn-na.infragistics.com/igniteui/2017.2/latest/js/infragistics.core.js"></script>
    <script src="https://cdn-na.infragistics.com/igniteui/2017.2/latest/js/infragistics.lob.js"></script>
    <script src="https://igniteui.github.io/help-samples/data-files/adventureworks.min.js"></script>
    <link href="https://cdn-na.infragistics.com/igniteui/2017.2/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet">
    <link href="https://cdn-na.infragistics.com/igniteui/2017.2/latest/css/structure/infragistics.css" rel="stylesheet">
</head>
<body>
    <table id="grid"></table>
    <script>
        $(function () {
            $("#grid").igGrid({
                columns: [
                    { headerText: "Product ID", key: "ProductID", dataType: "number", width: "15%" },
                    { headerText: "Product Name", key: "Name", dataType: "string", width: "40%" },
                    { headerText: "Product Number", key: "ProductNumber", dataType: "string", width: "30%" },
                    { headerText: "Make Flag", key: "MakeFlag", dataType: "bool", width: "15%" }
                ],
                dataSource: adventureWorks,
            });
        });
    </script>
</body>
</html>

    Hope this solves your problem.

    If you need any additional assistance with this case feel free to contact me.

     

    Best Regards,

    Vasil Pavlov

    Associate Software Developer

    Infragistics, Inc.

    www.infragistics.com/support

Children
No Data