IgGrid printing | Infragistics Forums

455

IgGrid printing

Ankur Shah posted over 6 years ago

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

485

Offline Vasil Pavlov posted over 6 years ago

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.