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.
|
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')); |
