Filter clean button

[Julio Cezar Mendonca]

Good afternoon, I would like to know how to do the 'clean' button of the filter just wipe the input (reset the filter) and do not close it. When I click the clean button it is always cleaning and closing the filter screen, I would like you to just clear the fields. Follow the attached image to help with the sample. Thank you

Attachment: Aliquot2_bb9ed244.zip

[Hariharan J V]

Hi Julio, 

  

Greetings from Syncfusion. 

  

Query: I would like to know how to do the 'clean' button of the filter just wipe the input (reset the filter) and do not close it. When I click the clean button it is always cleaning and closing the filter screen, I would like you to just clear the fields. Follow the attached image to help with the sample. 

  

Before starting your requirement, could you please confirm your requirement. It will be helpful to provide a better solution. 

  

• Whether do you want to clear the entered text only before filtering the records and want to show the filter dialog always?. (or)
• Do you want clear the already filtered filter values and you want to show the filter dialog.

  

Regards, 

Hariharan 

[Julio Cezar Mendonca]

Good Morning, I would like to clean only the filter values, I will try to exemplify, imagine that the user typed something wrong and want to clean the fields without closing the screen. I know we could use backspace, but this would be a requirement of the user, that when we click on the 'Clear' button the fields are, say, reset and the filter is still open for filling (with empty fields). I was able to better illustrate my question? Thankful, Júlio C. Mendonça

[Hariharan J V]

Hi Julio, 

  

Query: I would like to clean only the filter values, I will try to exemplify, imagine that the user typed something wrong and want to clean the fields without closing the screen. I know we could use backspace, but this would be a requirement of the user, that when we click on the 'Clear' button the fields are, say, reset and the filter is still open for filling (with empty fields). I was able to better illustrate my question? 

  

We have validated your query and you want to clear the entered value in the filter dialog without closing it. You can achieve your requirement by using below way. Here, we have bind a button in filter dialog and by using this button, we have cleared the entered text. Please find the below code example and sample for your reference. 

  

[code example] 

<ejs-grid #grid [dataSource]='data' [toolbar]='toolbar' allowPaging='true' allowFiltering='true' [editSettings]='editSettings' [pageSettings]='pageSettings' [filterSettings]='filterSettings' (actionComplete)="complete($event)"> 

        <e-columns> 

            ... 

       </e-columns> 

    </ejs-grid> 

... 

export class AppComponent { 

  public data: Object[]; 

  ... 

  

  complete(args: any): void { 

        var button = document.createElement('button'); 

        button.setAttribute('class', 'e-control e-btn e-lib e-flat'); 

        button.setAttribute('cssClass', 'e-flat'); 

        button.innerHTML = 'clear value'; 

        args.filterModel.dlgDiv.children[1].append(button); 

        button.addEventListener('click', function (e) { 

            (document.getElementsByClassName('e-flmenu-valuediv')[0].children[0].children[0] as any).value = "";    //cleared the entered text 

            (document.getElementsByClassName('e-flmenu-valuediv')[0].children[0].children[1] as any).value = "";    //cleared the entered text 

        }) 

    }} 

  

Sample: https://stackblitz.com/edit/angular-684fse-yimjwi?file=app.component.ts   

 

Note: we are not overridden existing clear button, because it's required for clear filtering particular column. If you don't need this clear button then you can hide this.  

  

Please get back to us if you need further assistance. 

  

Regards, 

Hariharan 

[Julio Cezar Mendonca]

Worked perfectly. Thank you for your help.

[Hariharan J V]

Hi Julio,

Thanks for your update.

We are happy to hear that your requirement has been resolved.

Regards,
Hariharan