How to refresh the grid or the page , when you remove a condition in the query builder

Question

When we click on the cross button present at the side of query builder to remove (delete) the condition, I wan to refresh the grid so that the previous result(data before applying the condition in query builder) can be shown.

1.this shows data before any query

2.this shows result from the query

3. but even after removing the condition , it still shows the previous data. I want to refresh the grid , once the condition is removed.

I want to refresh the grid whenever the remove condition button is clicked

YuvanShankar Arunagiri · Answer

Hi
Abhishek,We have validated your reported query and prepared the
sample based on your requirement. Please use the refresh method of the
grid and ruleChange event of the query builder and refer below code
snippet and sample.[index.js]:

updateRule(args) {
          let predicate =
  this.qbObj.getPredicate(args.rule);
          if (isNullOrUndefined(predicate)) {
              this.gridObj.query = new
  Query().select(['TaskID', 'Name', 'Category', 'SerialNo', 'InvoiceNo',
  'Status']);
          }
          else {
              this.gridObj.query = new
  Query().select(['TaskID', 'Name', 'Category', 'SerialNo', 'InvoiceNo', 'Status'])
                  .where(predicate);
          }
          this.gridObj.refresh();
      }

Sample
link: https://stackblitz.com/edit/react-pzk71z?file=index.jsCould you please check the above
code and get back to us, if you need any further assistance on this. Regards,YuvanShankar
A