How to print master detail grid

[Albert]

Would you please advice how is it possible to print master detail grid? I couldn't find any solution in Documents.

Thanks in advance

[Manivel Sellamuthu]

Hi Albert, 

Thanks for contacting us. 

Yes. You can achieve your requirement by appending the detailGrid element in beforeprint event of the masterGrid. Also We have logged a ug for this requirement and it will be included in any of the upcoming release. 

Please find the below code example and sample for more information. 

Index.js 

import { render } from 'react-dom'; 

import './index.css'; 

import * as React from 'react'; 

import { GridComponent, ColumnsDirective, ColumnDirective,Toolbar, Selection, Inject } from '@syncfusion/ej2-react-grids'; 

import { customerData, data } from './data'; 

import { SampleBase } from './sample-base'; 

export class MasterDetail extends SampleBase { 

    constructor() { 

        super(...arguments); 

        this.key = null; 

        this.detail = []; 

        this.names = ['AROUT', 'BERGS', 'BLONP', 'CHOPS', 'ERNSH']; 

        this.master = customerData.filter((e) => this.names.indexOf(e.CustomerID) !== -1); 

        this.toolbarOptions = ['Print']; 

    } 

    ; 

    rowselect(args) { 

        let selRecord = args.data; 

        let selecteMessage = document.getElementsByClassName('e-statustext')[0]; 

        let message = selecteMessage.querySelector('b'); 

        message.textContent = selRecord.ContactName; 

        this.detailGrid.dataSource = data.filter((record) => record.CustomerName === selRecord.ContactName).slice(0, 5); 

    } 

    beforePrint (args) { 

var customElem = document.createElement('div'); 

customElem.innerHTML = document.getElementsByClassName("e-statustext")[0].innerHTML+ this.detailGrid.element.innerHTML;  //appending the detailGrid element in beforeprint event of themasterGrid 

  customElem.appendChild(document.createElement('br')); 

   args.element.append(customElem); 

    } 

    render() { 

        return (<div className='control-pane'> 

                <div className='control-section'> 

                    <GridComponent dataSource={this.master} toolbar={this.toolbarOptions}  selectedRowIndex={2} beforePrint={this.beforePrint.bind(this)} rowSelected={this.rowselect.bind(this)}> 

                        <ColumnsDirective> 

                            <ColumnDirective field='ContactName' headerText='Customer Name' width='150'></ColumnDirective> 

                            <ColumnDirective field='CompanyName' headerText='Company Name' width='150'></ColumnDirective> 

                            <ColumnDirective field='Address' headerText='Address' width='150'/> 

                            <ColumnDirective field='Country' headerText='Country' width='130'/> 

                        </ColumnsDirective> 

                        <Inject services={[Selection,Toolbar]}/> 

                    </GridComponent> 

                    <div className='e-statustext'> Showing orders of Customer:  <b></b></div> 

                    <GridComponent dataSource={this.detail} allowSelection={false} ref={grid => this.detailGrid = grid}> 

                        <ColumnsDirective> 

                            <ColumnDirective field='OrderID' headerText='Order ID' width='100'></ColumnDirective> 

                            <ColumnDirective field='Freight' headerText='Freight' width='100' format='C2' type='number'/> 

                            <ColumnDirective field='ShipName' headerText='Ship Name' width='150'></ColumnDirective> 

                            <ColumnDirective field='ShipCountry' headerText='Ship Country' width='150'></ColumnDirective> 

                            <ColumnDirective field='ShipAddress' headerText='Ship Address' width='150'></ColumnDirective> 

                        </ColumnsDirective> 

                    </GridComponent> 

                </div> 

            </div>); 

    } 

} 

render(<MasterDetail />, document.getElementById('sample')); 

Sample: https://stackblitz.com/edit/react-146763-print-master-detail?file=index.js 

Documentation: https://ej2.syncfusion.com/react/documentation/api/grid/#beforeprint 

Please get back to us, if you need further assistance. 

Regards, 

Manivel 

[Albert]

Thanks for your reply,

What I need is to print details of each master row after them one by one, not just printing master and the first row's details.

Exactly like what hierarchy grid does.

Thanks

[Manivel Sellamuthu]

Hi Albert, 

Thanks for your update. 

You can print the hierarchy Grid in required way by using the “hierarchyprintmode” property. Please refer to the below documentation link for more information. 

Documentation: https://ej2.syncfusion.com/react/documentation/grid/print/#print-the-hierarchy-grid 

Please get back to us, if you need any further assistance on this. 

Regards, 

Manivel.