how to get the click clear button event in searchbar

Question

Hi teams, I was using ej-2 grid and do the own searching with the following function:

actionBegin(args) {

  if (args.requestType === 'searching') {
    args.cancel= true;
    this.searchParam = args.searchString.toLowerCase();
    console.log('key'+this.searchParam);
    //api call
  }
}

But the clear button cannot reset the result. My question is how should I get the click reset button in search bar event, so that I can call a refresh function to refatching the data without searchParam. Thanks!

Dineshnarasimman Muthu · Answer

Hi Zemeng Wang,Greetings from Syncfusion Support.We have reviewed your requirement regarding the click
event of the clear button of the grid's searchbar. We suggest you to bind the
click event to the grid's clear button using addEventListener in the created
event of the grid. The code snippet of the implementation and sample have been
attached for your reference.

[app.component.html]
   
    <ejs-grid
      #grid
      id="grid"
      [dataSource]="data"
      allowPaging="true"
      (created)="created()"
      [pageSettings]="pageSettings"
      [toolbar]="toolbar"
      (actionBegin)="actionBegin($event)"
    >
  [app.component.ts]
   
    created(args) {
      var searchClearButton = this.grid.element.querySelector('.e-search')
        .querySelector(`#${this.grid.element.id}_clearbutton`); // getting the clear button
   
      searchClearButton.addEventListener('click', (e: any) => {
        if (e.target.classList.contains('e-clear-icon')) { //checking the target icon
          alert(this.searchString);
          console.log(this.searchString);
  // perform your operations
        }
      });
    }

Sample: https://stackblitz.com/edit/clear-search-eventPlease let us know if you need any further assistance.Regards,Dineshnarasimman M