HelpBot Assistant

How can I help you?

Print in Angular Grid Component

19 Mar 202624 minutes to read

The printing feature in Syncfusion® Angular Grid generates a printable representation of the grid for offline access or documentation. Enable printing via the grid’s toolbar or by calling the print method.

Enable printing in the grid by configuring the toolbar property and adding Print to the list of toolbar items. This displays a Print button on the grid toolbar, and clicking it triggers the grid’s printing functionality.

import { data } from './datasource';
import { Component, OnInit } from '@angular/core';
import { GridModule, ToolbarItems, ToolbarService } from '@syncfusion/ej2-angular-grids';

@Component({
    imports: [ GridModule ],
    providers: [ToolbarService],
    standalone: true,
    selector: 'app-root',
    template: `<ejs-grid [dataSource]='data' [toolbar]='toolbarOptions' height='272px'>
                <e-columns>
                    <e-column field='OrderID' headerText='Order ID' textAlign='Right' width=120></e-column>
                    <e-column field='CustomerID' headerText='Customer ID' width=150></e-column>
                    <e-column field='ShipCity' headerText='Ship City' width=150></e-column>
                    <e-column field='ShipName' headerText='Ship Name' width=150></e-column>
                </e-columns>
                </ejs-grid>`
})
export class AppComponent implements OnInit {

    public data?: object[];
    public toolbarOptions?: ToolbarItems[];

