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.
|
import { render } from 'react-dom';
import './index.css';
import * as React from 'react';
import { DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';
import { GridComponent, ColumnsDirective, ColumnDirective, Page, Filter, Inject } from '@syncfusion/ej2-react-grids';
import { orderDataSource } from './data';
import { SampleBase } from './sample-base';
export class FilterMenu extends SampleBase {
constructor() {
super(...arguments);
this.filterSettings = { type: 'Excel' };
this.fields = { text: 'text', value: 'value' };
}
valueAccess(field, data, column){
return data[field] + 678 ; // here you can customize your data
}
filterValue = {
type: 'CheckBox',
itemTemplate: (e)=>{
return <span>{e.data[e.column.field] +'678'}</span> // here you can return your customized data
}
}
render() {
return (<div className='control-pane'>
<div className='control-section row'>
<GridComponent dataSource={orderDataSource} allowPaging={true} ref={grid => this.gridInstance = grid} pageSettings={{ pageSize: 10, pageCount: 5 }} allowFiltering={true} filterSettings={this.filterSettings}>
<ColumnsDirective>
<ColumnDirective field='OrderID' headerText='Order ID' width='120' textAlign='Right'></ColumnDirective>
<ColumnDirective field='ShipCountry' headerText='Ship Country' width='150' filter={this.filterValue} valueAccessor={this.valueAccess}></ColumnDirective>
<ColumnDirective field='CustomerName' headerText='Customer Name' width='150'></ColumnDirective>
</ColumnsDirective>
<Inject services={[Filter, Page]}/>
</GridComponent>
</div>
</div>);
}
} |
