BoldSignEasily embed eSignatures in your .NET applications. Free sandbox with native SDK available.
[App.js]
class App extends Component {
constructor(props) {
super(props);
}
columns = [
{ field: 'OrderID', headerText: 'Order ID', width: 120, type: 'number', editType: "numericedit" },
{ field: 'CustomerID', width: 140, hebderText: 'Customer ID', type: 'string'},
{ field: 'ShipCity', width: 140, headerText: 'Ship City', allowFiltering: false, allowSorting: false },
{ field: 'OrderDate', width: 140, headerText: 'Order Date', type: 'date', format: 'yMd', editType: "datetimepickeredit" }
];
componentDidMount() {
//Dynamically to bind the columns and dataSource in EJ2 Grid
this.pGrid.gridInstance.columns = this.columns;
this.pGrid.gridInstance.dataSource = orderData;
}
render() {
return (
<div className="App" >
<Parent ref={g => this.pGrid = g} ></Parent>
</div>
);
}
}
[Parent.js]
class Parent extends React.Component {
constructor(props) {
super(props);
this.toolbarOptions = ['ExcelExport', 'PdfExport', 'CsvExport'];
this.editOptions = { allowEditing: true, allowAdding: true, allowDeleting: true, mode: "Normal" };
};
render() {
return (
<div className="Parent" >
<div className='control-section'>
<GridComponent ref={grid => this.gridInstance = grid} allowFiltering={true} allowPaging={true} allowSorting={true}
toolbar={this.toolbarOptions} allowExcelExport={true} allowPdfExport={true} allowSelection={true}
editSettings={this.editOptions}>
<Inject services={[Filter, Page, Edit, Toolbar, ExcelExport, PdfExport, Sort]} />
</GridComponent>
</div>
</div>
);
}
}
export default Parent; |