    ngOnInit(): void {
        this.data = data;
        this.toolbarOptions = ['Print'];
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Page setup

Some print options (layout, paper size, margins) cannot be set via JavaScript; use the browser’s print or page setup dialog instead. Below are links to page setup and printing guides for the most common browsers.

The Grid’s content can be printed using an external button by calling the print method. This method triggers printing programmatically.

import { data } from './datasource';
import { Component, OnInit, ViewChild } from '@angular/core';
import { ButtonModule } from '@syncfusion/ej2-angular-buttons';
import { GridComponent, GridModule, PageService } from '@syncfusion/ej2-angular-grids';

@Component({
    imports: [ GridModule,  ButtonModule],
    providers: [PageService],
    standalone: true,
    selector: 'app-root',
    template: `<button ejs-button cssClass='e-primary' id='print' (click)='print()'>Print</button>
        <ejs-grid #grid [dataSource]='data' height='280px'>
            <e-columns>
                <e-column field='OrderID' headerText='Order ID' textAlign='Right' width=120></e-column>
                <e-column field='CustomerID' headerText='Customer ID' width=150></e-column>
                <e-column field='ShipCity' headerText='Ship City' width=150></e-column>
                <e-column field='ShipName' headerText='Ship Name' width=150></e-column>
            </e-columns>
        </ejs-grid>`
})
export class AppComponent implements OnInit {

    public data?: object[];

    @ViewChild('grid') public gridObj?: GridComponent;

    ngOnInit(): void {
        this.data = data;
    }

    print() {
        (this.gridObj as GridComponent).print();
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Print visible page

By default, the Syncfusion® Angular Grid prints all pages. Use the printMode property to control what is printed. To print only the current visible page, set printMode to CurrentPage.

import { data } from './datasource';
import { Component, OnInit } from '@angular/core';
import { ChangeEventArgs, DropDownListAllModule } from '@syncfusion/ej2-angular-dropdowns';
import { GridModule, PageService, PageSettingsModel, ToolbarItems, ToolbarService } from '@syncfusion/ej2-angular-grids';

type PrintMode = 'AllPages' | 'CurrentPage';

@Component({
    imports: [ GridModule, DropDownListAllModule],
    providers: [ToolbarService, PageService],
    standalone: true,
    selector: 'app-root',
    template: `
    <div style="display:flex;">
        <label style="padding: 10px 10px 26px 0">Select Print Mode </label>
        <ejs-dropdownlist style="margin-top:5px" id="value" #dropdown index="0" width="120" [fields]="{ text: 'text', value: 'value' }" [dataSource]="dropdownlist" (change)="onChange($event)"></ejs-dropdownlist></div>
    <ejs-grid [dataSource]='data' [printMode]='printMode' [allowPaging]='true' [pageSettings]='pageOptions' [toolbar]='toolbarOptions'>
        <e-columns>
            <e-column field='OrderID' headerText='Order ID' textAlign='Right' width=120></e-column>
            <e-column field='CustomerID' headerText='Customer ID' width=150></e-column>
            <e-column field='ShipCity' headerText='Ship City' width=150></e-column>
            <e-column field='ShipName' headerText='Ship Name' width=150></e-column>
        </e-columns>
    </ejs-grid>`
})
export class AppComponent implements OnInit {

    public data?: object[];
    public toolbarOptions?: ToolbarItems[];
    public pageOptions?: PageSettingsModel;
    public printMode: string = 'CurrentPage';
    public dropdownlist: Array<{ text: string; value: PrintMode }> = [
        { text: 'All Pages', value: 'AllPages' },
        { text: 'Current Page', value: 'CurrentPage' },
    ];

    ngOnInit(): void {
        this.data = data;
        this.toolbarOptions = ['Print'];
        this.pageOptions = { pageSize: 6 };
    }
    onChange(args: ChangeEventArgs): void {
        this.printMode = args.value as PrintMode;
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

By default, the Syncfusion® Angular Grid prints all data bound to its dataSource. In scenarios where only selected records should be printed, bind to the beforePrint event and replace the rows of the printing grid with the selected rows.

import { data } from './datasource';
import { Component, OnInit, ViewChild } from '@angular/core';
import { GridComponent, GridModule, PageService, PageSettingsModel, PrintEventArgs, SelectionSettingsModel, ToolbarItems, ToolbarService } from '@syncfusion/ej2-angular-grids';
import { createElement } from '@syncfusion/ej2-base';

@Component({
    imports: [ GridModule],
    providers: [ToolbarService, PageService],
    standalone: true,
    selector: 'app-root',
    template: `<ejs-grid #grid id='grid' [dataSource]='data' [allowPaging]='true'
               [pageSettings]='pageOptions' [selectionSettings]="selectionSettings" (beforePrint)='beforePrint($event)' [toolbar]='toolbarOptions'>
                <e-columns>
                    <e-column field='OrderID' headerText='Order ID' textAlign='Right' width=120></e-column>
                    <e-column field='CustomerID' headerText='Customer ID' width=150></e-column>
                    <e-column field='ShipCity' headerText='Ship City' width=150></e-column>
                    <e-column field='ShipName' headerText='Ship Name' width=150></e-column>
                </e-columns>
                </ejs-grid>`
})
export class AppComponent implements OnInit {

    @ViewChild('grid', { static: true })
    public grid?: GridComponent;
    public data?: object[];
    public toolbarOptions?: ToolbarItems[];
    public pageOptions?: PageSettingsModel;
    public selectionSettings?: SelectionSettingsModel;

    ngOnInit(): void {
        this.data = data;
        this.toolbarOptions = ['Print'];
        this.pageOptions = { pageSize: 6 };
        this.selectionSettings = { type: 'Multiple' }
    }
    beforePrint(e: PrintEventArgs): void {
        var rows = (this.grid as GridComponent).getSelectedRows();
        if (rows.length) {
            (e.element as CustomElement).ej2_instances[0].getContent().querySelector('tbody').remove();
            var tbody = createElement('tbody');
            rows = [...rows];
            for (var r = 0; r < rows.length; r++) {
                tbody.appendChild(rows[r].cloneNode(true));
            }
            (e.element as CustomElement).ej2_instances[0].getContentTable().appendChild(tbody);
        }
    }
}
interface CustomElement extends Element {
    ej2_instances: any[];
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

The Syncfusion® Angular Grid supports printing hierarchy grids (a parent grid and its child grids). By default, printing includes the parent grid and expanded child grids only. The print behavior can be customized using the hierarchyPrintMode property.

The hierarchyPrintMode property in the Angular Grid controls printing behavior for hierarchy grids. Options:

Mode Behavior
Expanded Prints the parent grid with expanded child grids.
All Prints the parent grid with all the child grids, whether expanded or collapsed.
None Prints the parent grid alone. 
import { data, employeeData } from './datasource';
import { Component, OnInit, ViewChild } from '@angular/core';
import { ChangeEventArgs, DropDownListAllModule } from '@syncfusion/ej2-angular-dropdowns';
import { DetailRowService, GridComponent, GridModel, GridModule, ToolbarService } from '@syncfusion/ej2-angular-grids';

@Component({
    imports: [ GridModule,DropDownListAllModule],
    providers: [DetailRowService,ToolbarService],
    standalone: true,
    selector: 'app-root',
    template: `<div class='container'><h4>Select Mode</h4>
        <ejs-dropdownlist style="margin: 14px; width:250px; "  #sample [dataSource]='dropdownData' (change)='onModeChange($event)' popupHeight='220px'></ejs-dropdownlist></div>
        <ejs-grid #grid [dataSource]='parentData' height='230px' [childGrid]='childGrid' [toolbar]='["Print"]' [hierarchyPrintMode]='hierarchyPrintMode'>
            <e-columns>
                <e-column field='EmployeeID' headerText='Employee ID' textAlign='Right' width=120></e-column>
                <e-column field='FirstName' headerText='FirstName' width=150></e-column>
                <e-column field='LastName' headerText='Last Name' width=150></e-column>
                <e-column field='City' headerText='City' width=150></e-column>
            </e-columns>
        </ejs-grid>
                `
    })
export class AppComponent implements OnInit {

    public parentData?: object[];
    public dropdownData?: string[] = ['All', 'Expanded', 'None'];
    public hierarchyPrintMode: string = 'All';
    public childGrid: GridModel = {
        dataSource: data,
        queryString: 'EmployeeID',
        columns: [
            { field: 'OrderID', headerText: 'Order ID', textAlign: 'Right', width: 120 },
            { field: 'CustomerID', headerText: 'Customer ID', width: 150 },
            { field: 'ShipCity', headerText: 'Ship City', width: 150 },
            { field: 'ShipName', headerText: 'Ship Name', width: 150 }
        ],
    };
    @ViewChild('grid')
    public grid?: GridComponent;

    ngOnInit(): void {
        this.parentData = employeeData;
    }
    onModeChange(args: ChangeEventArgs): void {
        this.hierarchyPrintMode = args.value as string;
    }

}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

The Syncfusion® Angular Grid provides the option to visualize details of a record in another grid in a master-detail manner. By default, printing a master-detail grid includes only the master grid. The print output can be modified to include both master and detail grids using the beforePrint event.

The beforePrint event fires before printing. Handling this event and adding the detail grid to the element argument ensures both master and detail grids appear in the print output.

import { customerData, data } from './datasource';
import { Component, OnInit, ViewChild } from '@angular/core';
import { GridComponent, GridModule, PrintEventArgs, RowSelectEventArgs, ToolbarItems, ToolbarService } from '@syncfusion/ej2-angular-grids';

@Component({
    imports: [ GridModule ],
    providers: [ToolbarService],
    standalone: true,
    selector: 'app-root',
    template: `<ejs-grid #mastergrid id="mastergrid" [dataSource]='masterdata' [selectedRowIndex]="1" [toolbar]='toolbar' (rowSelected)="onRowSelected($event)" (beforePrint)="beforePrint($event)">
        <e-columns>
            <e-column field='ContactName' headerText='Customer Name' width='150'></e-column>
            <e-column field='CompanyName' headerText='Company Name' width='150'></e-column>
            <e-column field='Address' headerText='Address' width='150'></e-column>
            <e-column field='Country' headerText='Country' width='130'></e-column>
        </e-columns>
    </ejs-grid>

    <div class='e-statustext' style="margin:8px">Showing orders of Customer: <b id="key"></b></div>
    
    <ejs-grid #detailgrid id="detailgrid" [dataSource]='data' [allowSelection]='false'>
        <e-columns>
            <e-column field='OrderID' headerText='Order ID' width='100'></e-column>
            <e-column field='Freight' headerText='Freight' format='C2' width='100' type='number'></e-column>
            <e-column field='ShipName' headerText="Ship Name" width='150'></e-column>
            <e-column field='ShipCountry' headerText="Ship Country" width='150'></e-column>
            <e-column field='ShipAddress' headerText="Ship Address" width='150'></e-column>
        </e-columns>
    </ejs-grid>`
})
export class AppComponent implements OnInit {

    public names?: string[] = ['AROUT', 'BERGS', 'BLONP', 'CHOPS', 'ERNSH'];
    public toolbar?: ToolbarItems[];

    @ViewChild('mastergrid') public mastergrid?: GridComponent;
    @ViewChild('detailgrid') public detailgrid?: GridComponent;

    public masterdata?: Object[];

    public data: object[] = data;

    ngOnInit(): void {
        this.masterdata = customerData.filter((e: object) => (this.names as string[]).indexOf((e as ItemType).CustomerID) !== -1);

        this.toolbar = ['Print'];
    }
    public onRowSelected(args: RowSelectEventArgs): void {
        let selectedRecord: object = args.data as object;
        (this.detailgrid as GridComponent).dataSource = data.filter((record: object) => (record as ItemType).CustomerName === (selectedRecord as ItemType).ContactName).slice(0, 5);
        (document.getElementById('key') as Element).innerHTML = (selectedRecord as ItemType).ContactName;
    }
    public beforePrint(args: PrintEventArgs): void {
        let customElement = document.createElement('div');
        customElement.innerHTML = document.getElementsByClassName('e-statustext')[0].innerHTML + (this.detailgrid as GridComponent).element.innerHTML;
        customElement.appendChild(document.createElement('br'));
        (args.element as Element).append(customElement);
    }
}
interface ItemType{
    CustomerName:string,
    CustomerID:string,
    ContactName:string
  }
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

When printing a grid with a large number of columns, the browser’s default page size (usually A4) might not be sufficient to display all the columns properly. As a result, the browser’s print preview may automatically hide the overflowed content, leading to a cut-off appearance.

For wide grids, adjust the print scale in the browser’s print dialog to fits content within the printable area.

Scale Option Setting

Show or hide columns during printing

The Syncfusion® Angular Grid provides control over column visibility during printing. Columns can be shown or hidden dynamically using the toolbarClick and printComplete events. This allows tailoring of the printed grid output.

In the toolbarClick event, columns can be shown or hidden by setting the visible property to true or false respectively.

The printComplete event resets column visibility to the original configuration.

The following example demonstrates showing a hidden column (Customer ID) and hiding a visible column (Ship City) during printing, then restoring their visibility once printing is complete:

import { data } from './datasource';
import { Component, OnInit, ViewChild } from '@angular/core';
import { Column, GridComponent, GridModule, PageService, PageSettingsModel, ToolbarItems, ToolbarService } from '@syncfusion/ej2-angular-grids';
import { ClickEventArgs } from '@syncfusion/ej2-navigations';

@Component({
    imports: [ GridModule ],
    providers: [ToolbarService, PageService],
    standalone: true,
    selector: 'app-root',
    template: `<ejs-grid #grid id='Grid' [dataSource]='data' (toolbarClick)='toolbarClick($event)' (printComplete)='printComplete()'
                [allowPaging]='true' [pageSettings]='pageOptions' [toolbar]='toolbarOptions'>
                <e-columns>
                    <e-column field='OrderID' headerText='Order ID' textAlign='Right' width=120></e-column>
                    <e-column field='CustomerID' headerText='Customer ID' [visible]= 'false' width=150></e-column>
                    <e-column field='ShipCity' headerText='Ship City' width=150></e-column>
                    <e-column field='ShipName' headerText='Ship Name' width=150></e-column>
                </e-columns>
                </ejs-grid>`
})
export class AppComponent implements OnInit {

    public data?: object[];
    public toolbarOptions?: ToolbarItems[];
    public pageOptions?: PageSettingsModel;
    @ViewChild('grid')
    public grid?: GridComponent;
    toolbarClick(args:ClickEventArgs) {
        if(args.item.id== 'Grid_print'){
            for (const columns of (this.grid as GridComponent).columns) {
                if ((columns as Column).field === 'CustomerID') {
                    (columns as Column).visible = true;
                } else if ((columns as Column).field === 'ShipCity') {
                    (columns as Column).visible = false;
                }
            }
        }
    }

    printComplete() {
        for (const columns of (this.grid as GridComponent).columns) {
            if ((columns as Column).field === 'CustomerID') {
                (columns as Column).visible = false;
            } else if ((columns as Column).field === 'ShipCity') {
                (columns as Column).visible = true;
            }
        }
    }

    ngOnInit(): void {
        this.data = data;
        this.toolbarOptions = ['Print'];
        this.pageOptions = { pageSize: 6 };
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Add title to print header

Add a title to the printed header by utilizing the beforePrint event. This event allows customization of the print layout, including adding a title element to make the printed document informative and visually appealing.

Example: adding a title to the grid print output:

import { data } from './datasource';
import { Component, OnInit } from '@angular/core';
import { GridModule, PrintEventArgs, ToolbarItems, ToolbarService } from '@syncfusion/ej2-angular-grids';

@Component({
    imports: [ GridModule],
    providers: [ToolbarService],
    standalone: true,
    selector: 'app-root',
    template: `<ejs-grid [dataSource]='data' [toolbar]='toolbarOptions' height='272px' (beforePrint)="beforePrint($event)">
                <e-columns>
                    <e-column field='OrderID' headerText='Order ID' textAlign='Right' width=120></e-column>
                    <e-column field='CustomerID' headerText='Customer ID' width=150></e-column>
                    <e-column field='ShipCity' headerText='Ship City' width=150></e-column>
                    <e-column field='ShipName' headerText='Ship Name' width=150></e-column>
                </e-columns>
                </ejs-grid>`
})
export class AppComponent implements OnInit {

    public data?: object[];
    public toolbarOptions?: ToolbarItems[];

    ngOnInit(): void {
        this.data = data;
        this.toolbarOptions = ['Print'];
    }
    beforePrint(args:PrintEventArgs){
        var div = document.createElement("Div")
            div.innerHTML = "Title here"
            div.style.textAlign = 'center';
            div.style.color = 'red';
            div.style.padding = '10px 0';
            div.style.fontSize = '25px';
            (args.element as HTMLElement).insertBefore(div, (args.element as HTMLElement).childNodes[0]);
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Optimized approaches for printing full data sets

Printing very large datasets can cause browser performance issues because rendering many DOM elements may slow or hang the browser. The Grid supports virtualization for interactive viewing, but virtualization (rows and columns) is not supported for printing. If all data must be printed, export to Excel, CSV, or PDF and print the exported file with a desktop application.

Retain grid styles while printing

The Syncfusion® Angular Grid provides a beforePrint event that enables customization of the grid’s appearance and styles before printing. Handling this event ensures the grid retains its styles and appearance in the printed output.

import { data } from './datasource';
import { Component, NgModule, OnInit, ViewChild } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { GridComponent, GridModule, PageService, PageSettingsModel, ToolbarItems, ToolbarService } from '@syncfusion/ej2-angular-grids';

@Component({
imports: [ GridModule],
providers: [ToolbarService, PageService],
standalone: true,
    selector: 'app-root',
    template: `<ejs-grid #grid [dataSource]='data' (beforePrint)='beforePrint()'
                [allowPaging]='true' [pageSettings]='pageOptions' [toolbar]='toolbarOptions'>
                <e-columns>
                    <e-column field='OrderID' headerText='Order ID' textAlign='Right' width=120></e-column>
                    <e-column field='CustomerID' headerText='Customer ID' width=150></e-column>
                    <e-column field='ShipCity' headerText='Ship City' width=150></e-column>
                    <e-column field='ShipName' headerText='Ship Name' width=150></e-column>
                </e-columns>
                </ejs-grid>`,
    styleUrls: ['app.component.css'],
})
export class AppComponent implements OnInit {

    public data?: object[];
    public toolbarOptions?: ToolbarItems[];
    public pageOptions?: PageSettingsModel;
    @ViewChild('grid')
    public grid?: GridComponent;

    ngOnInit(): void {
        this.data = data;
        this.toolbarOptions = ['Print'];
        this.pageOptions = { pageSize: 6 };
    }
    beforePrint() {
        var styleElement = document.createElement('style');
        styleElement.innerHTML = `
        .e-grid .e-headercell {
            background: #24a0ed !important;
        }
        .e-grid .e-row .e-rowcell {
            background: #cbecff !important;
        }
        .e-grid .e-altrow .e-rowcell{
            background: #e7d7f7 !important;
        }
        `;
        (document.querySelector('head') as Element).appendChild(styleElement);
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

To print the Syncfusion® Angular Grid together with other components (for example, a Chart), use the beforePrint event to append cloned content from those components to the print document.

import { orderData } from './datasource';
import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';
import { ButtonModule } from '@syncfusion/ej2-angular-buttons';
import { AccumulationChartModule, AccumulationDataLabelService, AccumulationTooltipService, ChartComponent, ChartModule, PieSeriesService, StepAreaSeriesService,SplineSeriesService, ChartAnnotationService, LegendService, TooltipService, StripLineService, SelectionService,ScatterSeriesService } from '@syncfusion/ej2-angular-charts';
import { ActionEventArgs, GridComponent, GridModule, PageService, PrintEventArgs } from '@syncfusion/ej2-angular-grids';
import { DataManager, Query } from '@syncfusion/ej2-data';

@Component({
    imports: [ ChartModule, AccumulationChartModule, GridModule,ButtonModule],
    providers: [ 
        LineSeriesService, 
        DateTimeService, 
        DataLabelService, 
        StackingColumnSeriesService,
        CategoryService,
        StepAreaSeriesService, 
        SplineSeriesService, 
        ChartAnnotationService, 
        LegendService, 
        TooltipService, 
        StripLineService,
        PieSeriesService, 
        AccumulationTooltipService, 
        AccumulationDataLabelService, 
        SelectionService,
        ScatterSeriesService,
        PageService],
    standalone: true,
    selector: 'app-root',
    template: `
        <button class ='printbtn' ejs-button cssClass="e-danger" (click)="onClick()"> Print </button>
        <ejs-grid #grid
            [dataSource]="data"
            [allowPaging]="true"
            [pageSettings]="pageSettings"
            printMode="CurrentPage"
            (dataBound)="dataBound()"
            (actionComplete)="actionComplete($event)"
            (beforePrint)="beforePrint($event)">
            <e-columns>
                <e-column field="OrderDate" headerText="Order Date" width="130" format="yMd" textAlign="right"></e-column>
                <e-column field="Freight" width="120" format="C2" textAlign="right"></e-column>
            </e-columns>
        </ejs-grid>
        <h4>Chart</h4>
        <div #chartContainer >
            <ejs-chart #chart id="chart-container"
                [primaryXAxis]="primaryXAxis"
                [primaryYAxis]="primaryYAxis"
                [title]="title">
                width="60%"
                <e-series-collection>
                    <e-series type="Line" xName="OrderDate" yName="Freight"  width="1" columnWidth="0.4" name="dataview" [marker]="marker"></e-series>
                </e-series-collection>
            </ejs-chart>
        </div>
    `
})
export class AppComponent implements OnInit {
    public primaryXAxis?: Object;
    public chartData?: Object[];
    public data?: Object[];
    public title?: string;
    public marker?: Object;
    public primaryYAxis?: Object;
    public pageSettings?: Object;

    @ViewChild('chart') public chart?: ChartComponent;
    @ViewChild('grid') public grid?: GridComponent;
    @ViewChild('chartContainer') public chartContainer?: ElementRef;

    ngOnInit(): void {
        this.data = new DataManager(orderData as JSON[]).executeLocal(new Query().take(100));
        this.pageSettings = { pageSize: 10 };
    }

    dataBound() {
        this.chart!.primaryXAxis = {
            valueType: 'DateTime',
        };
        this.chart!.series[0].marker = { visible: true };
        this.chart!.series[0].xName = 'OrderDate';
        this.chart!.series[0].yName = 'Freight';
        this.chart!.series[0].dataSource = (this.grid as GridComponent).getCurrentViewRecords();
    }

    onClick() {
        (this.grid as GridComponent).print();
    }
    beforePrint(args: PrintEventArgs) {
        if (this.chartContainer) {
            const clonedChartContainer = this.chartContainer.nativeElement.cloneNode(true);
            (args.element as Element).appendChild(clonedChartContainer);
        }
    }
    public actionComplete(args: ActionEventArgs): void {
        if (args.requestType === 'paging') {
            this.chart!.series[0].dataSource = (this.grid as GridComponent).getCurrentViewRecords();
            this.chart?.refresh();
        }
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));