Angular - Print only ag-Grid data

Question

I'm trying to use print functionality for ag-Grid in angular. My page containing content and ag-Grid data. Casually If I apply print functionality, content and grid data both coming for print. But I'm not sure how to give only ag-Grid data for printing. If any one have idea please help me. Thanks in advance.

This is the code for print functionality according to docs.

import { Component, ViewChild } from "@angular/core";
import "ag-grid-enterprise";

@Component({
  selector: "my-app",
  template: `


<button (click)="onBtPrint()">Print</button>

<h3>
    Latin Text
</h3>

<p>
    Lorem ipsum dolor sit amet, ne cum repudiare abhorreant. Atqui molestiae neglegentur ad nam, mei amet eros ea, populo deleniti scaevola et pri. Pro no ubique explicari, his reque nulla consequuntur in. His soleat doctus constituam te, sed at alterum repudiandae. Suas ludus electram te ius.
</p>

<ag-grid-angular
    #agGrid
    style="width: 600px; height: 200px;"
    id="myGrid"
    [rowData]="rowData"
    class="ag-theme-balham my-grid"
    [columnDefs]="columnDefs"
    [defaultColDef]="defaultColDef"
    [rowData]="rowData"
    [enableSorting]="true"
    [animateRows]="true"
    [toolPanelSuppressSideButtons]="true"
    [groupUseEntireRow]="true"
    (gridReady)="onGridReady($event)"
    ></ag-grid-angular>

<h3>
    More Latin Text
</h3>

<p>
    Lorem ipsum dolor sit amet, ne cum repudiare abhorreant. Atqui molestiae neglegentur ad nam, mei amet eros ea, populo deleniti scaevola et pri. Pro no ubique explicari, his reque nulla consequuntur in. His soleat doctus constituam te, sed at alterum repudiandae. Suas ludus electram te ius.
</p>
`
})
export class AppComponent {
  private gridApi;
  private gridColumnApi;
  private rowData: any[];

  private columnDefs;
  private defaultColDef;
  private rowData;

  constructor() {
    this.columnDefs = [
      {
        field: "group",
        rowGroup: true,
        hide: true
      },
      {
        field: "id",
        pinned: "left",
        width: 60
      },
      {
        field: "model",
        width: 150
      },
      {
        field: "color",
        width: 100
      },
      {
        field: "price",
        valueFormatter: '"$" + value.toLocaleString()',
        width: 100
      },
      {
        field: "year",
        width: 100
      },
      {
        field: "country",
        width: 100
      }
    ];
    this.defaultColDef = {};
    this.rowData = createRowData();
  }

  onBtPrint() {
    var gridApi = this.gridApi;
    setPrinterFriendly(gridApi);
    setTimeout(function() {
      print();
      setNormal(gridApi);
    }, 2000);
  }

  onGridReady(params) {
    this.gridApi = params.api;
    this.gridColumnApi = params.columnApi;

    params.api.expandAll();
  }
}

var models = [
  "Mercedes-AMG C63",
  "BMW M2",
  "Audi TT Roadster",
  "Mazda MX-5",
  "BMW M3",
  "Porsche 718 Boxster",
  "Porsche 718 Cayman"
];
var colors = ["Red", "Black", "Green", "White", "Blue"];
var countries = ["UK", "Spain", "France", "Ireland", "USA"];
function createRowData() {
  var rowData = [];
  for (var i = 0; i < 200; i++) {
    var item = {
      id: i + 1,
      group: "Group " + (Math.floor(i / 20) + 1),
      model: models[Math.floor(Math.random() * models.length)],
      color: colors[Math.floor(Math.random() * colors.length)],
      country: countries[Math.floor(Math.random() * countries.length)],
      year: 2018 - Math.floor(Math.random() * 20),
      price: 20000 + Math.floor(Math.random() * 100) * 100
    };
    rowData.push(item);
  }
  return rowData;
}
function setPrinterFriendly(api) {
  var eGridDiv = document.querySelector(".my-grid");
  eGridDiv.style.width = "";
  eGridDiv.style.height = "";
  api.setDomLayout("print");
}
function setNormal(api) {
  var eGridDiv = document.querySelector(".my-grid");
  eGridDiv.style.width = "600px";
  eGridDiv.style.height = "200px";
  api.setDomLayout(null);
}

Plunker link: https://plnkr.co/edit/mNPMkbNggdtRo1TMLPoT?p=preview

Here page contains grid data with content as well. Now how to send only ag-grid for print.

score 1 · Accepted Answer · answered Jan 20 '19 at 19:57

1

Your print function can be only this

function setPrinterFriendly(api) {
    api.setDomLayout("print");
}

and use this CSS:

@media print {
  body * {
    visibility: hidden;
  }
  #myGrid, #myGrid * {
    visibility: visible;
  }
  #myGrid {
    position: absolute;
    left: 0;
    top: 0;
  }
}

Source: Print <div id="printarea"></div> only?

answered Jan 20 '19 at 19:57

N.Tasikj

366
1
4

Thanks for your response. I'm getting error in console like 'ERROR TypeError: l.setDomLayout is not a function', have any idea? – Roy Jan 21 '19 at 09:01
what is "I" in "I.set..." ? You need to do it same as before api.setDomLayout("print") – N.Tasikj Jan 21 '19 at 09:06
https://plnkr.co/edit/gkruIxmxEY3XwEbJt125?p=preview I fork your plnkr, so check it. There is working version – N.Tasikj Jan 21 '19 at 09:10
Yes in plnkr it's working, but I'm trying same functionality in my project there it is giving error. here using versions "ag-grid": "^18.1.2", "ag-grid-angular": "^18.1.0", "ag-grid-enterprise": "^18.1.1", – Roy Jan 21 '19 at 09:15
1

Can't tell you what is it for sure because i don't have your code, but it's probably something with your "I", it's not proper reference for ag-grid – N.Tasikj Jan 21 '19 at 09:27

Angular - Print only ag-Grid data

1 Answers1