Override 'x' clear button behavior on a text box

[Shahram]

Hi 

How can I override the clear button ('x') behavior on a text box of a filter template? Is it possible to clear the filter content by clicking on the 'x' button on a grid column? 

[Iva Koevska]

Hi Shahram,

Thanks for reaching out.

Unfortunately, neither the provided information, nor the selected product are sufficient for us to determine what assistance you might need.

Would you mind specifying the exact product you need assistance with? Thanks!

Regards,
Iva Koevska
Telerik

 

 

[Shahram]

Hi Iva,

My question is about one of the controls in Telerik UI for ASP.NET AJAX product . I have a telerik "RadGrid" on my .aspx page in which I have a "GridBoundColumnn" with  "AllowFiltering" enabled. When users type in the filter text box of that column, a small 'x' button appears on the right side of the text box. Clicking on that button only clears the content of the text box not the actual filter. Is there a way to override this 'x' button's behavior so that it clears the column filter?

Regards

[Konstantin Dikov]

Hello Shahram,

The behavior that you are describing is a browser behavior not related to our controls. Please note that IE will add the small "x" button to all input elements, when they are focused. What this button does is to clear the content of the input element, but once again, this is a browser related behavior.

I could suggest that you hide the clear button in IE also (since it is not available in any other browser). The following forum thread demonstrates how to achieve this:

• Remove IE10's “clear field” X button on certain inputs?

Hope that helps.


Regards,
Konstantin Dikov
Telerik

 

 

[Shahram]

Hi Konstantin,

Thanks for your respond. I followed instructions from the link you sent me and added the following rule to all elements on all of my pages:

::-ms-clear
{
    display: none !important;
}

It worked for asp controls but not for elements in my RadGrid.  It seems that this rules gets ignored for elements in a RadGrid somehow. And I also noticed that 'x' clear button doesn't show up for some textboxes regardless of applying this css rule (in  IE 11).

Thank you 

[Konstantin Dikov]

Hello Shahram,

I have tested locally such scenario and the "x" clear button is not visible on any input element. For your convenience I am attaching the sample I have tested on my end.

Please note that if you are running your page in IE with different Document or Browser mode, the style change will not be applied. Some information on this is available at the following forum thread:

• Remove IE11's “clear field” X button on Windows 8
• Remove “clear field” X button when Browser Mode : IE9 Document Mode:IE9 on certain inputs?
  

Once again, please have in mind that this is a IE behavior, not related to our controls in any way.


Regards,
Konstantin Dikov
Telerik