We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to print only selected records in grid

Platform: JavaScript - EJ 2 |
Control: Grid

Problem discussion

Usually, Grid will print its content using the toolbar action or print method. This will print the whole data that has been bound to the Grid dataSource which is the default behavior. However, Grid provides an option to print only the selected records from the Grid. This can be done by binding the beforePrint event, where the whole rows of the Printing Grid can be replaced by the selected rows.

Initialize the Grid

Initialize the Grid with the Print tool and required number of columns. Bind the beforePrint event to the Grid.

import { createElement } from '@syncfusion/ej2-base';
import { Grid, Toolbar, PrintEventArgs, Print } from '@syncfusion/ej2-grids';
import { employeeData } from './data-source';
 
Grid.Inject(Toolbar, Print);
/**
 * Print Grid sample
 */
 
let grid: Grid = new Grid({
    dataSource: employeeData,
    allowSorting: true,
    toolbar: ['Print'],
    selectionSettings: { type: 'Multiple' },
    beforePrint: beforePrint,
    columns: [
        { field: 'EmployeeID', headerText: 'Employee ID', textAlign: 'Right', width: 125 },
        { field: 'FirstName', headerText: 'Name', width: 125 },
        { field: 'Title', headerText: 'Title', width: 180 },
        { field: 'City', headerText: 'City', width: 110 }
    ]
});
grid.appendTo('#Grid');

 

Define the event handler

Define the beforePrint event which handles the Grid’s Printing action with and without selected records. If the records were selected, it will print selected rows alone whereas the Grid without selected records, print the entire datasource.

 
let beforePrint = (e: PrintEventArgs) => {
    var rows = grid.getSelectedRows();
    if (rows.length) {
        e.element['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['ej2_instances'][0].getContentTable().appendChild(tbody);
    }
}
 

 

 

Output:

 

Grid with the selected records

Figure 1: Grid with the selected records

Printing Window of Grid

Figure 2: Printed the selected records

 

TypeScript Demo: https://stackblitz.com/edit/print-types-fpe5p7?file=index.ts

Angular Demo: https://stackblitz.com/edit/print-selected-row?file=app.component.ts

React Demo: https://stackblitz.com/edit/print-rows-selected?file=index.js

 

ADD COMMENT
You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile