How to Print Only Selected Records in Grid of JavaScript?

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:

Figure 1: Grid with the selected records

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

Conclusion

I hope you enjoyed learning about how to print only selected records in Grid of JavaScript.

You can refer to our JavaScript Grid page to know about its other groundbreaking feature representations. You can also explore our JavaScript DataGrid Documentation to understand how to manipulate data.

For current customers you can check out on our JavaScript components from the License and Download page. If you are new to Syncfusion, you can try our 30-day free trial to check out our JavaScript DataGrid and other JavaScript components.

If you have any queries or require clarifications, please let us know in the comment section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!