Title: DataGrid/ListBase filterDelay not behaving in the expected way Post by: chrwei on June 17, 2022, 10:41:17 AM this might only apply when remote filtering
as a test, I set filterDelay={5000} I would expect that each new keystroke would reset the delay, and as long as I press any kind of key, including arrows, the actual filtering would not happen. what happens is that every 5 seconds as long as I'm typing a another filter request is done. My requests take a bit to process, and since it's all async it's not only causing extra server load, but also the requests don't come back in the same order, especially since a more specific filter will return faster, so sometimes the final search will return before the previous one completes, resulting in the desired data being replaced by the previous! I think the below test case based on your remote filter example should show the issue, though I can't test it because your server doesn't allow CORS from http://localhost:3000/. The console should show the requests with a timestamp Code: import React from 'react'; import { DataGrid, GridColumn, NumberBox } from 'rc-easyui'; class App extends React.Component { constructor(props) { super(props); this.state = { total: 0, data: [], pageNumber: 1, loading: false, filterRules: null, operators: ["nofilter", "less", "greater"] } } componentDidMount() { this.fetchData(); } fetchData() { const { pageNumber, filterRules } = this.state; const config = { credentials: 'include', method: 'post', mode: 'cors', headers: { 'Accept': 'application/json, text/plain, */*', 'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8' }, body: `page=${pageNumber}&rows=10&filterRules=${filterRules}` }; const url = 'https://www.jeasyui.com/demo/main/datagrid33_getdata.php'; this.setState({ loading: true }) fetch(url, config).then(res => { return res.json(); }).then(data => { this.setState({ total: parseInt(data.total, 10), data: data.rows, loading: false }) }) } handlePageChange({ pageNumber, refresh }) { if (refresh) { this.fetchData(); } else { this.setState({ pageNumber: pageNumber }, () => { this.fetchData(); }) } } handleFilterChange(filterRules) { console.log(new Date().getTime(), JSON.stringify(filterRules)) this.setState({ filterRules: JSON.stringify(filterRules) }, () => { this.fetchData() }) } render() { return ( <div> <h2>Remote Filtering</h2> <DataGrid style={{ height: 250 }} total={this.state.total} data={this.state.data} pageSize={10} pageNumber={this.state.pageNumber} loading={this.state.loading} pagination lazy filterable filterDelay={5000} onPageChange={this.handlePageChange.bind(this)} onFilterChange={this.handleFilterChange.bind(this)} > <GridColumn field="itemid" title="Item ID"></GridColumn> <GridColumn field="productid" title="Product"></GridColumn> <GridColumn field="listprice" title="List Price" align="right" filterOperators={this.state.operators} defaultFilterOperator="nofilter" filter={() => <NumberBox></NumberBox>} /> <GridColumn field="unitcost" title="Unit Cost" align="right" filterOperators={this.state.operators} defaultFilterOperator="nofilter" filter={() => <NumberBox></NumberBox>} /> <GridColumn field="attr1" title="Attribute" width="30%"></GridColumn> </DataGrid> </div> ); } } export default App; Title: Re: DataGrid/ListBase filterDelay not behaving in the expected way Post by: jarry on June 20, 2022, 07:44:20 PM Please update to the newest version.
|