Grid printing

[Unknown]

Hello,

if there a possibility to add some additional parameters while printing data from grid?

Now, when I am trying to print grid when I have grid settings like grouping, filtering set to true, the documenting is getting print with icons in his header (I do not want to show in printed document that I can filter data in real application):

Also, when grid is large and not all columns fit in page with, in last page I can see scrollbar picture (I do not want to show in printed document scroll bar, I want to have a possibility to print all grid data (all columns with needable data)):

[Dhivya Rajendran]

Hi AC, 

Thanks for contacting Syncfusion support. 

We have analyzed your requirement and created a sample for your reference. In the below sample we have hidden the filter and group icons by using the beforePrint event. So that the icons are not displayed while printing the document. You can achieve your requirement by using the below way.  

Kindly refer to the below code example and sample for more information. 

<ejs-grid #grid [allowFiltering]='true' [toolbar]='toolbarOptions' (beforePrint)='beforePrint($event)' [allowGrouping]='true' [groupSettings]='groupOptions' [filterSettings]='filterOptions' [dataSource]='data' height='280px'> 

            <e-columns> 

                <e-column field='OrderID' headerText='Order ID'></e-column> 

                <e-column field='CustomerID' headerText='Customer ID'></e-column> 

            . . . . 

            </e-columns> 

        </ejs-grid> 

  

export class AppComponent implements OnInit { 

    beforePrint(args){ 

        args.element.querySelectorAll('.e-icon-filter').forEach((element) => { 

              element.style.display = 'none' //hide filter icon 

        }); 

        args.element.querySelectorAll('.e-icon-group').forEach((element) => { 

              element.style.display = 'none' //hide group icon 

        }); 

    } 

    

    ngOnInit(): void { 

        this.data = data; 

        this.toolbarOptions = ['Print']; 

        this.filterOptions = { type: 'Menu'}; 

        this.groupOptions = { showDropArea: false, showToggleButton: true }; 

    } 

 

Sample : https://plnkr.co/edit/YsQXZ5ZSGqXPbLLcdcD0?p=preview  

Documentation : https://ej2.syncfusion.com/angular/documentation/grid/api-grid.html#beforeprint  

Query 2: I want to have a possibility to print all grid data? 

 

We have validated your query and you can achieve your requirement by setting the browser print window layout as LandScape to show the all Grid data in printed document.  

Regards,
R.Dhivya 

[Unknown]

Hello,

removing unnecessary icons works perfectly!

Query 2:

In LandScape mode still not all columns are fit in the page. Is there a possibility to print all data, but, for example, have all columns not in one page?

I also have one more question - is there a possibility to show grid header in all pages if not all rows are in one page?

[Dhivya Rajendran]

Hi AC, 

Thanks for your update. 

Query1: is there possibility to print all data but, for example, have all columns not in one page? 

It is not feasible to break page the horizontally while printing. So we suggest you to adjust the scalability(scale) to resolve the problem.  

Query2: is there a possibility to show grid header in all pages if not all rows are in one page? 

 

We have analyzed your requirement and created a sample based on your query. In the below sample, we have shown grid header in all print pages by override the default element style in beforePrint event of grid.  

Kindly refer to the below code example and sample for more information. 

<ejs-grid [dataSource]='data' [allowPaging]=true (beforePrint)='beforePrint($event)'[toolbar]='toolbarOptions'> 

    <e-columns> 

            <e-column field='ShipCity' headerText='Ship City'></e-column> 

            <e-column field='ShipName' headerText='Ship Name'></e-column> 

            . . . . . 

    </e-columns> 

    </ejs-grid> 

export class AppComponent implements OnInit { 

 

     beforePrint(args){ 

         // override the default grid structure to print header in all pages 

        let headerelement =  document.getElementsByTagName('thead')[0].cloneNode(true); 

        args.element.querySelector('.e-gridheader').style.display = 'none' 

        args.element.querySelectorAll('.e-table')[1].prepend(headerelement); 

     } 

 

    ngOnInit(): void { 

        this.toolbarOptions = ['Print']; 

    } 

} 

<style> 

      @media print { 

        thead { 

          display: table-header-group; 

        } 

      } 

    </style> 

Sample : http://www.syncfusion.com/downloads/support/directtrac/general/ze/printheaderoneachpage-175382527  

Limitation : Solution(header on each page) does not work in chrome and safari browsers.  

Reference link : https://bugs.webkit.org/show_bug.cgi?id=17205  

Regards,
R.Dhivya