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?

  • 185
    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