Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

199
Views
React syncfusion Query doesn't execute as expected

I'm trying to modify this code for filtering a listview's contents.

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.list = [
      {text: 'Hennessey Venom', id: 'list-01'},
      {text: 'Bugatti Chiron', id: 'list-02'},
      {text: 'Bugatti Veyron Super Sport', id: 'list-03'},
      {text: 'SSC Ultimate Aero', id: 'list-04'},
      {text: 'Koenigsegg CCR', id: 'list-05'},
      {text: 'McLaren F1', id: 'list-06'},
    ];
    this.fields = {text: 'text', id: 'id'};
    this.state = {listData: this.list};
  }
  onKeyUp(e) {
    let value = e.target.value;
    const re = /^([\w\d]*)\s*(==|!=)\s*([\w\d]*)$/i;

    let matches = value.match(re);
    let data;
    if (matches) {
      let key = matches[1];
      let op = matches[2];
      let search_value = matches[3];
      // doesn't return anything
      data = new DataManager(this.state.listData).executeLocal(
        new Query().search({searchKey: search_value, fieldNames: ['text'], operator: op}),
      );
      // original example code, doesn't return anything when run in this branch,
      // despite working below in the other branch.
      // data = new DataManager(this.state.listData).executeLocal(
      //   new Query().where('text', 'contains', value, true),
      // );
    } else {
      // the original example, works as expected in this branch
      data = new DataManager(this.state.listData).executeLocal(new Query().where('text', 'contains', value, true));
    }

    if (!value) {
      this.setState({
        listData: this.list,
      });
    } else {
      this.setState({
        listData: data,
      });
    }
  }
  render() {
    return (
      <div id='sample'>
        <input
          className='e-input'
          type='text'
          id='textbox'
          placeholder='Filter'
          onKeyUp={this.onKeyUp.bind(this)}
          title='Type in a name'
        />
        <ListViewComponent id='list' dataSource={this.state.listData} fields={this.fields} sortOrder='Ascending' />
      </div>
    );
  }
}
ReactDOM.render(<App />, document.getElementById('element'));

When it uses the else branch, the code runs as expected. But when I enter text == bug for example, in the box, the top branch runs but bothg the new Query and the original Query return empty arrays. I'm unsure why this is, even with the same exact Query as the else branch (shown as commented out).

I know that the regex is working correctly, as I logged the values of key, op, and search_value and they are correct.

about 4 years ago · Juan Pablo Isaza
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!