1. Home
  2. Forum
  3. Angular - EJ 2
  4. Print not using any styles

Print not using any styles

Hello when the grid prints there is no styles attached to the print. Is the only way to attach styles to loop through every cell of the table. Is there no way to just attach a stylesheet.


11 Replies
NS Nithya Sivaprakasam Syncfusion Team May 27, 2022 05:07 PM UTC

Hi Charles Eichelberger,


Greetings from syncfusion support.


Query:” Print not using any styles”


Before providing the solution, we need some more clarification. This will help us to validate further and provide the solution as soon as possible.


  1. Do you want to print the grid with default style or any custom style?
  2. Please share the screenshot of the Grid and Printed Grid.
  3. Please share the version of the syncfusion package.


Regards,

Nithya Sivaprakasam.


CE Charles Eichelberger May 31, 2022 03:44 PM UTC

Hello 


We would like the print view and live view of our tables to match styles. We would like to do this without having to loop through every cell to attach styling possibly by attaching a stylesheet for the print view to use. Below are examples of the live view and print views of our table. We are using version 20.1.52.


Live View 


Print View 





NS Nithya Sivaprakasam Syncfusion Team June 1, 2022 05:44 PM UTC

Hi Charles,


Currently, we are validating your query and we will update further details on June 3rd,2022. Until then, appreciate your patience.


Regards,

Nithya Sivaprakasam.


NS Nithya Sivaprakasam Syncfusion Team June 3, 2022 04:38 PM UTC

Hi Charles,


Still we are validating your query and we will update further details on June 6,2022. Until then, appreciate your patience.


Regards,

Nithya Sivaprakasam.


NS Nithya Sivaprakasam Syncfusion Team June 6, 2022 04:36 PM UTC

Hi Charles,


Sorry for the inconvenience caused.


Query: Print not using any styles


Based on this query, we would like to inform you that we do not feasible to print the grid with styles options however we suggest you export the file in PDF format with styling then you can print the grid in your custom CSS style. In the PdfQueryCellInfo event, you can customize any style in the grid. PdfQueryCellInfo triggers before exporting each cell to a PDF document. So you can apply the grid cells.


Please check the below code for reference.


Code Snippet:

[app.component.ts]

import {

  Component,

  OnInit,

  ViewChild,

  ValueProvider,

  ViewEncapsulation,

} from '@angular/core';

import { employeeDetails } from './data';

import {

  GridComponent,

  ToolbarService,

  PdfExportService,

} from '@syncfusion/ej2-angular-grids';

import { ClickEventArgs } from '@syncfusion/ej2-navigations';

 

@Component({

  selector: 'app-root',

  templateUrl: 'app.component.html',

  styleUrls: ['app.component.css'],

  encapsulation: ViewEncapsulation.None,

  providers: [ToolbarService, PdfExportService],

})

export class AppComponent {

  public data: Object[];

  public toolbar: string[];

  public pageSettings: Object;

  public isInitial: Boolean = true;

  @ViewChild('grid')

  public grid: GridComponent;

 

  public ngOnInit(): void {

    this.data = employeeDetails;

    this.toolbar = ['PdfExport'];

    this.pageSettings = { pageCount: 5 };

  }

 

  toolbarClick(args: ClickEventArgs): void {

    switch (args.item.text) {

      case 'PDF Export':

        this.grid.pdfExport();

        break;

    }

  }

 

  QueryCellInfo = (args: any) => {

    args.cell.bgColor = '#ffffb3';

  };

 

  PdfQueryCellInfo = (args: any) => {

    console.log(args);

    args.style = { backgroundColor: '#ffffb3' };

     // you can style the grid here

  };

}

 

[app.component.html]

 

<div class="col-lg-9 control-section">

  <ejs-grid

    #grid

    [dataSource]="data"

    [toolbar]="toolbar"

    (toolbarClick)="toolbarClick($event)"

    [allowPdfExport]="true"

    (pdfQueryCellInfo) = "PdfQueryCellInfo($event)"

    (queryCellInfo)="QueryCellInfo($event)"

  >

    <e-columns>

      <e-column field="FirstName" headerText="Name" width="130"></e-column>

      <e-column field="Title" headerText="Designation" width="180"></e-column>

 

      <e-column

        field="HireDate"

        headerText="Hire Date"

        width="135"

        textAlign="Right"

        format="yMd"

      ></e-column>

      <e-column field="Address" width="180" [allowGrouping]="false"></e-column>

    </e-columns>

  </ejs-grid>

</div>



We attached a sample for reference.


Sample: https://stackblitz.com/edit/angular-huthck-lq6mpk?file=app.component.html,app.component.ts

Documentation: https://ej2.syncfusion.com/angular/documentation/api/grid/#pdfquerycellinfo


Please get back to us if you need further assistance.


Regards,

Nithya Sivaprakasam.


CE Charles Eichelberger replied to Nithya Sivaprakasam June 7, 2022 02:07 PM UTC

Hi I was not talking about the pdf exporting but the regular printing


NS Nithya Sivaprakasam Syncfusion Team June 8, 2022 05:56 PM UTC

Hi Charles,


Currently, we are validating your query "Print the grid with styles" and we will update further details on or before June 10th, 2022.


We appreciate your patience until then.


Regards,

Nithya Sivaprakasam.


NS Nithya Sivaprakasam Syncfusion Team June 9, 2022 01:41 PM UTC

Hi Charles,


Thanks for your patience.


Query:” Print not using any styles in the grid”


We would like to inform you that we do not have the support to print the grid with style. However, we suggest you export the file in PDF format with styling then you can print the grid with your custom CSS. In the PdfQueryCellInfo event, you can customize any style in the grid. PdfQueryCellInfo triggers before exporting each cell to a PDF document. So you can apply the style in grid cells.


Regards,

Nithya Sivaprakasam.


DT Daniel Tam February 20, 2025 04:45 PM UTC

Hello,


Is there changes now in 2025 for the original inquery about styles directly to print without exporting to pdf first?


Thanks


Dani


DT Daniel Tam February 20, 2025 04:46 PM UTC

Hello,


Is there changes now in 2025 for the original inquery about styles directly to print without exporting to pdf first?


Thanks


Dani


DM Dineshnarasimman Muthu Syncfusion Team February 24, 2025 11:37 AM UTC

Hi Daniel,


Sorry for the inconvenience.


Based on your query, it seems that the custom styles you applied to the grid are not being reflected in the print preview. This issue often occurs because browsers do not automatically include background styles or custom styling during printing.


To resolve this, we recommend enabling the Background Graphics option from the print preview.


  1. Navigate to the More Settings or equivalent section (the exact location may vary depending on the browser).
  2. Enable the Background Graphics option.


By enabling this option, the grid styles should appear correctly in the print output.







Please get back to us for further assistance.


Regards,

Dineshnarasimman M


Loader.
Up arrow icon