Easy way to clear search bar in ejs-grid

[Vaishali Goyal]

Hi,

I implemented the searching option to the ejs-grid, 

Currently user has to use backspace to clear the search. 

Is there any easy way to clear the search bar? 

[Ajith Govarthan]

Hi Vaishali, 

Thanks for the contacting Syncfusion support. 

Query: Currently user has to use backspace to clear the search. Is there any easy way to clear the search bar? 

Based on your query you want to clear search easily without using the backspace. So, we have prepared sample and in that sample we have used the keypressed event to clear the search easily with Esc key in the Grid component.  

For your convenience we have attached the sample please refer them for your reference. 

Code Example: 

App.component.ts 

  keyHandler(e) { 

    if (e.keyCode === 27 && this.grid.searchSettings.key !== "") { 

      this.grid.searchSettings.key = ""; // clear the search by setting empty string 

    } 

  } 

Sample Link: https://stackblitz.com/edit/angular-qqp5st-kj4kqh?file=app.component.ts 

Please get back to us if you need further assistance. 

Regards, 

Ajith G. 

[gugal]

Hi SF Team,

I used search bar with a cancel button. After clicking on the cancel button the search item remain at the top position.  I'm also attaching the screenshot the first item id=123 but it is showing at top.

[Nithya Sivaprakasam]

Hi Pawan,

Thanks for contacting syncfusion support.

Query:” After clicking on the cancel button the search item remains at the top position”

Based on your query ” After clicking on the cancel button the search item remains at the top position when using the search bar with a cancel button”, we tried to reproduce the reported issue at our end. But it was working fine at our end. Please check the sample and video demonstration.

Sample: https://stackblitz.com/edit/angular-qqp5st-uyfdam?file=app.component.ts

So, we need extra details to validate your query at our end and provide a better solution on our end as soon as possible. Please share the following details.

1. Please share the Version of the syncfusion package.
2. Please share the complete grid rendering code.
3. Please share the issue reproducible sample or replicate the issue in the above sample.
4. Please share the data binding details

The above-requested details will be very useful for us to validate further at our end.

Regards,

Nithya Sivaprakasam.

Attachment: forum_search_19b5f86f.zip

[Ankur Tyagi]

how to remove clear icon in search?

[Vikram Sundararajan]

Hi Ankur Tyagi,

Greetings from Syncfusion support,

Based on your query want to remove the clear icon in search. In the Syncfusion EJ2 Grid, the clear icon in the search box is a default behavior, and there is no direct property to disable or remove it from the search box in the API. However, you can achieve this by using CSS to hide the clear icon. Add the following style to your HTML or in your stylesheet:

  [index.html]

 

<style>

    /* Hide the clear icon in the Data Grid search box */

    .e-clear-icon {

        display: none !important;

    }

</style>

 

Sample: https://stackblitz.com/edit/jacu3v-gypiwj?file=index.html

Please get back us if you need further assistance.

Regards,

Vikram S